angular - 错误:模块“AppRoutingModule”由模块“AppRoutingModule”递归导出
问题描述
我正在构建一个角度应用程序,在我导入并实现“路由模块”之前一切正常
错误信息
我已经经历了,不认为以下是可能的问题:
- 语法错误,如多个逗号等
- 递归调用
路由器模块代码:
import { NgModule } from '@angular/core';
import { Routes , RouterModule } from '@angular/router';
import { RecipesComponent } from './recipes/recipes.component';
import { ShoppingListComponent } from './shopping-list/shopping-list.component';
const appRoutes: Routes = [
{path: 'recipes', component: RecipesComponent},
{path: 'shopping-list', component: ShoppingListComponent},
{ path: '', redirectTo: 'recipes', pathMatch: 'full'},
{ path: '**', redirectTo: '/not-found'},
]
@NgModule({
imports: [
RouterModule.forRoot(appRoutes),
],
exports: [AppRoutingModule]
})
export class AppRoutingModule{
}
根组件的代码:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { RecipesComponent } from './recipes/recipes.component';
import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
import { RecipeItemComponent } from './recipes/recipe-list/recipe-item/recipe-item.component';
import { ShoppingListComponent } from './shopping-list/shopping-list.component';
import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-edit.component';
import { DropdownDirective } from './shared/dropdown.directive';
import { ShoppingListService } from './shopping-list/shopping-list.service';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
RecipesComponent,
RecipeListComponent,
RecipeDetailComponent,
RecipeItemComponent,
ShoppingListComponent,
ShoppingEditComponent,
DropdownDirective
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule
],
providers: [ShoppingListService],
bootstrap: [AppComponent]
})
export class AppModule { }
解决方案
您正在导出错误的模块。更改exports: [AppRoutingModule]
为exports: [RouterModule]
。
@NgModule({
imports: [
RouterModule.forRoot(appRoutes),
],
exports: [RouterModule]
})
export class AppRoutingModule {
}
推荐阅读
- javascript - 音乐机器人 discord.js 问题
- java - Java 8 资源包找不到立即创建的文件
- ios - 在 SwiftUI 导航栏中嵌入视图作为标题
- sql - Varchar 类型等于数字
- css - 在反应组件中重置样式
- windows - 无法使用安装了启用 Hyper-V 和 WSL2 的 VirtualBox 启动 Windows 10 来宾
- reactjs - VS2019 中的自动完成 JSX html 标签
- python - 使用自定义方法保存/加载 Keras 模型
- excel - 将同一列从多个工作表复制到新工作表
- android - Flutter 移动 UI 元素