Nativescript & Webpack - 加载外部模板答案

【问题标题】：Nativescript & Webpack - load a external templateNativescript & Webpack - 加载外部模板
【发布时间】：2016-10-20 12:25:34
【问题描述】：

我想在与 Webpack 捆绑的 Nativescript / angular2 项目中加载外部模板。

我刚刚使用 NS Guy 提供的 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.component.ts在同一级别的app文件夹中

错误：

Error: Cannot find module "./app.component.html"
File "/data/data/org.nativescript.groceries/files/app/bundle.js line 54749, colum 174

它应该是直截了当的。一些想法我错过了什么？如果我内联模板代码一切正常。

【问题讨论】：

尝试import 而不是require-ing它

标签： webpack angular2-nativescript

【解决方案1】：

您可以通过两种方式为组件使用模板。

导入模板

import appComponent from './app.component.html';
...

@Component({
template : headerTemplate,
...
})

使用模板网址

您可以使用 templateUrl 代替模板。 Webpack 会注意为您提供模板。路径与组件相对。
```
@Component({
  templateUrl: './header.component.html',
})
```

【讨论】：