Question

我编写了一个组件，它使用templateUrl来包含一个html文件

/*component*/
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
/*html*/
<h1>My First Angular 2 App</h1>

webpack配置

  {
    test: /\.ts$/,
    loaders: [
      'awesome-typescript-loader'
    ],
    exclude: [/node_modules/,/\.(spec|e2e)\.ts$/]
  },{
    test: /\.html$/,
    loader: 'raw-loader',
    exclude: [path.resolve(__dirname, "index.html")]
  }

new HtmlWebpackPlugin({ template: 'index.html' })

输出js文件应包含html，但它没有

这是我在github中的代码 https://github.com/jiaming0708/ng2-webpack

Answer 1

您可以使用angular2-template-loader，因此您无需编写要求它将为您完成该工作，您可以继续编写简单的语法，如

<button id="ButtonComplete" href="#" onclick='CompleteTodo(@item.Id,@item.isCompleted.ToString().ToLower())' class="waves-effect waves-light @(item.isCompleted?"blue":"green") btn">@if (!item.isCompleted)
                { <i class="material-icons">done</i>}
                else
                { <i class="material-icons">clear</i> }</button>

而不是

 templateUrl: './app.component.html'

它是如何运作的

angular2-template-loader在Angular 2 Component元数据中搜索templateUrl和styleUrls声明，并用相应的require语句替换路径。

如何在我的项目中添加

template: require('./my-component.html')

webpack.config中的小变化

npm install angular2-template-loader --save-dev

使用html-loader而不是raw loader

loaders: ['awesome-typescript-loader', 'angular2-template-loader']

Learn more

Answer 2

我发现angular2-webpack-starter它没有使用require并使用templateUrl。

配置

  {
    test: /\.ts$/,
    loaders: [
      'awesome-typescript-loader',
      'angular2-template-loader',
      '@angularclass/hmr-loader'
    ],
    exclude: [/\.(spec|e2e)\.ts$/]
  },
  {
    test: /\.html$/,
    loader: 'raw-loader',
    exclude: [helpers.root('src/index.html')]
  }

成分</ P>

  templateUrl: './home.template.html'

他们为什么能这样做？

Answer 3

如果要在JS包中包含html，请使用raw加载器，就像您一样。但是，如果您不require，则webpack无法识别您的文件。不要使用templateUrl，而是使用template：

@Component({
  selector: 'my-component',
  template: require('./my-component.html')
})

如果您想在输出中使用单独的html文件，请使用file-loader和templateUrl

Angular2 + Webpack如何用templateUrl输出html文件？

3 个答案:

它是如何运作的

如何在我的项目中添加