首页 文章

如何通过保持'templateurl'原样编译angular 2 webpack

提问于
浏览 次
4

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

asp.net-mvc angular webpack

1 回答

  • 5

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

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

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

    此过程内联所有html和 style's ，因此它不仅适用于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, 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;
  }
};

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

    应该注意，选择退出内联将导致性能下降 . 您的应用必须执行更多的http请求，并且您的HTML标记（模板）将保留其原始格式 . 换句话说，您编写的HTML代码将无法获得webpack提供的优化 . 我不建议选择退出这个装载机

    回复于

相关问题