與Webpack 2的Angular2相對路徑

Question

所以我正在通過angular.io網站上的巡回英雄教程，除了我使用webpack而不是systemjs。

一切都運行得很順利，直到我得到關於模板的部分並使用相對路徑指示我需要在組件中指定“module.id”以使相對路徑起作用。 不幸的是，使用module.id什么都沒做，我仍然使用webpack-dev-server接收404錯誤。 該項目仍在嘗試從根目錄加載模板。

我也嘗試在templateUrls上使用“./”語法，以便webpack可以為我解決這些問題，但運行webpack-dev-server仍然遇到了404問題。

還有其他人有這些問題嗎？

import { Component, OnInit } from "@angular/core";
import { Hero } from "./hero";
import { HeroService } from "./hero.service";

@Component({
    moduleId: String(module.id),
    selector: "my-dashboard",
    templateUrl: "./dashboard.component.html"
})
export class DashboardComponent implements OnInit {
    heroes: Hero[] = [];

    ngOnInit(): void {
        this.heroService.getHeroes().then(heroes => this.heroes = heroes.slice(1, 5));
    }

    constructor(private heroService: HeroService) {}
}

Answer 1

為了使用webpack的相對路徑，你必須使用

import { Component } from '@angular/core';



@Component({ selector: 'my-app',
 template: require('./header.component.html'), styles: [require('./header.component.css')] })



export class HeaderComponent implements OnInit { }

當我們使用system.js時，我們使用

如果我們決定使用SystemJS，我們使用__moduleName變量而不是module.id變量

請找到這將有助於您更好的鏈接。

幫助鏈接

Answer 2

好的，為了使用require（'。/ template.html'）將模板嵌入到組件中，需要為webpack加載一個名為angular2-template-loader和raw-loader的加載器