Open davorz opened 3 years ago
Hello davorz, we have encountered similar issue and the solution from your EDIT part of the post does not seem to work for us. Even when I try to take the module-federation-with-angular-dynamic project and add a simple APP_INITIALIZER into mfe2 like this (\mfe2\src\app\app.module.ts):
function initializeApp(): Promise<any> {
return new Promise((resolve, reject) => {
console.info('MFE APP INIT');
resolve(true);
});
}
...
providers: [
{
provide: APP_INITIALIZER,
useFactory: () => initializeApp,
multi: true
}
],
...
I can see the console info MFE APP INIT only when i go to the mfe port directly, When opening shell app, I see only "Error: Cannot match any routes. URL Segment: 'bookings/bookings-search'" (which is the same error as yours except in the other mfe).
@BrusJan are you loading routes in the Shell app? Because Shell app needs to know routes of all mfe's before routing kicks in.
@davorz The code i have provided in my comment is the only thing i added to the original repo. I don't understand how APP_INITIALIZER can cause routing issues. Do you?
+1, having the same issue here as @davorz
Besides having APP_INITIALIZER as given above, routes declaration needs to be removed from app.module.ts from shell.
Just replace RouterModule.forRoot(APP_ROUTES)
with RouterModule.forRoot([])
After the user clicks on the header link and the route is loaded (everything still works), if page refresh occurs, the router will report an error: Cannot match any routes. URL Segment: 'flights/flights-search'. Since this route belongs to a dynamically lazy-loaded module, the router does not know about this route before routes are loaded with lookup service and registered, which occurs afterwards when shell app AppComponent is initiated (OnInit).
This occurs only if route config is injected at runtime, however, if routes for lazy loaded modules are registered within the shell module everything works fine, they are ready from the start and the router knows where to look. This approach is fine but eliminates the possibility of keeping the micro frontend configuration separate and requires shell app deployment when new micro frontends are added.
EDIT One of the possible solutions is to register lazy routes in the shell app before
AppCompnent
initializes, and before the router starts to process routes, using APP_INITIALIZER DI token. This way, if theAPP_INITIALIZER
function returns aPromise
, initialization does not complete until thePromise
is resolved. In this case, the config is loaded from theLookupService
and registered to the router.For the purpose of this POC, I have created a simple
ConfigService
that will provideAPP_INITIALIZER
withinit(): Promise<void>
method.and then,
AppModule
can provideAPP_INITIALIZER
withuseFactory
and call ConfigService to deal with registering routes from lookupService (or directly by reading config.json file etc.).