Angular Production Build generating lot of Lazy Chunk Files

Question

I'm a newbie for angular and currently developing an Angular application which created via Visual Studio and lately updated to the latest Angular Version (12).

My application doesn't have any implementations with lazy loading. But when I'm publishing the application, it is generating tons of js files under a name called Lazy Chunk Files.

My build output as follows.

My tsconfig.json file as follows,

And, my angular.json file as follows,

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Website": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "progress": true,
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.min.css",
              "src/styles.css"
            ],
            "scripts": [],
            "allowedCommonJsDependencies": ["@ctrl/ngx-codemirror", "xlsx"],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ]
            }
          },
          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "Website:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "Website:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "Website:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/assets"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist-server",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.server.json",
            "sourceMap": true,
            "optimization": false
          },
          "configurations": {
            "dev": {
              "optimization": true,
              "outputHashing": "all",
              "namedChunks": false,
              "extractLicenses": true
            },
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "namedChunks": false,
              "extractLicenses": true
            }
          },
          "defaultConfiguration": ""
        }
      }
    },
    "Website-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "Website:serve"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "Website"
}

My app-routing.module.ts file as follows, (Reduced some repeated code lines and imports)

// Imports for the necessary components


const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'default' },
  { path: 'login', component: LoginComponent, canActivate: [LoginGuard] },
  { path: 'logout', component: LogoutComponent, canActivate: [AuthGuard] },

  { path: 'authentication', component: AuthenticationComponent },
  { path: 'dialog-status', component: DialogStatusComponent },
  { path: 'dialog-confirm', component: DialogConfirmComponent },
    // There are some more paths defined for the dialog components in the real file

  { path: 'password', component: ChangePasswordComponent, canActivate: [AuthGuard] },
  { path: 'reports', component: ReportsComponent, canActivate: [AuthGuard], canDeactivate: [PendingChangesGuard] },
    // There are some more paths defined for the components in the real file

];

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

My app-module.ts file as follows, (Reduced some repeated code lines and imports)

// Necessary imports


registerLocaleData(localeEs);


@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent,
    // And some more components
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MaterialModule,
    TranslateModule.forRoot({
      loader: {
        provide:  TranslateLoader,
        useClass: CustomLoader,
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    AppService,
    TranslateService,
    PendingChangesGuard,
    {
      provide: LOCALE_ID,
      useFactory: (appService: AppService) => appService.getLocalLanguage(),
      deps: [AppService]
    }
  ],
  bootstrap: [AppComponent],
  exports: [TranslateModule]
})
export class AppModule { }

I need to stop generating these Lazy Chunk Files when I'm performing a build. Could any of you have any idea about this??

(Please let me know if you need more information)

Answer 1

I'm answering my own question as I just found the reason for generating those tons of js files.

First I changed the production build configurations settings to generate the chunk files with their names (currently it's just a Guid) by using the following setting,

        "namedChunks": true

Then the outcome was as follows,

After seen those names, I realized that these chunk files are from the angular/common/locals which I used within my application to enable both Spanish(es) and English(en) languages.

The @angular/common/locals has tons of js language files for all cultures in the world. But in my case I only need the es and en languages. Therefore, I simply deleted those unnecessary js files for other cultures.

Then finally my output was as follows,

(Updated)

If you still getting lots of js lazy chunk files, try deleting the angular cache folder. (ClientApp/.angular)