asp.net-mvc – 如何通过保持’templateurl’原样来编译angular

发布时间：2020-12-16 06:40:01 所属栏目：asp.Net 来源：网络整理

导读：Webpack通过在dist文件夹中生成’js’来编译’typescript’文件. 我发现webpack正在将所有’templateurl’更改为’template’,如下所示：我的打字稿组件： @Component({selector: 'app',encapsulation: ViewEncapsulation.None,templateUrl: 'app.html',//

Webpack通过在dist文件夹中生成’js’来编译’typescript’文件.
我发现webpack正在将所有’templateurl’更改为’template’,如下所示：

我的打字稿组件：

@Component({
selector: 'app',encapsulation: ViewEncapsulation.None,templateUrl: 'app.html',// <----------------------
directives: [HeaderComponent,SideBar],})

这里自动生成编译的JS Component

App = __decorate([
        core_1.Component({
            selector: 'app',encapsulation: core_1.ViewEncapsulation.None,template: __webpack_require__(718),// <----------
            directives: [header_component_1.HeaderComponent,sidebar_component_1.SideBar],}),__metadata('design:paramtypes',[(typeof (_a = typeof app_service_1.AppState !== 'undefined' && app_service_1.AppState) === 'function' && _a) || Object])
    ],App);

我想要做的就是在生成的文件中继续使用’templateUrl’.

我正在使用asp.net mvc,我有很多CSHTML文件,我想继续使用它.我想改变webpack如何编译’ts’并忽略’获取该html内容’的想法.所以我期待：

App = __decorate([
        core_1.Component({
            selector: 'app',// <----------------------
            directives: [header_component_1.HeaderComponent,App);

我试图像这样手动更改自动生成的文件.它的工作原理.
我想保留templateUrl.

解决方法

Webpack并没有这样做.
如果这样的事情已经完成,你可能有一个加载器来做到这一点.

您可能正在使用具有预配置webpack配置的入门工具包.
我最好的选择是你使用angular2-webpack-starter.

在angular2-webpack-starter中有一个名为angular2-template-loader的插件,用于通过将文字字符串(即：html的路径)更改为require语句,将Component.templateUrl转换为Component.template.

这个过程内联所有的html和样式,所以它不仅适用于html模板,也适用于styleUrls.

要删除此功能,请在webpack配置文件中更改：

module: {
    loaders: [
      {
        test: /.ts$/,loaders: ['awesome-typescript-loader','angular2-template-loader'],exclude: [/.(spec|e2e).ts$/]
      }
    ]
  }

对此：

module: {
    loaders: [
      {
        test: /.ts$/,loaders: ['awesome-typescript-loader'],exclude: [/.(spec|e2e).ts$/]
      }
    ]
  }

也就是说,删除执行内联的加载器(angular2-template-loader)

如果你想深入了解,这里是angular2-template-loader代码的一部分：

var newSource = source.replace(templateUrlRegex,function (match,url) {
                 // replace: templateUrl: './path/to/template.html'
                 // with: template: require('./path/to/template.html')
                 return "template:" + replaceStringsWithRequires(url);
               })
               .replace(stylesRegex,urls) {
                 // replace: stylesUrl: ['./foo.css',"./baz.css","./index.component.css"]
                 // with: styles: [require('./foo.css'),require("./baz.css"),require("./index.component.css")]
                 return "styles:" + replaceStringsWithRequires(urls);
               });

  // Support for tests
  if (this.callback) {
    this.callback(null,newSource,sourcemap)
  } else {
    return newSource;
  }
};

您可以在评论中看到这正是您遇到的问题.
您还可以查看source code

It should be noted that opting-out of inlining will result in a performance hit. Your app will have to perform more http requests and your HTML markup (template) will stay at it’s raw form. In other words,the HTML code you write will not get the optimizations provided by webpack. I do not recommend opting-out of this loader

（编辑：李大同）

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