Nativescript& Webpack - 加载外部模板

时间:2016-10-20 12:25:35

标签: webpack angular2-nativescript

我想在与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

它应该是直截了当的。我缺少一些想法?如果我内联模板代码一切正常。

1 个答案:

答案 0 :(得分:2)

There are two ways you can use the templates for your component.

  1. Import the template

    import appComponent from './app.component.html';
    ...
    
    @Component({
    template : headerTemplate,
    ...
    })
    
  2. 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',
    })