web-dev-qa-db-ja.com

RouterModule.forRootが2回呼び出されました

アプリケーションに遅延読み込みを実装しようとしていますが、エラーメッセージが表示されるという問題が発生しているようです。

エラー：RouterModule.forRoot（）が2回呼び出されました。遅延ロードされたモジュールは、代わりにRouterModule.forChild（）を使用する必要があります。

だから私は私のメインapp-routing.module.tsとapp-module.tsも持っています：

app-module.ts

// External Dependencies
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// Internal Dependencies
import { MaterialModule } from '../app/configuration/material/material.module';
import { SharedModule } from '../app/application/shared/shared.module';
import { RoutingModule } from '../app/configuration/routing/routing.module';
import { SettingsModule } from '../app/application/settings/settings.module';

import { AppComponent } from './app.component';

import { SearchService } from './application/shared/services/search.service';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    SharedModule,
    RoutingModule,
    MaterialModule,
    HttpClientModule,
    FormsModule,
  ],
  providers: [ ],
  bootstrap: [AppComponent]
})

export class AppModule { }

app-routing.ts

// External Dependencies
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { HttpModule } from '@angular/http';

const appRoutes: Routes = [
  { path: '', redirectTo: 'overview', pathMatch: 'full' },
  { path: 'overview', loadChildren: '../../application/overview/overview.module#OverviewModule' },
  { path: 'search', loadChildren: '../../application/search/search.module#SearchModule' },  
  { path: 'policy/:id', loadChildren: '../../application/policy/policy.module#PolicyModule' },
  { path: 'claim/:id', loadChildren: '../../application/claim/claim.module#ClaimModule' },
  { path: 'settings', loadChildren: '../../application/settings/settings.module#SettingsModule' }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ],
  declarations: []
})

export class RoutingModule { }

これは正常に動作し、アプリケーションは正しく読み込まれます。ここからの問題は、SharedModuleに、routerLinkを使用してユーザーを新しいページにリダイレクトするコンポーネントが含まれていることです。

shared.module.ts

// External Dependencies
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CalendarModule } from 'primeng/calendar';
import { AgmCoreModule } from '@agm/core';
import { FroalaEditorModule, FroalaViewModule } from 'angular-froala-wysiwyg';
import { PdfViewerModule } from 'ng2-pdf-viewer';

// Internal Dependencies
import { MaterialModule } from '../../configuration/material/material.module';
import { RoutingModule } from '../../configuration/routing/routing.module';

import { NavbarTopComponent } from '../../application/shared/components/navbar-top/navbar-top.component';
import { NavbarSideComponent } from './components/navbar-side/navbar-side.component';
import { TemplateCardWComponent } from './components/template-card-w/template-card-w.component';
import { FilterPipe } from './pipes/filter.pipe';
import { StandardTableComponent } from './components/standard-table/standard-table.component';
import { OrderPipe } from '../shared/pipes/order.pipe';
import { ActionComponent } from './components/action/action.component';
import { GoogleMapComponent } from './components/google-map/google-map.component';
import { HtmlEditorComponent } from './components/html-editor/html-editor.component';
import { PdfViewerComponent } from './components/pdf-viewer/pdf-viewer.component';
import { KeyBindingPipe } from './pipes/key-binding.pipe';
import { StandardEditTableComponent } from './components/standard-edit-table/standard-edit-table.component';

@NgModule({
  imports: [
    CommonModule,
    MaterialModule,
    RoutingModule,
    FormsModule,
    CalendarModule,
    AgmCoreModule,
    FroalaEditorModule,
    FroalaViewModule,
    PdfViewerModule
  ],
  declarations: [
    NavbarTopComponent,
    NavbarSideComponent,
    TemplateCardWComponent,
    FilterPipe,
    StandardTableComponent,
    OrderPipe,
    ActionComponent,
    GoogleMapComponent,
    HtmlEditorComponent,
    PdfViewerComponent,
    KeyBindingPipe,
    StandardEditTableComponent
  ],
  exports: [
  ]
})

export class SharedModule { }

ご覧のとおり、RouterModuleをインポートする必要があります。 RouterModuleを削除すると、アプリケーションは読み込まれますが、リダイレクトされません。 RouterModuleを保持している場合、アプリケーションは質問の最初にエラーを引き起こします。

誰かが私を助けてくれませんか？.

