如何通过保持'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屋!