Suite applications

In this document we will give a brief overview of how to configure an application and what are the basic parts involved.

Routing module

The suite framework is designed to work with modules as lego blocks, where each module is the responsible of a unique use case, inside each module we can find different layers based on the DDD guidelines.

Those modules can define a feature library with page components that should be presented to the user.

Those pages (and modules) should be loaded when the user need it, for this reason you have to define a route that load your features lazily.

The correct place to define this is the RoutingModule, this NgModule will have all Routes of the app.

const applicationRoutes: Routes = [
    {
        path: '',
        loadChildren: () => import('my-module-lazy').then((x) => x.MyModuleLazy)
    },
    {
        path: '',
        loadChildren: MyOtherModule
    },
    {
        path: '',
        component: MyComponent
    }
];

Routing module decorator - ShellRoutingModule

The ShellRoutingModule registers the applicationsRoutes and the ShellComponent.

ShellRoutingModule Usage

You have to define a module that imports the ShellRoutingModule passing the application routes as parameter of the forChild function.

@NgModule({
    imports: [ShellRoutingModule.forChild(applicationRoutes)]
})
export class AppRoutingModule {}

Important

ShellRoutingModule has to be imported in the routing module to be loaded lazily for translations reasons.

Application module

Is the entry point of the application, and allows you to:

• Configure the application routes.
• Get data before bootstrapping.
• Configure the application before bootstrapping.

Application module decorator - SuiteApplicationModule

As you probably know, the suite framework includes a lot of modules which configure some down-level features needed by the applications.

Those modules configure some critical features like Service discovery, configuration, localization, error handling, etc... in many cases the order and the configuration of that modules are critical.

For this reason those modules are exposed through a nutshell module (SuiteApplicationModule) which group all the configuration needed to run your application.

    @NgModule({
        imports: [
            SuiteApplicationModule.forRoot(applicationConfiguration),
            BrowserModule
        ]
    })
    export class AppModule  extends BaseSuiteAppModule { ... }

Application configuration

Some suite modules needs a configuration to work, for example the bootstrap module requires the backend for frontend address. The configuration of each suite module is defined in the SuiteApplicationConfiguration interface.

const applicationConfiguration: SuiteApplicationConfiguration = {
    suiteBootstrapConfiguration: {
        bootstrapConfigurationFileUri: environment.bootstrapConfigurationFileUri
    },
    suiteShellConfiguration: {
        applicationRoutes: () =>
            import('./app.routing.module').then((x) => x.AppRoutingModule)
    }
};

Modules included

Modules included in execution order	Description
Error handling	Manage the fatal errors actions.
Bootstrap	Gets the backend for frontend configuration.
Service discovery	Gets the available services, configure the interceptors, load balancing.
configuration	Gets the SPA configuration from the BFF.
Localization	Gets and register the translations based on the configured locale.
Shell	Initialize all the no lazy features of the shell.
Navigation	Initialize all the no lazy features of the navigation.

Module class - BaseSuiteAppModule

The BaseSuiteAppModule is an abstract class that manage the angular ngDoBootstrap hook under the hood providing a method to initialize the application.

Usage

Your application module have to extend the BaseSuiteAppModule class, this class require the injector, that is going to be used to inject components, services, etc.

Also the class force the implementation of the beforeDoBootstrap method, where you can configure and initialize the application.

export class AppDemoModule extends BaseSuiteAppModule {
    constructor(injector: Injector) {
        super(rootComponent);
    }

    public beforeDoBootstrap() {
        return EMPTY;
    }
}