如何解决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
解决方法
我没有看到与您提到的完全相同的错误,但我看到了与缺少导入有关的其他问题。
由于您为 Home
和 Gardening
设置了单独的模块,因此您还需要将它们导入到您的 app.module.ts
文件中:
@NgModule({
declarations: [
AppComponent
],imports: [
BrowserModule,AppRoutingModule,GardeningModule,// <------
HomeModule // <------
],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }
经过这两个小的更改后,您的代码可以正常工作。 (工作StackBlitz)
,您的问题是因为应用模块不知道您的园艺模块。
所以你得到了当前的 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,GardeningModule // <=============
],bootstrap: [AppComponent]
})
export class AppModule { }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。