templateUrl 和 styleUrls 的 Angular2 相对路径? [英] Angular2 relative paths for templateUrl and styleUrls?

问题描述

在搜索时我发现了一个名为 moduleId 的东西来设置模板和 CSS 文件的相对路径，但我不知道如何在我们的组件中使用 moduleIdangular2 的?

While searching I found something named as moduleId to set the relative paths of template and CSS files, but I don't know exactly how to use moduleId in our components of angular2?

实际上，问题出在我的文件夹结构中.我正在从 dist 文件夹加载我的所有 .js 文件，而我的视图(.html 文件)在 src文件夹.所以当我像这样使用 moduleId: module.id 时，angular 从 dist 文件夹中获取路径，而不是 src 文件夹.

Actually, the problem is in my folder structure.I am loading my all .js files from dist folder whereas my view(.html files) are in the src folder. So when I use moduleId: module.id like this angular took the path from dist folder, instead of src folder.

所以这里的任何人都可以帮助我告诉如何为我的组件 angualr2 设置自定义 moduleId?

So anybody here helps me tell that How to set custom moduleId for my component angualr2?

我的文件夹结构是这样的.

My folder structure like this.

                                  App
                                  /
                                 /  
             (.js + .map files)Dist    Src(.ts + .html + .css files)

• 文件夹 Dist 包含所有 .map 和 .js 文件
• 文件夹 src 包含所有 .ts、.HTML 和 .css 文件.

实际编码(工作) -

Actual coding (working) -

@Component({
    selector: 'class-timing',
    templateUrl: 'src/components/TimeTable/class-timing/class-timing.html',
    styleUrls: ['src/app.css']
})

修改后的编码(由于路径不正确而无法工作)-

Modified coding (Not working due to incorrect path) -

@Component({
    selector: 'class-timing',
    templateUrl: 'class-timing.html',
    moduleId: module.id,
    styleUrls: ['src/app.css']
})

参考本教程http://schwarty.com/2015/12/22/angular2-relative-paths-for-templateurl-and-styleurls/

推荐答案

通过在运行时更改导入文件的路径(从 src 到 dist)解决了我的问题像这样:-

Resolved my Problem by changing path (from src to dist)of importing file at the run time like this :-

moduleId: module.id.replace("/dist/", "/src/")

这样做可以更改模块 ID 的路径目录.

By doing so you can change path directory of module ID.

感谢@Nicolai 的这个很棒的评论

thanks to @Nicolai for this awesome comment

PS:- 作为答案发布可能对某人有所帮助

PS:- Posting as answer may help someone

这篇关于templateUrl 和 styleUrls 的 Angular2 相对路径?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！