如何通过保持'templateurl'原样编译Angular 2 Webpack [英] How to compile angular 2 webpack by keeping 'templateurl' as is

问题描述

Webpack通过在 dist 文件夹中生成"js"来编译"typescript"文件. 我发现webpack像这样将所有"templateurl"更改为"template":

Webpack is compiling 'typescript' files by generating 'js' in dist folder. I found that webpack is changing all 'templateurl' to 'template' like this:

我的打字稿组件:

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

这里是自动生成的已编译JS组件

Here the auto generated compiled 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'.

What I want to do is just to keep using 'templateUrl' even in the generated file.

我正在使用asp.net mvc，我有很多CSHTML文件，我想继续使用它.我想更改webpack编译"ts"的方式，而忽略获取该html的内容"的想法.所以我期望:

I'm using asp.net mvc, I have a lot of CSHTML files and I want to keep using it. I want to change how webpack is compiling the 'ts' and ignore the idea of 'taking the content of that html'. So I'm expecting:

App = __decorate([
        core_1.Component({
            selector: 'app',
            encapsulation: core_1.ViewEncapsulation.None,
            templateUrl: 'app.html', // <----------------------
            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.

I tried to change the auto generated file manually like this. and it works. I want to keep templateUrl.

推荐答案

Webpack没有这样做. 如果完成了此操作，则可能有一个执行该操作的加载程序.

Webpack is not doing that. If such a thing is done, you probably have a loader that does that.

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

You are probably using a starter kit with pre-configured webpack configuration. My best bet is that you are using angular2-webpack-starter.

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

In angular2-webpack-starter there is a plugin called angular2-template-loader that is used to convert Component.templateUrl to Component.template by changing the literal string (i.e: path to html) into a require statement.

此过程会内嵌所有html和样式的，因此不仅适用于html模板，而且适用于styleUrl.

This process inlines all html and style's, so it's not only for html templates but for styleUrls as well.

要删除此功能，请在您的webpack配置文件中更改以下内容:

To remove this feature, in you webpack configuration file change this:

  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)

That is, remove the loader that does the inlining (angular2-template-loader)

如果您想更深入，请参见 angular2-template-loader 的代码部分:

If you want to get deeper, here is the part of the code of 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, function (match, 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;
  }
};

您可以在评论中看到这正是您遇到的问题. 您还可以查看源代码

You can see in the comments that this is exactly the issue you have. You can also view the source code

应该注意，选择不使用内联会导致性能下降.您的应用将必须执行更多的http请求，并且您的HTML标记(模板)将保持原始格式.换句话说，您编写的HTML代码将无法获得webpack提供的优化. 我不建议您退出此加载程序

这篇关于如何通过保持'templateurl'原样编译Angular 2 Webpack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！