Error: module 'AppRoutingModule' is exported recursively by the module 'AppRoutingModule'

Question

我正在构建一个 angular 应用程序，在我导入并实施 "Routing Module"

之前一切正常

错误信息

我已经经历过，我认为以下不是可能的问题：

语法错误，如多个逗号等
递归调用

路由器模块代码：

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 { }

Answer 1

您正在导出错误的模块。将 exports: [AppRoutingModule] 更改为 exports: [RouterModule]。

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes),
    ],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

Answer 2

尝试改变：

exports: [AppRoutingModule]

至：

exports: [
    RouterModule
  ]

Answer 3

导出 RouterModule 而不是 AppRoutingModule。

exports: [RouterModule]

Error: module 'AppRoutingModule' is exported recursively by the module 'AppRoutingModule'

Error: module 'AppRoutingModule' is exported recursively by the module 'AppRoutingModule'

angular-routing

angular

angular-router