Splitting several modules into their own js file

Question

I am trying to achieve code splitting trough lazy loading in my angular app. Resulting in each module having their own .js file contain their pages/components etc. So the .js file of moduleA can be used separately from the .js file from moduleB

In my AppModule (root) I use the following routing.

const routes: Routes = [
  {path: 'clientA', loadChildren: './clientA.module#ClientAModule'},
  {path: 'clientB', loadChildren: './clientB.module#ClientBModule'}
];

export const routing = RouterModule.forRoot(routes);

The clientAmodule:

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

import { CommonModule } from '@angular/common';
import { ComponentsModule } from './components.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

// containers
import {
  StartComponent
} from './pages';

// routes
export const ROUTES: Routes = [
  { path: 'start', component: StartComponent }
];

@NgModule({
  declarations: [StartComponent],
  imports: [CommonModule, FormsModule, ReactiveFormsModule, ComponentsModule, RouterModule.forChild(ROUTES)]
})
export class ClientAModule {}

And clientBModule:

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

import { CommonModule } from '@angular/common';
import { ComponentsModule } from './components.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

// containers
import {
  StartComponent
} from './pages';

// routes
export const ROUTES: Routes = [
  { path: 'start', component: StartComponent }
];

@NgModule({
  declarations: [StartComponent],
  imports: [CommonModule, FormsModule, ReactiveFormsModule, ComponentsModule, RouterModule.forChild(ROUTES)]
})
export class ClientBModule {}

Notice both modules use the ComponentsModule, which share generic components between both modules.

What I would expect when building my angular app is to get .js files for each module. This happens (I am getting a clienta.js and clientb.js) however most logic is presented into a: default~clienta-module~clientb-module.js, this file includes the components which are unique to their module (the startcomponents).

How do I achieve each module having their own dist .js file? (containing their own logic, so no shared .js file, no default module)

Answer 1

use below command for generating the lazy loaded module in different file

ng build --aot --named-chunks

For Ref : https://github.com/angular/angular-cli/wiki/build