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

发布时间：2020-12-17 17:56:35 所属栏目：安全来源：网络整理

导读：我编写了一个组件,它使用templateUrl来包含一个html文件 /*component*/@Component({ selector: 'my-app',templateUrl: './app.component.html'})/*html*/h1My First Angular 2 App/h1 webpack配置就好 { test: /.ts$/,loaders: [ 'awesome-typescript-loade

我编写了一个组件,它使用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

解决方法

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

templateUrl: './app.component.html'

代替

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

它是如何工作的

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

如何在我的项目中添加它

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

webpack.config中的小变化

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

使用html-loader而不是raw loader

{test: /.html$/,loader: 'html'}

Learn more

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!