Angular The Router was provided more than once. This can happen if ‘forRoot’ is used outside of the root injector

The notification of the error The Router was provided more than once” is a sign that your application has imported and configured the Router module more than once, which can lead to conflicts and strange behavior.

When the RouterModule is imported and configured using the forRoot() method in a feature module as opposed to merely the root module, this problem frequently happens. To configure the router for your entire application, the forRoot() method should only be used in the root module.

The complete error while building the Angular project:

The Router was provided more than once. 
This can happen if 'forRoot' is used outside of the root injector. 
Lazy loaded modules should use RouterModule.forChild() instead

The error could be because you have added the RouterModule.forRoot in your lazy-loaded module. To resolve this error, ensure that the RouterModule is imported and configured only once in your application, in the root module, and that other modules import it via the forChild() method.

An illustration of how to import and set up the RouterModule in the root module is provided here:

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

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

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

As an example of how to import and set up the RouterModule in a feature module, consider the following:

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

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

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

The solution was to replace the forRoot with the forChild and use it like this:

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

Related Posts: