templateUrl 和 styleUrls 的 Angular2 相对路径？

Question

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

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

所以这里有人帮我告诉我如何为我的组件 angualr2 设置自定义 moduleId？

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

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

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

实际编码（工作） -

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

修改后的编码（由于路径不正确而无法正常工作） -

@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/

Answer 1

通过在运行时更改导入文件的路径（从src 到dist）解决了我的问题，如下所示：-

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

这样你可以改变模块ID的路径目录。

感谢@Nicolai 提供此awesome comment

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

Answer 2

我也有一些关于 TemplateUrl 路径有效和无效的问题。我在测试中发现以下情况是正确的：

templateUrl: '文件夹名/文件名' 不起作用

templateUrl: '/文件夹名/文件名' 不起作用

templateUrl: './文件夹名/文件名' DID 工作

所以你可以试试。