DEV Community

Discussion on: Angular dynamic modules at runtime with Module Federation

View post
Collapse
 
cholt0425 profile image
cholt0425 •

So with my project setup like the article describes I got an error when the application loaded about can't mix multi-providers and regular providers. So I ended up adding this to the route module code:

},
          multi: true,
          deps: [ROUTES, PLATFORM_ROUTES],
Enter fullscreen mode Exit fullscreen mode

Specifically I added multi:true but now I get the following error:

Error: NG0200: Circular dependency in DI detected for InjectionToken ROUTES

I just don't even know where to start to debug this. I don't see any circular dependencies visually inspecting the code. However, I'm concerned I had to add multi: true to even get this far and the example does not. I am using Angular 12.0.10.

Thanks for any help you might be able to provide!

Collapse
 
cholt0425 profile image
cholt0425 •

I found the problem. It does not like the fact that you are providing ROUTES and also importing routes as a dependency in the provider. Changed static routes defined to something else and this corrected the problem.

Collapse
 
jibinp profile image
Jibin Philipose •

Thank you for the reply it saved me a lot of time, I will just add on to your answer for more clarity for those in the future who will face this problem.
In the app-routing.module.ts

{
      ngModule: RouterModule,
      providers: [
        {
          provide: ROUTES,
          useFactory: (dynamicRoutes: any = []) => {
            const rootRoutes: Routes = [];
            if (Array.isArray(dynamicRoutes)) {
              rootRoutes = [...rootRoutes, ...dynamicRoutes];
            }
            return rootRoutes;
          },
          deps: [PLATFORM_ROUTES],
          multi: true,
        },
      ],
    },
Enter fullscreen mode Exit fullscreen mode

So we just add multi: true and remove ROUTES from the deps array will stop giving this error.