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插件（systemjs-angular-loader.js）   组态。该插件可动态转换“相对于组件”   templateUrl和styleUrls中的路径为您提供“绝对路径”。

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

角度快速入门

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

systemjs.config

angular-cli

为了与@ angular / core行为保持一致，现在将所有templateUrl和styleUrl都视为相对对象-开发人员在所有情况下均应使用./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

找不到Angular 5的html模板文件

1 个答案: