Open mtuduri opened 8 months ago
Is there any update on this? I have exactly the same problem
Even i am facing the same issue with Angular 16. (container.get is not a function) and the route goes into recursive reload. Please help if someone already did this on angular15+.
Hi @mtuduri Did you find any solution for this.
Hello, any news? I have same problem
I have same problem, @manfredsteyer
Any solutions? I have the same problem here
Hey, Not sure if this response comes to late to anyone, but I was testing this implementation with Angular 18 and in order to make this work you need to follow the instructions mentioned in this blog post, https://www.angulararchitects.io/en/blog/multi-framework-and-version-micro-frontends-with-module-federation-your-4-steps-guide/.
So in this case to avoid getting this error in the Web component App inside App.module file the bootstrap array needs to be empty, as stated in the blog post, "By going with an empty bootstrap array, Angular won't directly bootstrap any component on startup".
Also on the shell application, in the Routes Array the type for your WebComponentWrapper needs to have a type 'script'. If you use script instead of module, you can see by debugging in the browser that alongside with the url for your local remote app you get an object with your remote app name as key, this way the container created by the containerMap will have a get function and this way it will be possible to create the factory that will build your esModule and render your remote application.
Final Results:
Hi, I'm attempting to integrate an Angular 14 app as a WebComponent within an Angular 16 app. While I've successfully achieved this integration with an Angular 12, replicating the same steps from the documentation in Angular 14 doesn't work. Despite following the specified procedures, encountering an issue persists when attempting to load the Angular 14 app into the Angular 16 shell app. The error message received is:
MY CODE
Angular 16 (16.2.12) shell app code
Dependencies
Routes
webpack.config.js
tsconfig
bootstrap
Angular 14 (14.2.0) WebComponent app code
Dependencies
webpack.config.js
app.module
tsconfig
bootstrap
I suspect that the issue might be connected to the loading mechanism of the web component within the shell app. It's possible that it is related to the problems reported in #103 and #96. Despite attempting all the recommended solutions outlined in those issues, none of them have proven effective for this case.
By debugging the library we can compare how an Angular 12 web component is loaded into the 16 shell vs How Angular 14 is loaded it seems that the way the remoteEntry.js is being built is different:
Angular 12![Screenshot 2023-12-18 at 10 40 09 AM](https://github.com/angular-architects/module-federation-plugin/assets/14170429/b3a3abf4-ceea-4d2d-b909-a6a873efd11c)
Angular 14
Is loading it as a module instead of a script, the functions get and init aren't present and is not registering it in the window object either.