Monday, 11 February 2019

Splitting several modules into their own js file

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)



from Splitting several modules into their own js file

No comments:

Post a Comment