'router-outlet' не является известным элементом в angular 6

Я получаю следующую ошибку при новой установке angular6 с использованием angular-cli.

Uncaught Error: Ошибки синтаксического анализа шаблона: «router-outlet» не является известным элементом: 1. Если «router-outlet» является компонентом Angular, убедитесь, что он является частью этого модуля.

Я следовал этому руководству: https://medium.com/@meemo_86/good-article-beeman-490eaf1399a

А затем я продолжил комментарий к этой статье, в котором говорится, что нужно использовать <router-outlet></router-outlet> вместо <ng-content></ng-content>.

Я делаю эти исправления, а затем читаю https://angular.io/tutorial/toh-pt5, и делать то, что там указано.

Итак, теперь у меня есть AppRoutingModule, я импортирую этот модуль в app.module.ts, где я также определяю маршруты и добавляю RouterModule.forRoot(appRoutes) к импорту.

Но я не могу заставить эту ошибку уйти. Что я делаю не так? Когда я добавляю <router-outler></router-outlet> в свой layout.component.htm, приложение ломается. Я также искал эту тему здесь и пробовал несколько изменений, но ничего не работает.

Полный исходный код здесь:

https://github.com/ekstremedia/angular6


angular router-outlet
person Terje Nesthus    schedule 26.07.2018    source источник
comment
В app.module.ts файл import { RouterModule } from '@angular/router'; и добавить RouterModule.forRoot(your_routes) в импорт.   -  person hrdkisback    schedule 26.07.2018
comment
AppRoutingModule ничего не делает. Вы уже импортировали RoutingModule в свой AppModule. На самом деле вы импортируете его дважды. Попробуйте удалить AppRoutingModule из вашего AppModule и сделайте новую компиляцию (ng serve)   -  person SplitterAlex    schedule 26.07.2018
comment
@hrdkisback Вот что я сделал здесь: github. com/ekstremedia/angular6/blob/master/src/app/   -  person Terje Nesthus    schedule 26.07.2018
comment
Вы не импортировали RouterModule в UIModule   -  person SplitterAlex    schedule 26.07.2018
comment
@SplitterAlex, кажется, исправил это. Благодарю вас!   -  person Terje Nesthus    schedule 26.07.2018

Ответы (4)


arrow_upward
24
arrow_downward

Я вижу, что вам не хватает RouterModule внутри импорта UIModule.

@NgModule({
  imports: [
    CommonModule,
    RouterModule
  ],
  declarations: [LayoutComponent, HeaderComponent, FooterComponent],
  exports: [LayoutComponent]
})
export class UiModule { }
person Sajeetharan    schedule 26.07.2018
comment
Это правильно и является рабочим решением. Я отмечаю это как правильный ответ, хотя SplitterAlex прокомментировал его первым, но я не могу отметить его ответ как правильный. В любом случае, спасибо, Саджитаран. - person Terje Nesthus; 26.07.2018
comment
о, извините, я тогда проверял ваш код :) рад, что SplitterAlex помог :) - person Sajeetharan; 26.07.2018

arrow_upward
5
arrow_downward

Вы получаете сообщение об ошибке, потому что используете компонент router-outlet в UIModule и не импортировали RouterModule внутри UIModule.

person SplitterAlex    schedule 26.07.2018

arrow_upward
2
arrow_downward

Я тоже столкнулся с той же проблемой. И я уже импортировал RouterModule внутрь UIModule, все равно не работает. Но после того, как я перезапустил приложение, оно заработало, ошибок больше не было.

Итак, что вам нужно сделать, это: 1. Импортировать RouterModule внутрь UIModule; 2. Перезапустите приложение

person 李岳芸    schedule 29.05.2019
comment
У меня тоже сработало. - person Mohsen; 31.03.2020

arrow_upward
0
arrow_downward

В папке app.module.ts я импортировал следующее

import { AppRoutingModule } from './app-routing.module';

также не забудьте добавить его в @NgModule

person user3399358    schedule 07.08.2019