找不到HTML模板文件Angular 5

Question

我有systemjs.config.js文件的Angular 5应用程序。

文件结构如下：app文件夹包含main.ts, app.compoment.ts, app.component.html, app.module.ts, app-routing.module.ts文件。

systemjs.config.js：

paths: {
    'npm:': "libs/"
},
map: {
    app: "app",
    ...
},
packages: {
    app: {
        main: "./main.js",
        defaultExtension: "js"
    },
    ...
}

当我把路径作为亲戚：

templateUrl: './app.component.html'

我找不到错误{domain}/app.component.html。 {domain} = http://localhost:1234

但如果我把绝对路径：

templateUrl: './app/app.component.html'

它工作正常。

我该怎么办才能让相对路径发挥作用？

Answer 1

将SystemJS插件（systemjs-angular-loader.js）添加到SystemJS配置中。此插件动态地将templateUrl和styleUrls中的“组件相对”路径转换为“绝对路径”。

我强烈建议您只编写组件相对路径。您不再需要编写@Component（{moduleId：module.id}），也不应该。

角快速启动

meta: {
  './*.js': {
    loader: 'systemjs-angular-loader.js'
  }
}

systemjs.config

角-CLI

为了与@ angular / core行为保持一致，所有templateUrl和styleUrls现在都被视为相对的 - 开发人员应该在所有情况下使用./foo.html表单。

也可以看看

Relative template and style urls using system js without moduleid in angular

以前的版本

默认情况下，您应指定返回应用程序根目录的完整路径。它对应用程序根来说是绝对的。

它可能是：

@Component({
   templateUrl: 'app/app.template.html' // or src
})
export class AppComponent {}

如果要指定相对于其组件类文件的模板和样式URL，则应将moduleId属性设置为组件的装饰器：

@Component({
  moduleId: module.id
  templateUrl: './app.template.html'
})
export class AppComponent {}

如果您使用SystemJS，那么它应该是__moduleName变量而不是module.id变量：

@Component({
  moduleId: __moduleName,
  templateUrl: './app.template.html'
})
export class AppComponent {}

Component relative paths in angular