Nativescript & Webpack - загрузить внешний шаблон

Question

Я хочу загрузить внешний шаблон в проекте Nativescript/angular2 в комплекте с Webpack.

Я просто сделал доказательство концепции с использованием мирового приложения привет 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.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 

Это должно быть просто. Некоторые идеи, что мне не хватает? Если я встраиваю код шаблона, все работает правильно.

Answer 1

Существует два способа использования шаблонов для вашего компонента.

1. Импорт шаблона

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

2. использование templateUrl

   Вы можете использовать templateUrl вместо шаблона. Webpack позаботится о том, чтобы потребовать шаблон для вас. Путь: Относительный к компоненту.

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