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?

Can't you always bootstrap the same parent module and lazy load child modules depending on the context? — David
– David, Commented Feb 1, 2018 at 9:01
But that would mean that I am shipping the code of both the parts. What if I what to leverage code re-usability and maintainability by using common parts and ship each module independently? — tryingToLearn
– tryingToLearn, Commented Feb 1, 2018 at 9:04

smnbbrv · Accepted Answer · 2018-02-01 09:15:14Z

3

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

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.
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:

Lazy loading of the modules, see example here. This is useful if you have the modules that are dependent on the router
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.

edited Feb 1, 2018 at 9:15

answered Feb 1, 2018 at 9:09

smnbbrv

24.7k9 gold badges85 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tryingToLearn Over a year ago

Wow. You hit the bullseye. github.com/angular/angular-cli/wiki/stories-multiple-apps is a great solution. Let me try it.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related