我想在与Webpack捆绑的Nativescript / angular2项目中加载外部模板。
我刚刚使用NS家伙提供的hello world应用程序并遵循文档https://docs.nativescript.org/tooling/bundling-with-webpack进行了概念验证,但它没有按预期工作:
我粘贴了我的代码,虽然它模仿了文档所说的内容。
webpack.config.js:
var bundler = require("nativescript-dev-webpack");
var path = require("path");
module.exports = bundler.getConfig({
resolveLoader: {
root: path.join(__dirname, "node_modules")
},
module: {
loaders: [
{
test: /\.html$/,
loader: "html"
}
]
}
});
app.component.ts:
import { Component } from "@angular/core";
@Component({
selector: "my-app",
template: require("./app.component.html")
})
export class AppComponent {}
app.component.html
位于app
文件夹中与app.component.ts
错误:
Error: Cannot find module "./app.component.html"
File "/data/data/org.nativescript.groceries/files/app/bundle.js line 54749, colum 174
它应该是直截了当的。我缺少一些想法?如果我内联模板代码一切正常。
答案 0 :(得分:2)
There are two ways you can use the templates for your component.
Import the template
import appComponent from './app.component.html';
...
@Component({
template : headerTemplate,
...
})
use templateUrl
You can use templateUrl instead template. Webpack will take care to require the template for you. The path is relative to component.
@Component({
templateUrl: './header.component.html',
})