A White label solution using powerful features in Angular 7+

It allows you to share, reuse, and re-brand Angular Apps

In this article, I will present a solution for building White label Angular Apps using dynamic routing and lazy-loading modules.

What is a White label App?

A White label App is an App made by a company and re-branded for the
other companies to make the product look like their own.

Using a white-label app will save time and effort(money). Most of the time, the changes are customizations of look and feel, and the functionality is provided based on the existing App.

What I want to achieve

In this example, I want to develop a White label App based on an existing Angular App.

My goals are:

1. The White label App has its own landing page with a customized style.
2. It can have identical or a subset of existing features in the original App
3. It can be built and deployed as an independent App; the distributed bundle should only contain the necessary code.
4. Maximize the code sharing.

Angular App

The example Angular App contains a landing module with the home component and two feature modules for simplicity.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

| — app  
    | — Landing modules  
           |-- [+] home components  
           |-- default-landing-routing.module.ts  
           |-- default-landing.module.ts  
    | — feature1 modules  
           |-- [+] view1 components  
           |-- feature1-routing.module.ts  
           |-- feature1-landing.module.ts  
    | — feature2 modules  
           |-- [+] view2 components  
           |-- feature2-routing.module.ts  
           |-- feature2-landing.module.ts  
    | - app-routing.module.ts  
    | - app.module.ts  
    | - app-component.html  
    | - app.component.ts

The new White label App is made for “abc” company, it has its own abc-landing module with an AbcHome component.

To identify the original App vs. White label App, a new environment file is added with a new “orgId” attribute.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// environment.ts  
export const environment = { production: false, orgId: ‘default’};// environment.abc.ts  
export const environment = {  production: false,  orgId: 'abc'};

We need to add the following configuration to Angular.json to let Angular know about the new environment.

// angular.json  
configurations": {  
    ...,  
    "abc": {  
        "fileReplacements": [  
            {  
                "replace": "src/environments/environment.ts",  
                "with": "src/environments/environment.abc.ts"  
            }  
        ]  
    }  
}

Once the configuration is done, we can build an abc application for a new environment by following the ng build command.

1
2
3
4
5

//package.json  
...  
  "start-abc": "ng serve -c abc",  
...  
   "build-abc": "ng build -c abc",

When built for production, the dist folder will contain build output with abc configuration.

Dynamic Routing

Dynamic routing is the key to this solution.

Firstly, we add the new landing module for the abc company.

1
2
3
4

| — abc Landing modules  
           |-- [+] abc home components  
           |-- abc-landing-routing.module.ts  
           |-- abc-landing.module.ts

Then, we define the route in App.module.ts

1
2
3
4
5

_const routes: Routes = [  
{ path: '', data: {name: 'default', roles: ['all']}, redirectTo: 'home', pathMatch: 'full' },  
{ path: '_**_home_**_', data: { name: 'home',_ **_roles_**_: ['default']},_**_loadChildren_**_: () => import('./default-landing/default-landing.module').then(m => m.DefaultLandingModule) },  
{ path: '_**_home_**_', data: { name: 'home',_ **_roles_**_: ['abc']},_**_loadChildren_**_: () => import('./abc-landing/abc-landing.module').then(m => m.AbcLandingModule) }  
];_

Here, we have two “home” routes, one for the origin App, and another for the new abc White label App. How do the two “home” paths work?

We use the APP_INITIALIZER token to hook into the angular bootstrap process.

1

providers: [{ provide: APP_INITIALIZER, useFactory: initApp, deps: [Injector], multi: true }]

In the factory function “initApp” the routes are loaded in run time by environment setting “orgId” and the “roles” attributes in the routes data defined earlier.

Init the dynamic routing

Lazy-loading modules

You may already notice that both default-landing and abc-landing module is lazy-loading modules, as the “loadChildren” syntax is used, followed by a function that uses the browser’s built-in import('...') for dynamic imports.

The benefit is that lazy-loading modules are built into separate small chunks instead of a single bundle file. The environment-specific modules will only be downloaded to the browser when the router is navigated, although they are all built at compile time. For example, when we run the abc configuration, only the abc-landing module will be loaded, and the default-landing module will never be called as it is not in the route!

Code Sharing

Since All landing modules are “live” together, they can access/share all the code as required. In this example, the White label App uses the feature1 and feature2 modules in its child routes and the default App.

Since the white-label App has a different “Entry Component”: AbcHomeComponent, the look and feel can be customized as desired. It can have its own header/footer component and styles. We can also choose which feature modules to use or not to use in the white-label App.

Summary

In this article, a fully customizable White label app is built on top of the existing code base. We add a new landing module and a few configurations. Both the origin App and the new White label App can be built as independent Apps by passing — c parameter and deployed in different web hosts.

I hope this article will be helpful for anyone who intends to build an Angular App with multiple frontends. The source code is available on GitHub.