错误：RouterModule.forRoot() 调用了两次

Question

I have a component ListComponent that needs to be used in 2 modules, one of them is lazy loaded. So I created SharedModule that declares ListComponent. ListComponent uses the routerLink directive, so it needs RouterModule. So I imported RouterModule, which resulted in this error.

core.js:1598 ERROR Error: Uncaught (in promise): Error: RouterModule.forRoot() called twice. Lazy loaded modules should use RouterModule.forChild() instead.

A global search shows I am only calling RouterModule.forRoot once. My lazy-loaded module calls RouterModule.forChild and is the only other routing module.

I created a stackblitz with my exact same setup, but wasn't able to recreate the issue. It actually works. Still, I can't figure out what's different about my project. https://stackblitz.com/edit/angular-shared-component-b

Answer 1

If you only need to import the RouterModule in SharedModule in order to use directives such as routerLink you can simply import it like this:

// ...
@NgModule({
  imports: [RouterModule], //  <-- without the .forRoot call
})
export class SharedModule { }
// ...

Make sure in the base module of you app (usually AppModule , or maybe AppRoutingModule in your case) you import it with RouterModule.forRoot(yourRoutes) so the link used in ListComponent work properly.

See more in RouterModule API Docs

Answer 2

In my case the problem was AppModule auto-imported by IDE in one of page.modules.ts

You can quickly check if that's an issue:

1. Search for AppModule
2. Find all import from all files except AppModule and main.ts
3. Remove them and corresponding import statements.