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

Добавлен плагин SystemJS (systemjs-angular-loader.js) в конфигурацию SystemJS.Этот плагин динамически преобразует «относительные компоненты» пути в templateUrl и styleUrls в «абсолютные пути» для вас.

Я настоятельно рекомендую вам писать только относительные компоненты компоненты.Вам больше не нужно писать @Component ({moduleId: module.id}), как и вам.

угловой быстрый запуск

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

systemjs.config

angular-cli

Для выравнивания с поведением @ angular / core все templateUrl и styleUrls теперь обрабатываются как относительные - разработчики должны использоватьФорма ./foo.html во всех случаях.

См. также

Относительные URL-адреса шаблонов и стилей с использованием системной js без moduleid в угловых

ПРЕДЫДУЩАЯ ВЕРСИЯ

По умолчанию вы должны указать полный путь к корню приложения .Это абсолютно относительно корня приложения .

Это может быть:

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

Компонент относительных путей в угловых