javascript - templateUrl 中的相对 url 与 Angular 4 和 sails 不工作

Question

在我的 app.component.ts 中，我必须将 templateUrl 定义为:

import {Component} from '@angular/core';
@Component({
  selector: 'root-component',
  templateUrl: './app/app.component.html'
})
export class AppComponent { }

如果我将其简单地定义为 ./app.component.html ，它会在控制台中给出此错误:

所以基本上这意味着 app.component.html 是来自 http://localhost:1337/app/app.component.html 的 accebile因为我的 sailsroot/asset 文件夹结构是这样的:

以这种方式编写 templateUrl 会非常不方便，因为例如在 asset/app/sidebar 文件夹内的 sidebar 组件中，templateUrl会写成: ./app/sidebar/sidebar.component.html

我希望 templateUrl 中的相对 URL 能够正确解析，但我不知道该怎么做。

如果有帮助，我关注this教程。 (我所有的 tsconfig.json、package.json 等都与此处给出的相同)。

Answer 1

您可以尝试将 moduleId 添加到装饰器中，如下所示:

@Component({
  moduleId: module.id,
  selector: 'root-component',
  templateUrl: './app/app.component.html'
})

但是，根据 angular.io 更改日志，您应该使用相对路径，而不必使用 moduleId，所以我很惊讶您的代码不起作用。

All mention of moduleId removed. "Component relative paths" cookbook deleted (2017-03-13)

We added a new SystemJS plugin (systemjs-angular-loader.js) to our recommended SystemJS configuration. This plugin dynamically converts "component-relative" paths in templateUrl and styleUrls to "absolute paths" for you.

We strongly encourage you to only write component-relative paths. That is the only form of URL discussed in these docs. You no longer need to write @Component({ moduleId: module.id }), nor should you.

来源:https://angular.io/docs/ts/latest/guide/change-log.html