1

My use case is as follows:

I have two modules say A and B. A takes care of all the client side interactions while B takes care of renewing token from a single-sign-on service and does that in the background using an iFrame. Based on the current URL, I need to conditionally bootstrap either module A or B. That would mean only one among the two modules will be available in the app at any given point of time. I am doing so because I would have the iFrame in the A's root component which will load module B and thus B keeps running in the background inside the iFrame.

My main.ts file looks like this.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { A } from './app/app.module';
import { B } from './app/modules/b/b.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}
if (!location.href.includes('b2b/auth')) {
  platformBrowserDynamic().bootstrapModule(A)
    .catch(err => console.log(err));
} else {
  platformBrowserDynamic().bootstrapModule(B)
  .catch(err => console.log(err));
}

The problem is, the above code works fine in dev with just ng build but once i build prod using ng build --prod, it compiles successfully but on running it throws:

uncaught error in function() {} No NgModule metadata found for 'function (){}'. and the execution stops there. I also get:

WARNING in Lazy routes discovery is not enabled. Because there is neither an entryModule nor a statically analyzable bootstrap code in the main file. for both dev as well as prod build.

I see that many people have this issue and I was wondering if anyone was able to workaround this problem.

ng build throws an error: “Tried to find bootstrap code- but could not.”

Multiple entryModule support

https://github.com/angular/angular-cli/issues/4624

bug: No NgModule metadata found for 'function(){}'. Magical optimization for aot

No NgModule metadata found for 'function (){}'

but no luck with any of the suggestions. I know i have oversimplified my problem statement but I have done that just to have a clear idea of what is my use case and the problem I am facing.

Any help is appreciated. Thanks

Markus Dresch
  • 5,290
  • 3
  • 20
  • 40
Krishna
  • 41
  • 1
  • 7
  • I don't see the point of your question : don't you need both modules to make your app work ? You're supposed to renew the token silently while the user browses your app. If you do what you're trying to do, the user will have to reload the page to access your app once connected ? –  Jun 28 '19 at 06:55
  • @Maryannah, The same app is deployed at different places. Lets say x,y,z. x doesn't require module B and neither does y. Z requires module B to be present in an iframe to renew the token. – Krishna Jun 28 '19 at 07:19
  • Then you do not have to make it dynamic, but rather have to build with different environments for each X, Y & Z. If you do not do that, X & Y will carry module B (which means network usage, memory usage ...), and it won't be used (so a dead piece of code for them) –  Jun 28 '19 at 07:23
  • @Maryannah At this point of time in the project, my client does not mind an extra 10-12kb of gzipped module being loaded instead of having two different apps running on different ports. So, i think this is the only solution. – Krishna Jun 28 '19 at 07:54
  • Hi Krishna, did you find solution for this ? which approach you have taken ? – kaleshanagineni Nov 10 '20 at 22:43

0 Answers0