如何通过保持“templateurl”不变来编译 Angular 2 Webpack

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

我的打字稿组件：

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

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

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',
            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。

Webpack 并没有这样做。 如果完成了这样的事情，您可能有一个加载器可以做到这一点。

您可能正在使用带有预配置 webpack 配置的入门套件。 我最好的选择是你正在使用angular2-webpack-启动器 https://github.com/AngularClass/angular2-webpack-starter.

In angular2-webpack-启动器有一个插件叫Angular2 模板加载器用于转换Component.templateUrl to Component.template通过将文字字符串（即：html 路径）更改为 require 语句。

此过程内联所有 html 和style's，所以它不仅适用于 html 模板，也适用于 styleUrls。

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

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

To this:

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

也就是说，删除执行内联的加载器（angular2-template-loader）

如果你想更深入，这里是代码的一部分Angular2 模板加载器:

  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;
  }
};

您可以在评论中看到这正是您遇到的问题。 您还可以查看源代码 https://github.com/TheLarkInn/angular2-template-loader/blob/master/index.js#L19

应该注意的是，选择退出内联将导致性能下降。您的应用程序将必须执行更多的 http 请求，并且您的 HTML 标记（模板）将保持其原始形式。换句话说，你写的HTML代码不会得到webpack提供的优化。我不建议选择退出此加载程序