Angular 11 - 路由器模块 - “路由器插座”不是已知元素

Question

我是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.

我用谷歌搜索了错误消息，解决方案始终是模块中缺少路由器模块的导入。我已经导入了路由器模块。

这是我的模块。ts

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

})
export class GardeningModule { }

这是我的应用程序。

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

怎么了，漏了什么？

如果您愿意，您也可以在github上查看我的知识库中的代码:SimpleRouting

Answer 1

你的问题是因为应用程序模块不知道你的Garderning模块。因此，您得到了当前路由器出口错误。

解决方案如下——只需更新< code>app.module.ts文件，如下所示:

js prettyprint-override">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 { }

Answer 2

我没有看到你提到的完全相同的错误，但我看到了与缺失导入有关的其他问题。

由于您有单独的家庭和园艺模块，因此还需要将它们导入到您的 app.module.ts 文件中：

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

在这两个小更改之后，您的代码可以正常工作。（工作StackBlitz）