web-dev-qa-db-fra.com

RouterModule.forRoot appelé deux fois erreur

J'essaie d'implémenter le chargement paresseux dans mon application, mais je rencontre un problème qui me cause le message d'erreur suivant:

Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.

J'ai donc mes principaux app-routing.module.ts et aussi app-module.ts qui ressemble à ce qui suit:

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

Cela fonctionne bien et l'application se charge correctement. Le problème est que, dans le SharedModule, il contient des composants permettant de rediriger l'utilisateur à l'aide de routerLink vers une nouvelle page. 

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

Comme vous pouvez le constater, je dois importer le RouterModule. Si je supprime le RouterModule, l'application se chargera mais ne sera pas réorientée. Si je conserve le RouterModule, l'application provoquera l'erreur en haut de la question.

Quelqu'un pourrait-il m'aider à ce sujet?.

angularangular-routing
4
Ben Clarke

J'ai eu cette erreur parce que j'ai en quelque sorte accidentellement importé la racine AppModule dans mon module chargé paresseux. La racine AppRoutingModule a alors été appelée une nouvelle fois lorsque le module chargé paresseux a été chargé. Ainsi, RouterModule.forRoot a été appelé deux fois. 

Si vous êtes certain de ne pas appeler RouterModule.forRoot deux fois, cela peut être la cause du problème. Vérifiez que vous n'importez aucun module dans votre module chargé paresseux qui appelle directement RouterModule.forRoot ou importez un module qui appelle RouterModule.forRoot.

11
inorganik

Avez-vous des itinéraires déclarés dans vos modules distincts chargés paresseusement, OverviewModule, SearchModule, PolicyModule, ClaimModule et SettingsModule? Si oui, dans le @NgModule de chacun avez-vous un RouterModule.forRoot () quelque part? Ils devraient être RouterModule.forChild (...). Il semble que cela pourrait être le problème.

3
rrd

utilisez RouterModule.forChild (routes) dans le module enfant. comme ce fichier ../../application/overview/overview.module a plus de modules enfants que d'utiliser RouterModule.forChild (yourarray) au lieu de RouterModule.forRoot (yourarray) 

1
Bhumika Barad

Je lutte avec ça depuis un moment. Enfin trouvé le problème.

J'utilise le chargement paresseux. Et même si je n'avais utilisé .forRoot qu'à un seul endroit de l'application, l'erreur a suggéré que je l'utilisais deux fois. 

Il s'est avéré que j'importais le AppRoutingModule à partir du fichier app.routing.ts dans l'un des modules de fonctionnalité chargé paresseux. Et je l'avais déjà fait plus tôt, car il n'arrêtait pas de dire qu'il ne reconnaissait pas routerLink, que j'avais utilisé dans l'un des composants de ce module de fonctionnalités. 

La solution consistait à remplacer l'importation AppRoutingModule dans le module de fonctions par une importation de RouterModule à partir de '@ angular/router'. Maintenant tout fonctionne.

PS - quand je parle de module de fonctionnalité, je veux dire de sous-module que je suis en train de charger paresseux.

1
RawCode

Je faisais également face au même tout en utilisant le chargement paresseux. Enfin, j'ai trouvé une solution.

J'ai supprimé "routingModule" et "routerModule" de sharedModule et en utilisant routerModule uniquement dans le fichier routing.module.ts correspondant. 

0
sharad jain

Vous n’importez pas RouterModule dans votre SharedModule. Vous importez RoutingModule ici. Et ce module importe RouterModule avec forRoot qui s’appelle une deuxième fois lors d’un chargement paresseux. Cela provoque l'erreur.

Au lieu de cela, vous devriez importer RouterModule directement si vous avez besoin de redirections.

shared.module.ts 

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