Nativescript＆Webpack - 外部テンプレートをロード

Question

WebpackにバンドルされているNativescript/angular2プロジェクトに外部テンプレートをロードしたいとします。

私はみんなが提供ハロー世界のアプリケーションNSを使用して概念実証を行なったし、ドキュメント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.htmlapp.component.ts

エラーと同じレベルでappのフォルダにあります。

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

これは簡単です。いくつかのアイデアは私が逃している？テンプレートコードをインライン化すると、すべて正常に動作します。

Answer 1

コンポーネントにテンプレートを使用するには2通りの方法があります。

1. インポートテンプレート

   import appComponent from './app.component.html'; 
   ... 
   
   @Component({ 
   template : headerTemplate, 
   ... 
   }) 
   

2. あなたが代わりにテンプレートをtemplateUrlを使用することができますtemplateUrl

   を使用しています。 Webpackはあなたにテンプレートを要求するように注意します。パスはの相対です。

   @Component({ 
       templateUrl: './header.component.html', 
   })