How should I split app into angular modules?

Question

SCENARIO: I'm rewriting 4 older standalone SPA applications, that represents 4 steps in a typical business process using Angular 5. Typically, each app is meant to be used by different actor (user with specific role), but user can have multiple roles.

Although the apps seems standalone from user perspective, they share a lot of common logic, e.g. backend services, authorization, enums, constants and even some shared UI components.

In the new Angular version, I intend to have common frame for all the apps, with initialization, authentiation and welcome page with links to the 4 sub-applications.

The technical detail is, that users, who visit one of the apps don't need to download code for the other apps. However, some kind of lazy loading is desirable also within some of the apps.

I've decided to make single git repository and one angular project.

QUESTION: Should I split the app into Angular modules? How? Why and what are the consequences?

My initial idea was to create default AppModule with the welcome page. Then 4 modules for each app and then CommonModule for the shared logic. However, since I'm new to angular, it's based more on my feelings than expertise :)

Answer 1

My suggestion is to have one module per route (e.g. /step-1 => Module1, /step-2 => Module2, ...) and the common module. Doing this you can lazy load them and avoid problems like slow loading of your page (Angular lazy loading docs). Your idea about having a common module is correct, in that way you can inject it on the different modules which require it.

Update: routes structure

app.routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

const routes = [
  {
    path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule'
  },
  {
    path: 'players',
    loadChildren: 'app/players/players.module#PlayersModule'
  },
  {
    path: 'teams',
    loadChildren: 'app/teams/teams.module#TeamsModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

players.routing.module

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { PlayersComponent } from './players.component';
import { PlayersResolver } from './players.resolver';

const routes = [
  { path: '',
    component: PlayersComponent,
    resolve: {
      standings: PlayersResolver
    }
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: [PlayersResolver]
})
export class PlayersRoutingModule { }

players.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { PlayersComponent } from './players.component';
import { PlayersRoutingModule } from './players.routing.module';
import { PlayersService } from './players.service';

@NgModule({
  imports: [
    CommonModule,
    PlayersRoutingModule
  ],
  declarations: [PlayersComponent],
  providers: [PlayersService]
})
export class PlayersModule { }