[英]Angular2 Relative Paths with Webpack 2
So I'm running through the tour-of-heroes tutorial on the angular.io website except i'm using webpack instead of systemjs. 所以我正在通过angular.io网站上的巡回英雄教程,除了我使用webpack而不是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. 一切都运行得很顺利,直到我得到关于模板的部分并使用相对路径指示我需要在组件中指定“module.id”以使相对路径起作用。 Unfortunately using module.id did nothing and I was still receiving 404 errors using webpack-dev-server.
不幸的是,使用module.id什么都没做,我仍然使用webpack-dev-server接收404错误。 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. 我也尝试在templateUrls上使用“./”语法,以便webpack可以为我解决这些问题,但运行webpack-dev-server仍然遇到了404问题。
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) {} }
In order for relative path to work with webpack you have to use 为了使用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 { }
And when we use system.js we use 当我们使用system.js时,我们使用
If we decide to use SystemJS, we use __moduleName variable instead of the module.id variable 如果我们决定使用SystemJS,我们使用__moduleName变量而不是module.id变量
Please find the link this will help you better. 请找到这将有助于您更好的链接。
好的,为了使用require('。/ template.html')将模板嵌入到组件中,需要为webpack加载一个名为angular2-template-loader和raw-loader的加载器
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.