html 找不到模板文件 Angular 5

Question

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

文件结构如下： 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

Added SystemJS plugin (systemjs-angular-loader.js) to SystemJS configuration. This plugin dynamically converts "component-relative" paths in templateUrl and styleUrls to "absolute paths" for you.

I strongly encourage you to only write component-relative paths. You no longer need to write @Component({ moduleId: module.id }), nor should you.

angular 快速入门

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

systemjs.config

angular-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 {}

如果您想指定相对于组件 class 文件的模板和样式 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

html 找不到模板文件 Angular 5

html template file isn't found Angular 5

systemjs

angular