angular4/5: Is it possible to conditionally build modules in angular cli?

Question

I have 2 independent parts of app which use common theme (as of now). So I tried to play around by putting them in same app but in 2 different modules: AppModule and SecondModule

Now, I created a variable buildModule in environment files and created an environment.second.ts file with value of this variable(all other environment files have different value of this variable like first, third etc):

export const environment = {
    production: true,    
    LANGUAGE: 'en',
    envName: 'second',
    buildModule: 'second'
  };

and an entry in angular-cli.json

"environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",        
        "second": "environments/environment.second.ts"
      }

And in main.ts, I am trying to do conditional bootstrapping of modules:

if (environment.production) {  
  enableProdMode();  
}

let buildModule: string = environment.buildModule;
if(buildModule === 'second'){
  platformBrowserDynamic().bootstrapModule(SecondModule)
    .catch(err => console.log(err));
} 
else{
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.log(err));
} 

but I get an error:

ERROR in Error: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
    at Object.resolveEntryModuleFromMain (C:\Others\Project\Src\webapp\multiple\node_modules\@ngtools\webpack\src\entry_resolver.js:121:15)
    at Promise.resolve.then.then (C:\Others\Project\Src\webapp\multiple\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:240:54)
    at <anonymous>

I came across this bug for this error: https://github.com/angular/angular-cli/issues/3540

Is there a different way to bootstrap/build modules independently in angular 5?

Answer 1

I don't even know where to start. Of course you can invent some strange things, however the idea is that

1. The environment.*.ts files are considered to be used for the CI purposes. That means e.g. you have the local, stage and live environments and according to those you can configure different servers to be called etc.
2. The modules are built with webpack (because angular-cli uses it internally). So, if you want to conditionally build something you should look how to do it with the webpack, e.g. here.

However, your particular problem could be solved in various ways. What you can do:

1. Lazy loading of the modules, see example here. This is useful if you have the modules that are dependent on the router
2. Creating 2 apps, see the docs. This is good when you have really big differences, like one app is user app and another one is admin app; both would reuse the same codebase but would be generated as 2 different apps.

And the last but not least: are the modules you are talking about even worth the effort? Usually another module would mean up to 1-10KB and the effort to make the conditional builds + maintaining those later on could be way above the profit you get.