components: Duplicated Material modules in aot generaed lazy load chunk files (Angular CLI)

Bug, feature request, or proposal:

I’ve taken a look at my (lazy load) chunk files generated by Angular CLI (--prod so with aot) and I wonder why do I have the used material components also in there floating around when they are already in the vendor.bundle file? Is this an issue on Material side, Angular CLI or it’s just the way it has to be?

Lazy load chunk 1

Lazy load chunk 2

Vendor bundle

mat-vendor

What is the expected behavior?

Don’t duplicate the Material modules throuh the app - at least not the styles.

What is the current behavior?

Every chunk gets the modules (& css) for the md components that it components use added

What are the steps to reproduce?

Plunker won’t do it so i’ve added a repo. https://github.com/bboehm86/mat-chunk-test

You’ll need @angular/cli@1.0.0-beta.32.3
source-map-explorer might be helful (run npm run build to generate files with sourcemaps)

What is the use-case or motivation for changing an existing behavior?

smaller chunk sizes

Which versions of Angular, Material, OS, browsers are affected?

Angular 2.x, Angular CLI 1.0.0-beta.32.3, all Material versions

Is there anything else we should know?

That is probably not related and a webpack issue… but in the vendor.bundle everything for Material gets inclued no matter what. The only way to prevent that is to include just the modules we use. On both, our app.module and then in every module that uses a component

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 11
Comments: 15

Most upvoted comments

@bboehm86 this is what my custom-ng-materials.module.ts file looks like:

import {MdButtonModule, MdCheckboxModule, MdInputModule, MdSelectModule, MdCardModule} from '@angular/material';
import {NgModule} from "@angular/core";

@NgModule({
    exports: [
        MdButtonModule,
        MdCheckboxModule,
        MdInputModule,
        MdSelectModule,
        MdCardModule,
    ],
})
export class CustomNgMaterialsModule { }

This module is then imported into each module that has declared components using any of these material components. I think I’m doing everything correctly according to the Getting Started Guide and your demo app. What do you think is the problem?

kblestarge on Jun 15, 2017

I’m closing this since it seems to be resolved with the latest Angular CLI release (1.1.0-rc.1)

bboehm86 on May 25, 2017

I’m experiencing the same since updating to material v2.0.0-beta.3.

CarmenPopoviciu on Apr 11, 2017

This happens to my apps too. index.ngfactory.ts is in all of my lazy loaded chunks. material.es5.js is only in vendor chunk.

GeorgeKnap on Jul 28, 2017

@bboehm86 I’m seeing the node_modules>@angular>material>typings>index.ngfactory.ts files in nearly all of my chunks and not in my vendor.bundle.js. Are you saying this is by design?

kblestarge on Jun 14, 2017

Alright, I added the material module to the imports on the app.module.ts file, which fixed the duplication of material.es5.js in each bundle, however, I’m still seeing the index.ngfactory.ts file showing up in most of the modules: screen shot 2017-06-13 at 1 43 04 pm Should I be worried about that?

kblestarge on Jun 13, 2017

same for me.

M-Adoo on Apr 28, 2017