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

在跟随 angular 官方教程练习的过程中发现一个问题，关于@Component[装饰器](https://www.angular.cn/docs/ts/latest/glossary.html#decorator “”decorator” explained”)函数中 templateUrl 和 styleUrls 路径的问题，具体表现为

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

    <span class="hljs-attribute">templateUrl</span>: <span class="hljs-string">'./heroes.component.html',</span>
    <span class="hljs-attribute">styleUrls</span>: <span class="hljs-string">['./heroes.component.css']</span>

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

<span class="hljs-variable">@component</span>({
    <span class="hljs-symbol">moduleId:</span> <span class="hljs-class"><span class="hljs-keyword">module</span>.<span class="hljs-title">id</span></span>
    ...
    ...
})

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

    <span class="hljs-attribute">templateUrl</span>: <span class="hljs-string">'heroes.component.html',</span>
    <span class="hljs-attribute">styleUrls</span>: <span class="hljs-string">['heroes.component.css']</span>

疑问

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

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