angular-cli: AOT : Chunk files missing and big size files for lazy loaded files

I’m seeing a possibly related issue in the following setup: I have two lazy-loaded modules A and B which both make use of chart.js in a separate NgModule (not imported from main/root bundle, only from A and B).

From looking at the generated bundles, both chunks contain a full copy of chart.js…

@harilalinapp is that issue similar to what you are seeing?

@hansl is that the expected behavior of webpack in this case? I was expecting it would generate three chunks (for A, B and the chart NgModule) and lazy-loading the third.

Is it okay , if i share my essential codes? I can’t share the code. It’s my package.json { "name": "", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "ng": "ng", "start": "ng serve", "lint": "tslint \"src/**/*.ts\"", "test": "ng test", "pree2e": "webdriver-manager update --standalone false --gecko false", "e2e": "protractor" }, "private": true, "dependencies": { "@angular/common": "2.4.1", "@angular/compiler": "2.4.1", "@angular/core": "2.4.1", "@angular/forms": "2.4.1", "@angular/http": "2.4.1", "@angular/material": "^2.0.0-beta.1", "@angular/platform-browser": "2.4.1", "@angular/platform-browser-dynamic": "2.4.1", "@angular/router": "3.4.1", "@types/hammerjs": "2.0.33", "@types/jquery": "2.0.34", "@types/lodash": "4.14.36", "angular2-cookie": "1.2.6", "bootstrap": "3.3.7", "core-js": "2.4.1", "hammerjs": "2.0.8", "jquery": "3.1.1", "lodash": "4.16.3", "ng2-bootstrap": "1.1.16-9", "primeng": "1.1.2", "rxjs": "^5.0.1", "ts-helpers": "^1.1.1", "zone.js": "^0.7.2" }, "devDependencies": { "@angular/compiler-cli": "2.4.1", "@types/jasmine": "2.5.38", "@types/node": "^6.0.42", "angular-cli": "1.0.0-beta.24", "codelyzer": "~2.0.0-beta.1", "jasmine-core": "2.5.2", "jasmine-spec-reporter": "2.5.0", "karma": "1.2.0", "karma-chrome-launcher": "^2.0.0", "karma-cli": "^1.0.1", "karma-jasmine": "^1.0.2", "karma-remap-istanbul": "^0.2.1", "protractor": "~4.0.13", "ts-node": "1.2.1", "tslint": "^4.0.2", "typescript": "~2.0.3" } } My angular-cli.json { "project": { "version": "1.0.0-beta.24", "name": "" }, "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "assets/favicon.ico" ], "index": "index.html", "main": "main.ts", "test": "test.ts", "tsconfig": "tsconfig.json", "prefix": "ks", "mobile": false, "styles": [ "../node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/primeng/resources/themes/omega/theme.css", "../node_modules/primeng/resources/primeng.min.css", "assets/css/font-awesome.min.css", "assets/css/style.css", "assets/css/common.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ], "environments": { "source": "environments/environment.ts", "dev": "environments/environment.ts", "prod": "environments/environment.prod.ts" } } ], "addons": [], "packages": [], "e2e": { "protractor": { "config": "./protractor.conf.js" } }, "test": { "karma": { "config": "./karma.conf.js" } }, "defaults": { "styleExt": "css", "prefixInterfaces": false, "inline": { "style": false, "template": false }, "spec": { "class": false, "component": true, "directive": true, "module": false, "pipe": true, "service": true } } } Main.ts `import ‘./polyfills.ts’;

import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’; import { enableProdMode } from ‘@angular/core’; import { environment } from ‘./environments/environment’; import { AppModule } from ‘./app/app.module’;

if (environment.production) { enableProdMode(); }

platformBrowserDynamic().bootstrapModule(AppModule); app.module.tsimport { BrowserModule } from ‘@angular/platform-browser’; import { NgModule } from ‘@angular/core’; import { HttpModule } from ‘@angular/http’; import { MaterialModule } from ‘@angular/material’; import ‘hammerjs’; import { AppComponent } from ‘./app.component’; import { ConfigService } from ‘./shared/config.service’; import { AuthService } from ‘./auth/auth.service’; import { AuthGuard } from ‘./auth/auth.guard’; import { KarisoftRoutingModule } from ‘./app-routing.module’; import { SharedModule } from ‘./shared/shared.module’; import { CoreModule } from ‘./core.module’; import { SharedService } from ‘./shared/shared.service’; import { OdataService } from ‘./odata/odata.service’; import { ClientService } from ‘./clients/clients.service’;

import { TimepickerModule,ModalModule,TooltipModule,TabsModule } from ‘ng2-bootstrap’;

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpModule, KarisoftRoutingModule, SharedModule, CoreModule, MaterialModule.forRoot(), TimepickerModule.forRoot(), ModalModule.forRoot(), TooltipModule.forRoot(), TabsModule.forRoot() ], providers: [ConfigService, SharedService, AuthService, AuthGuard, OdataService, ClientService], bootstrap: [AppComponent] }) export class AppModule { } app.routiingimport { NgModule } from ‘@angular/core’; import { Routes, RouterModule, PreloadAllModules } from ‘@angular/router’; import { LoginComponent } from ‘./auth/login.component’; import { AuthGuard } from ‘./auth/auth.guard’;

const routes: Routes = [ { path:‘’, redirectTo: ‘/login’, pathMatch: ‘full’ }, { path:‘login’, loadChildren: ‘./auth/auth.module#AuthModule’, }, { path: ‘tickets’, loadChildren: ‘./tickets/tickets.module#TicketsModule’, canActivate:[AuthGuard], data: { preload: true } }, { path: ‘clients’, loadChildren: ‘./clients/clients.module#ClientsModule’, canActivate: [AuthGuard], data: { preload: true } } ];

@NgModule({ imports: [RouterModule.forRoot(routes, { useHash: true, preloadingStrategy: PreloadAllModules })], exports: [RouterModule], providers: [] }) export class KarisoftRoutingModule { } tickets.moduleimport { NgModule } from “@angular/core” import { DatePipe } from ‘@angular/common’; import { MaterialModule } from ‘@angular/material’; import {AccordionModule} from ‘primeng/components/accordion/accordion’; import {DataTableModule} from ‘primeng/components/datatable/datatable’; import {DropdownModule} from ‘primeng/components/dropdown/dropdown’; import {CheckboxModule} from ‘primeng/components/checkbox/checkbox’; import {OverlayPanelModule} from ‘primeng/components/overlaypanel/overlaypanel’; import {InputTextModule} from ‘primeng/components/inputtext/inputtext’; import {AutoCompleteModule} from ‘primeng/components/autocomplete/autocomplete’; import {DialogModule} from ‘primeng/components/dialog/dialog’; import {CalendarModule} from ‘primeng/components/calendar/calendar’; import {ModalModule } from ‘ng2-bootstrap/modal’; import {TimepickerModule } from ‘ng2-bootstrap/timepicker’; import {TabsModule } from ‘ng2-bootstrap/tabs’; import { TooltipModule } from ‘ng2-bootstrap/tooltip’;

import { SharedModule} from ‘app/shared/shared.module’; import { CoreModule } from ‘app/core.module’; import { TicketRoutesModule } from “./tickets.routes”; import { TicketsComponent } from “./tickets.component”; import { TicketListComponent } from ‘./ticket-list/ticket-list.component’; import { NewTicketComponent } from ‘./new-ticket/new-ticket.component’; import { TlistHeaderComponent } from ‘./ticket-list/tlist-header.component’ import { TicketService } from ‘./ticket.service’ import { TicketTableComponent } from ‘./ticket-list/ticket-table.component’; import { FilterPopComponent } from ‘./ticket-list/filter-pop.component’; import { StartpopComponent } from ‘./components/startpop.component’; import { StoppopComponent } from ‘./components/stoppop.component’; import { PrintpopComponent } from ‘./components/printpop.component’; import { PausepopComponent } from ‘./components/pausepop.component’; import { AppendpopComponent } from ‘./components/appendpop.component’; import { NewTaskComponent } from ‘./components/new-task.component’; import { ContinueTaskComponent } from ‘./components/continue-task.component’; import { UserinitialDirective } from ‘./directives/userinitial.directive’; import { FollowupDirective } from ‘./directives/followup.directive’;

@NgModule({ declarations: [ TicketsComponent, TicketListComponent, TlistHeaderComponent, TicketTableComponent, NewTicketComponent, FilterPopComponent, StartpopComponent, StoppopComponent, PrintpopComponent, PrintpopComponent, PausepopComponent, NewTaskComponent, ContinueTaskComponent, UserinitialDirective, AppendpopComponent, FollowupDirective ],

imports: [TicketRoutesModule,
			SharedModule,DropdownModule, 
			DataTableModule,CheckboxModule,
			OverlayPanelModule,InputTextModule,
			AccordionModule,AutoCompleteModule,
			CoreModule,
			MaterialModule,
			DialogModule,CalendarModule,
			ModalModule,TimepickerModule,
			TabsModule, TooltipModule

	 ],

providers: [TicketService, DatePipe],
exports: []

})

export class TicketsModule { }`

As mentioned earlier the poject is created on beta.16.