What is the correct way of routing different modules in Angular?

Question

I have a project with three modules: auth, libros and prestamo, every module has different components and his respective routing and I have a general routing module for al the project, the code in my "auth-routing-module" is the next:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { AuthComponent } from '../auth/auth.component';
import { LoginComponent } from '../login/login.component';
import { ForgotPasswordComponent } from '../forgot-password/forgot-password.component';
import { SignUpComponent } from '../sign-up/sign-up.component';

const authRoutes: Routes = [
  { path: 'auth', component: AuthComponent},
  { path: 'login', component: LoginComponent},
  { path: 'forgotPassword', component: ForgotPasswordComponent},
  { path: 'signUp', component: SignUpComponent}
];

@NgModule({
  declarations: [],
  imports: [
    CommonModule, RouterModule.forRoot(authRoutes)
  ], 
  exports: [RouterModule]
})
export class AuthRoutingModule { }

I have a similar code in the other modules, and the code in my "routing-module" is the next:

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

const appRoutes: Routes = [
  {path: 'auth', loadChildren:() => import('../auth/auth.module').then(mod => mod.AuthModule)},
  {path: 'libros', loadChildren:() => import('../libros/libros.module').then(mod => mod.LibrosModule)},
  {path: 'prestamos', loadChildren:() => import('../prestamos/prestamos.module').then(mod => mod.PrestamosModule)}
];


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

Finally this is the code of my "app-module":

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing/app-routing.module';

import { AppComponent } from './app.component';
import { AuthModule } from './auth/auth.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, AuthModule, AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now, when I check the navigation with the auth components the navigation works, but when I try to use a component of other module I get the next error:

ERROR Error: Uncaught (in promise): Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.
Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.
    at Object.provideForRootGuard [as useFactory] (router.js:5749)
    at Object.factory (core.js:11468)
    at R3Injector.hydrate (core.js:11385)
    at R3Injector.get (core.js:11205)
    at injectInjectorOnly (core.js:4728)
    at Module.ɵɵinject (core.js:4732)
    at Object.RouterModule_Factory [as factory] (router.js:5714)
    at R3Injector.hydrate (core.js:11385)
    at R3Injector.get (core.js:11205)
    at core.js:11242
    at resolvePromise (zone-evergreen.js:1213)
    at resolvePromise (zone-evergreen.js:1167)
    at zone-evergreen.js:1279
    at ZoneDelegate.invokeTask (zone-evergreen.js:406)
    at Object.onInvokeTask (core.js:28497)
    at ZoneDelegate.invokeTask (zone-evergreen.js:405)
    at Zone.runTask (zone-evergreen.js:178)
    at drainMicroTaskQueue (zone-evergreen.js:582)

These are my first practices with Angular and I have no idea what are the "Lazy loaded modules" can anyone help me?

Answer 1

You are not supposed to call RouterModule.forRoot() multiple times in an application.

.forRoot() should be called only for the routes defined in the root module. For routes defined in any other routed modules you should call .forChild().

So, keep the .forRoot() in the AppRoutingModule module only, and change .forRoot(authRoutes) to .forChild(authRoutes) in the AuthRoutingModule. Do the same for the routes of libros and prestamos module.

Not directly related to the error:
With your current route definition, to navigate to the AuthComponent you'll need the route /auth/auth. Consider defining the routes in AuthRoutingModule as -

const authRoutes: Routes = [  
    { path: 'login', component: LoginComponent},
    { path: 'forgotPassword', component: ForgotPasswordComponent},
    { path: 'signUp', component: SignUpComponent},
    { path: '', component: AuthComponent},
];

This will make 'auth' the default route for the auth module and display the AuthComponent with the route /auth. Follow similar approach for the other two lazy modules.