angular2 官方教程中 关于templateUrl和styleUrls 引用文件路径的问题

在跟随angular官方教程练习的过程中发现一个问题,关于@Component装饰器函数中templateUrl和styleUrls路径的问题,具体表现为

 

在教程中templateUrl和styleUrls中引用的模板路径都是类似

    templateUrl: './heroes.component.html',
    styleUrls: ['./heroes.component.css']

但是实际上如果定义了moduleId,就会出现404的问题,找不到文件

@component({
    moduleId: module.id
    ...
    ...
})

这时候只能把文件路径改成如下,才能正确加载

    templateUrl: 'heroes.component.html',
    styleUrls: ['heroes.component.css']

疑问

1.这里moduleId作用是什么
2.为什么会影响到模板和样式文件的路径获取
3.正确的写法是什么

 


 

 

 

从官方教程的代码中可以看到模块加载器是systemjs

首先参考官方的文档

-组件样式:https://angular.cn/docs/ts/latest/cookbook/component-relative-paths.html

-相对于组件的路径:https://angular.cn/docs/ts/latest/cookbook/component-relative-paths.html

 

从上面两个文档中,我们知道的是Angular不可能知道在运行期这些文件的正确位置,Angular能够确定的唯一的位置是首页index.html的URL,也就是应用的根目录。 所以,默认情况下,它只能计算相对于index.html的模板和样式表路径。 这就是为什么我们以前用app/基准路径的前缀来写文件的URL。Angular应用可能被用多种方式加载:独立文件、SystemJS包、CommonJS包等等。 用来生成模块的格式可以是任何格式。 甚至可能完全没有写成模块化代码。

 

但是这里并没有详细解释为什么systemjs打包运行的情况下用moduleId出现的问题

而后另外一篇文章才有详细说明

https://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html

里面介绍了几种不同的打包模块下的写法