Angular2 Relative Paths with Webpack 2

Question

So I'm running through the tour-of-heroes tutorial on the angular.io website except i'm using webpack instead of systemjs.

Everything was running smoothly until I got to the part about templates and using relative paths indicating that I need to specify "module.id" in the component for relative paths to work. Unfortunately using module.id did nothing and I was still receiving 404 errors using webpack-dev-server. The project was still trying to load the templates from the root.

I also tried using the "./" syntax on the templateUrls so that webpack could resolve these issues for me, but running webpack-dev-server still ran into those 404 issues.

Is anyone else having these problems?

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

In order for relative path to work with webpack you have to use

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



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



export class HeaderComponent implements OnInit { }

And when we use system.js we use

If we decide to use SystemJS, we use __moduleName variable instead of the module.id variable

Please find the link this will help you better.

Help link

Answer 2

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