How to conditionally bootstrap a module in Angular (5)? Branding

Question

I have an Angular 5 app, in a .NET core project, that is used by several customers. All of which would like different features and different look. I have tried few things to accomplice this. Firstly I had every company have it's on folder structure for their pages and their own Module. Then I could choose what share component should be on each page which lives in a shared module. I would still use the AppModule as the root module and the App Component with conditional master tags to load the site correctly. The scss/Sass/css would be defined in the "master" page of each brand.

For instance... etc...

All this worked correctly except that the css was still loading from brands that weren't being "loaded". So, they were being compiled although they would never be used.

So I went to another solution... to skip the AppModule as the root module and bootstrap the selected brand module (and use that as a root module) instead.. hoping that this would fix the problem. So in this example which works but when I add the condition to bootstrap brand2 (although the brand is brand1 in the environment) the scss get's compiled and I'm again at square 1. Help would be greatly appreciated.

import 'zone.js';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Brand1Module } from "./brand/brand1.module";
import { environment } from "./environments/environment";
import { Brand2Module } from "./brand/brand2.module";

if (environment.production == true)
    enableProdMode(); // FOR PRODUCTION

if (environment.brand === "brand1")
{
    platformBrowserDynamic().bootstrapModule(Brand1Module);
}

else if (environment.brand === "brand2") {
// If I leave this part below out, the CSS won't be compiled
    platformBrowserDynamic().bootstrapModule(Brand2Module);
}

score 0 · Answer 1 · answered Apr 29 '18 at 19:22

I have answered a similar question here: https://stackoverflow.com/a/50090362/2406724

Summarizing:

Angular 5 does not support multiple root modules, because the way AOT (Ahead of Time compilation) currently works. It seems it only compiles the first module and its dependencies.

In your scenario, you could use the root module for bootstrapping and lazy-load a brand module using Router with Guard.

The brand modules would still be compiled together in the bundle, but only loaded when requested.

References:

Related Issue: https://github.com/angular/angular-cli/issues/4624
Lazy-Loading Modules: https://angular.io/guide/lazy-loading-ngmodules

How to conditionally bootstrap a module in Angular (5)? Branding

1 Answers1