Angular 11 - RouterModule - 'router-outlet' - неизвестный элемент

Я новичок в Angular, сейчас работаю над маршрутизацией. У меня возникла проблема с использованием дополнительных маршрутов в компоненте. RouterLink не отображается как ссылка в компоненте. Если я использую роутер-розетку, приложение вылетает.

Используя роутер-розетку, я получил следующее сообщение об ошибке:

    src/app/gardening/gardening/gardening.component.html:5:1 - error NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

5 <router-outlet></router-outlet>
  ~~~~~~~~~~~~~~~

  src/app/gardening/gardening/gardening.component.ts:5:16
    5   templateUrl: './gardening.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component GardeningComponent.

Я погуглил сообщение об ошибке, решением всегда был отсутствующий импорт RouterModule в модуль. Я уже импортировал RouterModule.

Это мой module.ts

@NgModule({
declarations: [GardeningComponent, DemogardenComponent],
imports: [
CommonModule, RouterModule
],
exports:[GardeningComponent, DemogardenComponent]

})
export class GardeningModule { }

Это мой app.module.ts

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Что не так, что упускают?

Если хотите, можете также проверить код в моем репозитории на github: SimpleRouting


angular routes router-outlet
person Christoph1972    schedule 20.03.2021    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я не вижу тех же ошибок, о которых вы упомянули, но вижу другие проблемы, связанные с отсутствием импорта.

Поскольку у вас есть отдельные модули для Home и Gardening, вам также необходимо импортировать их в свой app.module.ts файл:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,   
    GardeningModule,    // <------
    HomeModule          // <------
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ваш код отлично работает после этих двух небольших изменений. (рабочий StackBlitz)

person BizzyBob    schedule 20.03.2021
comment
Боже мой, полностью сосредоточился на стороне фальшивого строительства! Все работает как положено. Большое спасибо за быструю поддержку, вы спасли мне день. :-) Хороших выходных! Кристоф - person Christoph1972; 20.03.2021

arrow_upward
1
arrow_downward

Ваша проблема в том, что модуль приложения не знает ваш модуль Garderning. Итак, вы получаете текущую router-outlet ошибку.

Вот решение - просто обновите файл app.module.ts следующим образом:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GardeningModule } from './gardening/gardening.module'; // <=============

@NgModule({
  declarations: [
     AppComponent
  ],
  imports: [
     BrowserModule,
     AppRoutingModule,
     GardeningModule   // <=============
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
person ClusterH    schedule 20.03.2021