Shared angular modules not landing in webpack common chunk

Question

I have a lot of angular modules that are reused in the entire application, e.g.

I18nModule
StringInputModule
...

After building the app via angular CLI and inspecting the bundle with webpack bundle analyzer, these shared modules pop up in different modules that include them. Is there a way to force them into the common chunk instead? Or what are possible mistakes that can result into this behaviour of code duplication instead of detecting that it is indeed a shared module.

To clarify: the common chunk exists, but only a handfull of ~ 50 shared modules are actually bundled within that chunk. The rest is either duplicated across different feature chunks or a lot of them are within the first feature page module.

AoT is enabled, so is the commonChunk option (https://angular.io/cli/build)

trimat trimat · Accepted Answer · 2021-04-01T18:58:49

You can create a sharedModule where all of your reusable component are and then import that module in appmodule of import sharedModule when ever you need those Ex:

$ng g m shared --routing

$ ng g c shared/components/shared --module shared

shared.module.ts

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

import { SharedRoutingModule } from "./shared-routing.module";
import { SharedComponent } from "./components/shared/shared.component";

@NgModule({
  declarations: [SharedComponent],
  imports: [CommonModule, SharedRoutingModule],
  exports: [SharedComponent]
})
export class SharedModule {}

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { SharedModule } from "./shared/shared.module";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, SharedModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

first.module.ts

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

import { ExampleRoutingModule } from "./example-routing.module";
import { ExampleComponent } from "./components/example/example.component";
import { SharedModule } from "../shared/shared.module";

@NgModule({
  declarations: [ExampleComponent],
  imports: [CommonModule, ExampleRoutingModule, SharedModule]
})
export class ExampleModule {}

Shared angular modules not landing in webpack common chunk

1 Answers