Suite bootstrap

The bootstrapping process of a suite application present three stages, each one configure the application before loading the feature modules.

Stage 1: Application initialization

The suite framework customize the bootstrap lifetime of normal angular application, like the root component, the root module behavior and the routing process.

This stage configure the rootComponent and allows you to set resolve any async operation before render the root component.

When angular it's starting execute the bootstrapSuiteModule function, this function required a BaseSuiteAppModule module type to work, which should be your application module.

The application module should import the basic angular modules, the SuiteApplicationModule , NgRx modules and other modules and providers that you need in your app.

Once the rootComponent was bootstrapped and the async operations were resolved, the router is initialized.

Files involved

Application module

Located in /src/app.module.ts or /src/{{YOUR_APP_NAME}}.module.ts.

@NgModule({
    // Your imports.
    // ...
})
export class AppModule extends BaseSuiteAppModule {
    public beforeDoBootstrap() {
        // Async or Sync operations for your app.
    }
}

The application entry point

Located in the main.ts file.

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

bootstrapSuiteModule(AppModule);

Warning

Avoid importing your application modules with components in the boot module unless you need it, if you do that, the components won't have translations.

Stage 2: Async configuration

In this stage the SuiteBootstrapModule (angular module) gets the backend for frontend url, this url is needed to initialize some features like configuration, service discovery, and localization.

This url should be located in a json file inside the assets folder of the project, doing that we can change the backend url without making a new build.

This module is included in the SuiteApplicationModule which controls it under the hood.

The configuration look like this:

{
    "backendForFrontendAddress": "https://some-bff.localdev.suite.itsynch.com"
}

Info

Then you have to provide the path where this is located to the module, you can use the environment variable to set that property.

Development configuration

For development environment, the recommended way is to have a json file at the app's assets directory and use that URL in the environment.ts file.

Another recommended option as well is to have the config file be fetch from a path that in your team's workstation will exist, either by providing it through a Container in a well-known port or by relying on the dev hosting it in it's local IIS or similar. For teams that require several services for development, it is recommended to use this approach.

On-premises configuration

For an on-premises deployment, the recommended way is to use Suite AspNet Core's SpaModule to serve the application, and provide the configuration by using the Suite's SpaConfigurationModule which will serve the config at api/spa-configuration.

Multi environment configuration

If your project needs more than 2 configurations you can create new environment file, Lets take a look to how to do that:

1. Create a new environment file: environment.qa.ts

2. Go to the angular.json file and add a new build configuration for QA.

    "qa": {
        "fileReplacements": [
            {
                "replace": "apps/itsynch-suite/src/environments/environment.ts",
                "with": "apps/itsynch-suite/src/environments/environment.qa.ts"
            }
        ],
        "baseHref": "/"
    }

1. To build your app using the new configuration, you use: yarn build my-app --prod --configuration=qa

Stage 3: Routing initialization

Once the initialization of the application module is completed the suite framework bootstrap the RootComponent and start the angular routing lifetime.

When the routing lifetime start, the first component loaded is the shell, then the feature module that match with the path its loaded.