Блог

Главная - Вопросы по программированию - component.html 404 Не найден, если компонент находится на JavaScript, а не на TypeScript [Angular]

component.html 404 Не найден, если компонент находится на JavaScript, а не на TypeScript [Angular]

#javascript #angular #angular-cli

#javascript #angular #angular-cli

Вопрос:

Задан шаблон, например. src/app/x.component.html :

 <em>Hello</em>

и компонент src/app/x.component.ts :

 import {Component} from '@angular/core'
@Component({
  selector: 'x-y',
  templateUrl: './x.component.html'
})
export class XComponent {}

компонент работает: он отображает Привет.

Теперь пишем то же самое на чистом JS, т.е. src/app/x.component.js :

 import {Component} from '@angular/core'
export class XComponent {}
XComponent.annotations = [
  new Component({
    selector: 'x-y',
    templateUrl: './x.component.html'
  })
]

приведет к ошибкам
GET /x.component.html 404 (Not Found)
Failed to load x.component.html .По какой-то причине
так @angular/cli , похоже, ищет шаблон в / .

Однако использование встроенного шаблона вместо внешнего, например:

   ...
  new Component({
    selector: 'x-y',
    template: `<em>Hello</em>`
  })
  ...

работает!

Вопрос: Что я делаю не так? Как заставить templateUrl работать и обычные компоненты JavaScript?

Я использую Angular 7.2.13 и Angular CLI 7.3.8

Комментарии:

1. Я скопировал ваш код в проект stackblitz, и он работает. Но я, возможно, не до конца понимаю, что вы делаете… Просто убедитесь, что все пути указаны правильно в каждом файле, а также в файле app.module.ts… Вот ссылка: stackblitz.com/edit/angular-hcatca

2. @MarkB Действительно, на StackBlitz это, кажется, работает. Я переименовал ваш x.component.ts в .js , чтобы он соответствовал моей настройке, но он все еще работает. Но StackBlitz должен делать что-то особенное, например, аннотации работают в .js файлах, тогда как в проекте по умолчанию ng new они этого не делают. Я просто пытаюсь использовать Angular с JavaScript. Пути правильные, просто @angular/cli кажется, что шаблон ищется в корне, когда компонент находится на JS. Приятно знать, что StackBlitz каким-то образом обошел это, или, может быть, в старой версии @angular/cli , которую они используют, не было этой проблемы?