angularangular-routing
17
Ben Clarke

このエラーが発生したのは、遅延ロードされたモジュールにルートAppModuleを誤ってインポートしたためです。これにより、遅延ロードされたモジュールがロードされたときにルートAppRoutingModuleが再度呼び出され、RouterModule.forRootが2回呼び出されました。

RouterModule.forRootを2回呼び出していないことが確かな場合は、これが問題の原因である可能性があります。遅延読み込みされたモジュールで、RouterModule.forRootを直接呼び出すモジュール、またはRouterModule.forRootを呼び出すモジュールをインポートしていないことを確認してください。

56
inorganik

私はしばらくこれに苦労しています。最後に問題が見つかりました。

遅延読み込みを使用しています。また、アプリの1か所でのみ.forRootを使用したにもかかわらず、エラーにより、2回使用していることが示唆されました。

レイジーロードされている機能モジュールの1つにあるapp.routing.tsファイルからAppRoutingModuleをインポートしていることがわかりました。これは、その機能モジュールのコンポーネントの1つで使用したrouterLinkを認識しないと言い続けたため、以前に行っていました。

解決策は、機能モジュールのAppRoutingModuleインポートを「@ angular/router」からのRouterModuleのインポートに置き換えることでした。これですべてが機能します。

PS-機能モジュールとは、遅延ロードしているサブモジュールを意味します。

12
RawCode

個別に遅延読み込みされたモジュール、OverviewModule、SearchModule、PolicyModule、ClaimModule、SettingsModuleで、ルートが宣言されていますか？もしそうなら、それぞれの@NgModuleのどこかにRouterModule.forRoot（）がありますか？これらはRouterModule.forChild（...）である必要があります。それが問題であるように思えます。

4
rrd

子モジュール内でRouterModule.forChild(routes)を使用します。このファイルのように_../../application/overview/overview.module_。

さらに子モジュールがある場合は、RouterModule.forChild(yourarray)の代わりにRouterModule.forRoot(yourarray)を使用します

1
Bhumika Barad

私が遅延ロードした子モジュール内でRouterModule.forRoot(myRoutes)を使用しているため、この問題に直面しました。それはあったはずです

@NgModule({
  imports: [ RouterModule.forChild(myRoutes) ], // changed forRoot with forChild
  exports: [ RouterModule ]
})
1
Kirubel

レイジーローディングを使用している間も私は同じことに直面していました。最後に私はいくつかの解決策を見つけました。

SharedModuleから「routingModule」と「routerModule」を削除し、それぞれのrouting.module.tsファイルでのみrouterModuleを使用しています。

0
sharad jain

私の場合の問題は、機能モジュールでルート配列を宣言するときに型を追加するのを忘れていたことでした。forRootが2回呼び出されず、AppRoutingModuleが複数回インポートされないことを確認した場合、次のような基本的な間違いを確認できます。私が作ったもの。

それは次のように定義されました：

const feature_routes = [.....];

の代わりに：

const feature_routes : Routes = [.....];
0
Sade Le

RouterModuleをSharedModuleにインポートしません。そこにRoutingModuleをインポートします。そして、このモジュールはRouterModuleをforRootとともにインポートします。これは、遅延ロード時に2回目に呼び出されます。これによりエラーが発生します。

リダイレクトが必要な場合は、代わりにRouterModuleを直接インポートする必要があります。

shared.module.ts

@NgModule({
  imports: [
  CommonModule,
  MaterialModule,
  RouterModule, /* NOT RoutingModule */
  FormsModule,
  CalendarModule,
  AgmCoreModule,
  FroalaEditorModule,
  FroalaViewModule,
  PdfViewerModule
],
0
Episodex

私も問題に直面しており、将来の参加者にとって、これが私の解決策です。

インポートしないAppRoutingModule oerモジュール、インポートRoutingModule

解決されます。例を示します。

import { RouterModule } from '@angular/router';

そしてimports配列では

  @NgModule({

 declaration: [], // your contents
 imports: [
  RouterModule,
  // Other modules
 ]
  })
0
Abhishek Soni

使用する代わりに

  imports: [
    CommonModule,
    RouterModule.forRoot(appRoutes)
     ],

使用する

 imports: [
    CommonModule,
    RouterModule.forChild(appRoutes)
     ],
0
Makuza Mugabo verite