RouterModule.forRoot() llamó dos veces más

He buscado algunas de las respuestas en el otro post pero no veo dónde me equivoco aquí.

Tengo un botón que en clic va a /npo/join. Tengo 2 módulos cargados perezosos y un módulo de aplicación. Creo que estoy llamando paraChild apropiada y no accidentalmente importando AppRoutingModule en cualquier módulo cargado perezoso, así que no estoy seguro de cómo se está llamando dos veces en este botón clic.

AppRouting El módulo se ve así:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './shared/login/login.component';
import { RegisterComponent } from './shared/register/register.component';

const routes: Routes = [
  { path: '',  loadChildren: () => import('./home/home.module').then(m => m.HomeModule)},
  { path: 'npo', loadChildren: () => import('./npo/npo.module').then(m => m.NPOModule)},
  { path: 'register', component: RegisterComponent },
  { path: 'login', component: LoginComponent },
];

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

App.module.ts

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

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { AppRoutingModule } from './app-routing.module';
import { NgxSpinnerModule } from "ngx-spinner";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NPOModule } from './npo/npo.module';
import { SharedModule } from './shared/shared.module';
import { HomeModule } from './home/home.module';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
  ],
  imports: [
    HomeModule,
    SharedModule,
    NPOModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    NgxSpinnerModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  exports: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

NPORouting Módulo:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NpoDashboardComponent } from './dashboard/npo-dashboard.component';
import { NpoNewComponent } from './npo-new/npo-new.component';


const routes: Routes = [
  { path: 'join', component: NpoNewComponent },
  { path: 'dashboard/:id', component: NpoDashboardComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class NPORoutingModule { }

NPO Módulo:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NpoComponent } from './npo/npo.component';
import { NpoNewComponent } from './npo-new/npo-new.component';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { SharedModule } from '../shared/shared.module';
import { NpoDashboardComponent } from './dashboard/npo-dashboard.component';
import { NPORoutingModule } from './npo-routing.module';


@NgModule({
  declarations: [
    NpoComponent,
    NpoNewComponent,
    NpoDashboardComponent
  ],
  imports: [
    NPORoutingModule,
    SharedModule,
    CommonModule,
    ReactiveFormsModule,
    FormsModule,
    TabsModule.forRoot()
  ],
  providers: [],
  schemas: []
})
export class NPOModule { }

HomeRouting.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
]

@NgModule({
  declarations: [],
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

Módulo de casa.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeRoutingModule } from './home-routing.module';
import { HomeComponent } from './home.component';

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    HomeRoutingModule
  ],
  providers: []
})
export class HomeModule { }

Pregunta hecha hace 3 años, 4 meses, 29 días - Por webweaverx

2 Respuestas:

  • El problema que estás experimentando con el error "RouterModule.forRoot() llamó dos veces más" se debe a que estás importando el módulo de enrutamiento en más de un lugar en tu aplicación. En tu caso, estás importando el RouterModule.forRoot() en AppRoutingModule y también en NPORoutingModule.

    Para solucionar este problema, debes asegurarte de importar el RouterModule.forChild() en los módulos cargados perezosamente y reservar el RouterModule.forRoot() únicamente para el módulo raíz de la aplicación. Por lo tanto, en NPORoutingModule, debes importar el RouterModule.forChild() en lugar de RouterModule.forRoot(). Aquí tienes un ejemplo de cómo debería verse NPORoutingModule:

    typescript
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NpoDashboardComponent } from './dashboard/npo-dashboard.component';
import { NpoNewComponent } from './npo-new/npo-new.component';

const routes: Routes = [
  { path: 'join', component: NpoNewComponent },
  { path: 'dashboard/:id', component: NpoDashboardComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class NPORoutingModule { }

    Al hacer este cambio, asegúrate de revisar tus otros módulos cargados perezosamente para garantizar que estén importando correctamente el RouterModule.forChild() en lugar de RouterModule.forRoot().

    Después de realizar estos ajustes, el error "RouterModule.forRoot() llamó dos veces más" debería resolverse y tu aplicación de Angular debería funcionar correctamente.

    Respondida el Dec 18, 2020 a las 04:13 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • El error "RouterModule.forRoot() llamado dos veces más" ocurre cuando se llama a RouterModule.forRoot() más de una vez en la aplicación Angular. Esto puede provocar comportamientos inesperados y problemas de enrutamiento.

    En tu caso, parece que el error está relacionado con el módulo AppModule que importa el módulo AppRoutingModule dos veces:

    typescript
// AppModule
import { AppRoutingModule } from './app-routing.module';
...
import { AppRoutingModule } from './app-routing.module';

    La segunda importación de AppRoutingModule es innecesaria y está causando el error. Quita la segunda importación y asegúrate de que AppRoutingModule solo se importe una vez en AppModule.

    Aquí tienes el AppModule corregido:

    typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA  } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { AppRoutingModule } from './app-routing.module'; // Importado solo una vez
import { NgxSpinnerModule } from "ngx-spinner";
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NPOModule } from './npo/npo.module';
import { SharedModule } from './shared/shared.module';
import { HomeModule } from './home/home.module';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
  ],
  imports: [
    HomeModule,
    SharedModule,
    NPOModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    NgxSpinnerModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  exports: [],
  schemas: [CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

    Una vez que hayas realizado este cambio, el error debería desaparecer. Recuerda que solo debes llamar a RouterModule.forRoot() una vez en la aplicación Angular, en el módulo raíz (que suele ser AppModule).

    Respondida el Dec 18, 2020 a las 04:16 - por Gemini

    Votos positivos: 0 | Votos negativos: 0