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

person crazy4xfolder_openAngular2access_time 4月Apr 14,2017

在跟随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

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

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">