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

 

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

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

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

疑问

 


 

 

从官方教程的代码中可以看到模块加载器是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

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

 

 

Categories: Angular2

发表评论

Related Posts

Angular2

angular-cli lazy loading 懒加载

安装angular-cli [crayon-59c3458b5e7e1 Read more…

Angular2

Angular2:5分钟快速入门 (for javascript)

让我们从零开始使用JavaScript建立一个超简单的Angular2 Read more…