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 any information)
