与Webpack 2的Angular2相对路径

Question

所以我在angular.io网站上浏览了英雄之旅教程，除了我使用webpack而不是systemjs。

一切都在顺利进行，直到我得到关于模板的部分并使用相对路径表明我需要指定＆＃34; module.id＆＃34;在相对路径工作的组件中。不幸的是，使用module.id什么都没做，我仍然使用webpack-dev-server接收404错误。该项目仍在尝试从根目录加载模板。

我也尝试过使用＆＃34; ./" 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) {}
}


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变量

请找到有助于您的链接。

Help link

Answer 2

好的，为了使用require（＆＃39; ./ template.html＆＃39;）将模板嵌入到您的组件中，您需要这个名为angular2-template-loader和raw-loader的webpack加载器