New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tree-shaking for production build is not working properly #4137

Closed
thomasgazzoni opened this Issue Apr 18, 2017 · 47 comments

Comments

Projects
None yet
@thomasgazzoni

thomasgazzoni commented Apr 18, 2017

Bug, feature request, or proposal:

The production bundle size is not shrinking

What is the expected behavior?

Base on the new package structure the production bundle (ng build --prod) should not have included all the Material Components Module

What is the current behavior?

Base on the change log now we should create our own Custom MaterialModule, in my case I have this one:

import { NgModule } from '@angular/core';
import {
    MdCardModule,
    MdChipsModule,
    MdToolbarModule,
    MdButtonModule,
    MdSidenavModule,
    MdRippleModule,
    MdIconModule,
    MdListModule,
    MdProgressSpinnerModule,
} from '@angular/material';

@NgModule({
    imports: [
        MdCardModule,
        MdChipsModule,
        MdToolbarModule,
        MdButtonModule,
        MdSidenavModule,
        MdRippleModule,
        MdIconModule,
        MdListModule,
        MdProgressSpinnerModule,
    ],
    declarations: [

    ],
    providers: [

    ],
    exports: [
        MdCardModule,
        MdChipsModule,
        MdToolbarModule,
        MdButtonModule,
        MdSidenavModule,
        MdRippleModule,
        MdIconModule,
        MdListModule,
        MdProgressSpinnerModule,
    ]
})
export class CustomMaterialModule { }

that is imported in the AppModule.

Even if I remove all the module and import only, for example, MdButtonModule, the size of material library in the production vendor.js still 308Kb

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

@angular/cli: 1.0.0
node: 7.9.0
os: linux x64
@angular/animations: 4.0.1
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/material: 2.0.0-beta.3
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1

Is there anything else we should know?

This is the vendor sourcemap generated by source-map-explorer
image

@DevVersion

This comment has been minimized.

Show comment
Hide comment
@DevVersion

DevVersion Apr 18, 2017

Member

Yeah I experienced the same issue when testing Material with Webpack 2.

I've been talking to some people about this and it looks like this happens due to missing @__PURE__ annotations in the FESM bundles on IIFEs.

Member

DevVersion commented Apr 18, 2017

Yeah I experienced the same issue when testing Material with Webpack 2.

I've been talking to some people about this and it looks like this happens due to missing @__PURE__ annotations in the FESM bundles on IIFEs.

@jelbourn

This comment has been minimized.

Show comment
Hide comment
@jelbourn

jelbourn Apr 18, 2017

Member

Yep, just spent a while talking about this with the rest of the Angular core team. The gist is that the new packing structure doesn't work out of the box with how webpack tries to eliminate dead code. We're working on a solution and will publish a beta.4 as soon as we have a good approach.

Member

jelbourn commented Apr 18, 2017

Yep, just spent a while talking about this with the rest of the Angular core team. The gist is that the new packing structure doesn't work out of the box with how webpack tries to eliminate dead code. We're working on a solution and will publish a beta.4 as soon as we have a good approach.

@jelbourn jelbourn self-assigned this Apr 18, 2017

@jelbourn jelbourn added the P2 label Apr 18, 2017

@dahaupt

This comment has been minimized.

Show comment
Hide comment
@dahaupt

dahaupt Apr 18, 2017

Contributor

Do we even have to import the single Modules into our CustomMaterialModule? I just exported them and everything seems to work fine.

My CustomMaterialModule:

@NgModule({
  exports: [
    MdButtonModule, MdInputModule, MdSelectModule, MdTabsModule, MdMenuModule, MdIconModule, MdTooltipModule, MdCardModule,
    MdCheckboxModule, MdSidenavModule, MdDialogModule, MdToolbarModule, MdSnackBarModule, MdProgressSpinnerModule, MdListModule
  ]
})
export class CustomMaterialModule {
}
Contributor

dahaupt commented Apr 18, 2017

Do we even have to import the single Modules into our CustomMaterialModule? I just exported them and everything seems to work fine.

My CustomMaterialModule:

@NgModule({
  exports: [
    MdButtonModule, MdInputModule, MdSelectModule, MdTabsModule, MdMenuModule, MdIconModule, MdTooltipModule, MdCardModule,
    MdCheckboxModule, MdSidenavModule, MdDialogModule, MdToolbarModule, MdSnackBarModule, MdProgressSpinnerModule, MdListModule
  ]
})
export class CustomMaterialModule {
}
@kuncevic

This comment has been minimized.

Show comment
Hide comment
@kuncevic

kuncevic May 3, 2017

Contributor

Just created a custom material module thinking to reduce the bundle size

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  MdDialogModule,
  MdToolbarModule,
  MdInputModule,
  MdMenuModule,
  MdIconModule,
  MdSlideToggleModule,
  MdSliderModule,
  MdSelectModule,
  MdRadioModule,
  MdCheckboxModule,
  MdButtonModule,
  MdButtonToggleModule,
  MdSidenavModule,
  MdListModule,
  MdTooltipModule

} from '@angular/material';

@NgModule({
  imports: [
    CommonModule,
    MdDialogModule,
    MdToolbarModule,
    MdInputModule,
    MdMenuModule,
    MdIconModule,
    MdSlideToggleModule,
    MdSliderModule,
    MdSelectModule,
    MdRadioModule,
    MdCheckboxModule,
    MdButtonModule,
    MdButtonToggleModule,
    MdSidenavModule,
    MdListModule,
    MdTooltipModule
  ],
  exports: [
    CommonModule,
    MdDialogModule,
    MdToolbarModule,
    MdInputModule,
    MdMenuModule,
    MdIconModule,
    MdSlideToggleModule,
    MdSliderModule,
    MdSelectModule,
    MdRadioModule,
    MdCheckboxModule,
    MdButtonModule,
    MdButtonToggleModule,
    MdSidenavModule,
    MdListModule,
    MdTooltipModule
  ]
})
export class CustomMaterialModule { }

Didn't work still getting same material size 741.28 kb. So currently no difference if I am importing my custom module or MaterialModule

image

Looking forward to bata.4 handling that case.

Contributor

kuncevic commented May 3, 2017

Just created a custom material module thinking to reduce the bundle size

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  MdDialogModule,
  MdToolbarModule,
  MdInputModule,
  MdMenuModule,
  MdIconModule,
  MdSlideToggleModule,
  MdSliderModule,
  MdSelectModule,
  MdRadioModule,
  MdCheckboxModule,
  MdButtonModule,
  MdButtonToggleModule,
  MdSidenavModule,
  MdListModule,
  MdTooltipModule

} from '@angular/material';

@NgModule({
  imports: [
    CommonModule,
    MdDialogModule,
    MdToolbarModule,
    MdInputModule,
    MdMenuModule,
    MdIconModule,
    MdSlideToggleModule,
    MdSliderModule,
    MdSelectModule,
    MdRadioModule,
    MdCheckboxModule,
    MdButtonModule,
    MdButtonToggleModule,
    MdSidenavModule,
    MdListModule,
    MdTooltipModule
  ],
  exports: [
    CommonModule,
    MdDialogModule,
    MdToolbarModule,
    MdInputModule,
    MdMenuModule,
    MdIconModule,
    MdSlideToggleModule,
    MdSliderModule,
    MdSelectModule,
    MdRadioModule,
    MdCheckboxModule,
    MdButtonModule,
    MdButtonToggleModule,
    MdSidenavModule,
    MdListModule,
    MdTooltipModule
  ]
})
export class CustomMaterialModule { }

Didn't work still getting same material size 741.28 kb. So currently no difference if I am importing my custom module or MaterialModule

image

Looking forward to bata.4 handling that case.

@fknop

This comment has been minimized.

Show comment
Hide comment
@fknop

fknop May 13, 2017

Has this issue been fixed with beta.4 ?

fknop commented May 13, 2017

Has this issue been fixed with beta.4 ?

@karolmie1

This comment has been minimized.

Show comment
Hide comment
@karolmie1

karolmie1 May 13, 2017

@fknop I've noticed some decrease in size, but not enough.

karolmie1 commented May 13, 2017

@fknop I've noticed some decrease in size, but not enough.

@kuncevic

This comment has been minimized.

Show comment
Hide comment
@kuncevic

kuncevic May 15, 2017

Contributor

@fknop @karolmie1 for me it is just got increased:

image
was:
741.2k kb
60.03 gziped
now
850.19 kb
69.11 kb gziped
And I am just importing my custom module #4137 (comment)

Contributor

kuncevic commented May 15, 2017

@fknop @karolmie1 for me it is just got increased:

image
was:
741.2k kb
60.03 gziped
now
850.19 kb
69.11 kb gziped
And I am just importing my custom module #4137 (comment)

@paulogr

This comment has been minimized.

Show comment
Hide comment
@paulogr

paulogr May 15, 2017

Love to see that working!

paulogr commented May 15, 2017

Love to see that working!

@jelbourn

This comment has been minimized.

Show comment
Hide comment
@jelbourn

jelbourn May 15, 2017

Member

We're working on it (experiment 1, experiment 2), but getting it to "just work" with existing tooling is somewhat tricky and we're still working out the approach.

Member

jelbourn commented May 15, 2017

We're working on it (experiment 1, experiment 2), but getting it to "just work" with existing tooling is somewhat tricky and we're still working out the approach.

@fetters5

This comment has been minimized.

Show comment
Hide comment
@fetters5

fetters5 Jun 2, 2017

Any updates on a timeline for this by chance?

fetters5 commented Jun 2, 2017

Any updates on a timeline for this by chance?

@jelbourn

This comment has been minimized.

Show comment
Hide comment
@jelbourn

jelbourn Jun 2, 2017

Member

@IgorMinar and @kara are actively working on it.

Member

jelbourn commented Jun 2, 2017

@IgorMinar and @kara are actively working on it.

@jelbourn jelbourn assigned kara and unassigned jelbourn Jun 6, 2017

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Jun 9, 2017

While it is currently being worked on, is there an other possible workaround to this problem right now?

ghost commented Jun 9, 2017

While it is currently being worked on, is there an other possible workaround to this problem right now?

@aitboudad

This comment has been minimized.

Show comment
Hide comment
@aitboudad

aitboudad Jun 9, 2017

Contributor

Check this one https://github.com/IgorMinar/purify it might help you

Contributor

aitboudad commented Jun 9, 2017

Check this one https://github.com/IgorMinar/purify it might help you

@jelbourn

This comment has been minimized.

Show comment
Hide comment
@jelbourn

jelbourn Jun 9, 2017

Member

Yep, that's what they're working on

Member

jelbourn commented Jun 9, 2017

Yep, that's what they're working on

@karolmie1

This comment has been minimized.

Show comment
Hide comment
@karolmie1

karolmie1 Jun 17, 2017

Would it be possible to provide separate modules: MdCardModule, MdChipsModule, instead of one blob?
Then we could import directly, and circumvent the tree-shaking conondrum.

Plus material module as of now for lazy people.

Same way a angular does it -> there is no one big angular.es5 file, they are split into router module, animations module itp.

karolmie1 commented Jun 17, 2017

Would it be possible to provide separate modules: MdCardModule, MdChipsModule, instead of one blob?
Then we could import directly, and circumvent the tree-shaking conondrum.

Plus material module as of now for lazy people.

Same way a angular does it -> there is no one big angular.es5 file, they are split into router module, animations module itp.

@deepakzoto

This comment has been minimized.

Show comment
Hide comment
@deepakzoto

deepakzoto Jun 20, 2017

@jelbourn Any Update on tree-shaking?

deepakzoto commented Jun 20, 2017

@jelbourn Any Update on tree-shaking?

@filipesilva

This comment has been minimized.

Show comment
Hide comment
@filipesilva

filipesilva Jul 22, 2017

Member

@angular-devkit/build-optimizer (formerly ngo+purify) support was added to @angular/cli@1.3.0-rc.0. You can read more about it in angular/angular-cli#6520.

This should allow a lot of unused material classes to be dropped. Please let me know how it worked out for you - this is still experimental and it's very important to work out the kinks before 1.3.0 final.

Member

filipesilva commented Jul 22, 2017

@angular-devkit/build-optimizer (formerly ngo+purify) support was added to @angular/cli@1.3.0-rc.0. You can read more about it in angular/angular-cli#6520.

This should allow a lot of unused material classes to be dropped. Please let me know how it worked out for you - this is still experimental and it's very important to work out the kinks before 1.3.0 final.

@alexzuza

This comment has been minimized.

Show comment
Hide comment
@alexzuza

alexzuza Jul 22, 2017

@filipesilva Very nice news. We will try it

alexzuza commented Jul 22, 2017

@filipesilva Very nice news. We will try it

@kuncevic

This comment has been minimized.

Show comment
Hide comment
@kuncevic

kuncevic Jul 22, 2017

Contributor

@filipesilva that cool, but there is something wrong going on with CLI producing wrong bundler stats file or due to incompatibility with scope hoisting angular/angular-cli#7057
Tested with 1.3.0-beta.0 and 1.3.0 rc.0.

Contributor

kuncevic commented Jul 22, 2017

@filipesilva that cool, but there is something wrong going on with CLI producing wrong bundler stats file or due to incompatibility with scope hoisting angular/angular-cli#7057
Tested with 1.3.0-beta.0 and 1.3.0 rc.0.

@chyzwar

This comment has been minimized.

Show comment
Hide comment
@chyzwar

chyzwar Jul 28, 2017

Why not just split into separate submodules files?
Instead

import { 
  MdAutocompleteModule
  MdButtonModule,
} from } from '@angular/material';

We could have:

import { MdAutocompleteModule } from '@angular/material/MdAutocompleteModule';
import { MdButtonModule } from '@angular/material/MdButtonModule'

And user will automatically import only what is needed. You can still re-export everything under @angular/material.

Now I have a situation that my prod bundle is 1.5mb and large part is because of Material.
I will try with aot, but the app is already barely usable in IE11. We go live on Monday and It looks like I will need to rewrite this to Bootstrap.

chyzwar commented Jul 28, 2017

Why not just split into separate submodules files?
Instead

import { 
  MdAutocompleteModule
  MdButtonModule,
} from } from '@angular/material';

We could have:

import { MdAutocompleteModule } from '@angular/material/MdAutocompleteModule';
import { MdButtonModule } from '@angular/material/MdButtonModule'

And user will automatically import only what is needed. You can still re-export everything under @angular/material.

Now I have a situation that my prod bundle is 1.5mb and large part is because of Material.
I will try with aot, but the app is already barely usable in IE11. We go live on Monday and It looks like I will need to rewrite this to Bootstrap.

@julianobrasil

This comment has been minimized.

Show comment
Hide comment
@julianobrasil

julianobrasil Aug 4, 2017

Contributor

@filipesilva, tried the RC.5 and the problem remains (in fact the vendor bundle increased from 895KB in 1.2.1 to 897KB in 1.3.0-rc.5). Basically I have imported two modules from material (MdInputModule and MdCardModule) to a fresh new cli project.

1.3.0-rc.5

image

1.2.1

image

My setup:

@angular/cli: 1.3.0-rc.5
node: 6.10.3
os: win32 x64
@angular/animations: 4.3.3
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.3
@angular/compiler: 4.3.3
@angular/core: 4.3.3
@angular/forms: 4.3.3
@angular/http: 4.3.3
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.3
@angular/platform-browser-dynamic: 4.3.3
@angular/router: 4.3.3
@angular/cli: 1.3.0-rc.5
@angular/compiler-cli: 4.3.3
@angular/language-service: 4.3.3
Contributor

julianobrasil commented Aug 4, 2017

@filipesilva, tried the RC.5 and the problem remains (in fact the vendor bundle increased from 895KB in 1.2.1 to 897KB in 1.3.0-rc.5). Basically I have imported two modules from material (MdInputModule and MdCardModule) to a fresh new cli project.

1.3.0-rc.5

image

1.2.1

image

My setup:

@angular/cli: 1.3.0-rc.5
node: 6.10.3
os: win32 x64
@angular/animations: 4.3.3
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.3
@angular/compiler: 4.3.3
@angular/core: 4.3.3
@angular/forms: 4.3.3
@angular/http: 4.3.3
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.3
@angular/platform-browser-dynamic: 4.3.3
@angular/router: 4.3.3
@angular/cli: 1.3.0-rc.5
@angular/compiler-cli: 4.3.3
@angular/language-service: 4.3.3
@filipesilva

This comment has been minimized.

Show comment
Hide comment
@filipesilva

filipesilva Aug 4, 2017

Member

@julianobrasil to use the build optimizer you need to add the --build-optimizer flag (e.g. ng build --prod --build-optimizer).

Member

filipesilva commented Aug 4, 2017

@julianobrasil to use the build optimizer you need to add the --build-optimizer flag (e.g. ng build --prod --build-optimizer).

@julianobrasil

This comment has been minimized.

Show comment
Hide comment
@julianobrasil

julianobrasil Aug 4, 2017

Contributor

Wow! Nice!!! Apparently I found nothing but the two modules I've imported.

Without the --build-optimizer:

image

With --build-optimizer:

image

Contributor

julianobrasil commented Aug 4, 2017

Wow! Nice!!! Apparently I found nothing but the two modules I've imported.

Without the --build-optimizer:

image

With --build-optimizer:

image

@filipesilva

This comment has been minimized.

Show comment
Hide comment
@filipesilva

filipesilva Aug 4, 2017

Member

905KB to 273KB is indeed a very big reduction :D

Let me know if there's any runtime problems with the app, we're still ironing out bugs.

Member

filipesilva commented Aug 4, 2017

905KB to 273KB is indeed a very big reduction :D

Let me know if there's any runtime problems with the app, we're still ironing out bugs.

@julianobrasil

This comment has been minimized.

Show comment
Hide comment
@julianobrasil

julianobrasil Aug 4, 2017

Contributor

I'll try it in a real project I'm working on. At the end of the day I'll comment about the tests over here.

Contributor

julianobrasil commented Aug 4, 2017

I'll try it in a real project I'm working on. At the end of the day I'll comment about the tests over here.

@julianobrasil

This comment has been minimized.

Show comment
Hide comment
@julianobrasil

julianobrasil Aug 4, 2017

Contributor

@filipesilva, I've just tried to compile the other project (I have some extra stuff like lazy loading routing and some third-party libraries - see bellow). If you need more details, let me know.

Error Messages
ERROR in ./node_modules/rxjs/observable/BoundCallbackObservable.js Module build failed: TypeError: Cannot read property 'type' of undefined at Object.getEffectiveTypeAnnotationNode
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:9341:17) at assignContextualParameterTypes
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:41652:25) at checkFunctionExpressionOrObjectLiteralMethod 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:41948:29) at checkExpressionWorker 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:42959:28) at checkExpression 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:42898:42) at checkExpressionCached 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:42779:38) at checkReturnStatement 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:45418:54) at checkSourceElement 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46763:28) at Object.forEach 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:1506:30) at checkBlock 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:44563:16) at checkSourceElement 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46742:28) at checkFunctionExpressionOrObjectLiteralMethodDeferred 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:41990:21) at checkDeferredNodes 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46828:25) at checkSourceFileWorker 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46863:17) at checkSourceFile 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46842:13) at Object.forEach 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:1506:30) @ ./node_modules/rxjs/observable/bindCallback.js 2:32-68 @ ./node_modules/rxjs/add/observable/bindCallback.js @ ./node_modules/rxjs/Rx.js @ ./src/app/model/service/dao/usuario.service.ts @ ./src/$$_gendir/app/app.module.ngfactory.ts @ ./src/main.ts @ multi ./src/main.ts ERROR in ./node_modules/rxjs/observable/BoundNodeCallbackObservable.js Module build failed: TypeError: Cannot read property 'type' of undefined at Object.getEffectiveTypeAnnotationNode 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:9341:17) at assignContextualParameterTypes 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:41652:25) at checkFunctionExpressionOrObjectLiteralMethod 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:41948:29) at checkExpressionWorker 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:42959:28) at checkExpression 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:42898:42) at checkExpressionCached 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:42779:38) at checkReturnStatement 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:45418:54) at checkSourceElement 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46763:28) at Object.forEach 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:1506:30) at checkBlock 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:44563:16) at checkSourceElement 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46742:28) at checkFunctionExpressionOrObjectLiteralMethodDeferred 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:41990:21) at checkDeferredNodes 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46828:25) at checkSourceFileWorker 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46863:17) at checkSourceFile 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46842:13) at Object.forEach 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:1506:30) @ ./node_modules/rxjs/observable/bindNodeCallback.js 2:36-76 @ ./node_modules/rxjs/add/observable/bindNodeCallback.js @ ./node_modules/rxjs/Rx.js @ ./src/app/model/service/dao/usuario.service.ts @ ./src/$$_gendir/app/app.module.ngfactory.ts @ ./src/main.ts @ multi ./src/main.ts
    
package.json
 "dependencies": {
    "@angular/animations": "^4.3.3",
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/common": "^4.3.3",
    "@angular/compiler": "^4.3.3",
    "@angular/core": "^4.3.3",
    "@angular/flex-layout": "github:angular/flex-layout-builds",
    "@angular/forms": "^4.3.3",
    "@angular/http": "^4.3.3",
    "@angular/material": "^2.0.0-beta.8",
    "@angular/platform-browser": "^4.3.3",
    "@angular/platform-browser-dynamic": "^4.3.3",
    "@angular/platform-server": "^4.3.3",
    "@angular/router": "^4.3.3",
    "@types/crypto-js": "^3.1.32",
    "angular2-text-mask": "^8.0.1",
    "bootstrap": "^4.0.0-alpha.6",
    "chart.js": "^2.6.0",
    "core-js": "^2.4.1",
    "crypto-js": "^3.1.9-1",
    "express": "^4.14.0",
    "hammerjs": "^2.0.8",
    "jquery-ui": "^1.12.1",
    "jquery-ui-dist": "^1.12.1",
    "linqts": "^1.8.2",
    "ng2-dragula": "^1.5.0",
    "ngx-pagination": "^3.0.0",
    "rxjs": "^5.3.0",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@angular/cli": "^1.3.0-rc.5",
    "@angular/compiler-cli": "^4.3.3",
    "@angular/language-service": "^4.3.3",
    "@types/jasmine": "2.5.46",
    "@types/node": "~7.0.12",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.4"
  }
Contributor

julianobrasil commented Aug 4, 2017

@filipesilva, I've just tried to compile the other project (I have some extra stuff like lazy loading routing and some third-party libraries - see bellow). If you need more details, let me know.

Error Messages
ERROR in ./node_modules/rxjs/observable/BoundCallbackObservable.js Module build failed: TypeError: Cannot read property 'type' of undefined at Object.getEffectiveTypeAnnotationNode
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:9341:17) at assignContextualParameterTypes
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:41652:25) at checkFunctionExpressionOrObjectLiteralMethod 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:41948:29) at checkExpressionWorker 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:42959:28) at checkExpression 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:42898:42) at checkExpressionCached 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:42779:38) at checkReturnStatement 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:45418:54) at checkSourceElement 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46763:28) at Object.forEach 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:1506:30) at checkBlock 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:44563:16) at checkSourceElement 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46742:28) at checkFunctionExpressionOrObjectLiteralMethodDeferred 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:41990:21) at checkDeferredNodes 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46828:25) at checkSourceFileWorker 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46863:17) at checkSourceFile 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46842:13) at Object.forEach 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:1506:30) @ ./node_modules/rxjs/observable/bindCallback.js 2:32-68 @ ./node_modules/rxjs/add/observable/bindCallback.js @ ./node_modules/rxjs/Rx.js @ ./src/app/model/service/dao/usuario.service.ts @ ./src/$$_gendir/app/app.module.ngfactory.ts @ ./src/main.ts @ multi ./src/main.ts ERROR in ./node_modules/rxjs/observable/BoundNodeCallbackObservable.js Module build failed: TypeError: Cannot read property 'type' of undefined at Object.getEffectiveTypeAnnotationNode 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:9341:17) at assignContextualParameterTypes 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:41652:25) at checkFunctionExpressionOrObjectLiteralMethod 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:41948:29) at checkExpressionWorker 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:42959:28) at checkExpression 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:42898:42) at checkExpressionCached 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:42779:38) at checkReturnStatement 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:45418:54) at checkSourceElement 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46763:28) at Object.forEach 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:1506:30) at checkBlock 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:44563:16) at checkSourceElement 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46742:28) at checkFunctionExpressionOrObjectLiteralMethodDeferred 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:41990:21) at checkDeferredNodes 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46828:25) at checkSourceFileWorker 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46863:17) at checkSourceFile 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:46842:13) at Object.forEach 
(E:\Users\Juliano\Documents\Projetos\SGI-ALFA\github\SGI-Frontend\node_modules\@angular-devkit\build-optimizer\node_modules\typescript\lib\typescript.js:1506:30) @ ./node_modules/rxjs/observable/bindNodeCallback.js 2:36-76 @ ./node_modules/rxjs/add/observable/bindNodeCallback.js @ ./node_modules/rxjs/Rx.js @ ./src/app/model/service/dao/usuario.service.ts @ ./src/$$_gendir/app/app.module.ngfactory.ts @ ./src/main.ts @ multi ./src/main.ts
    
package.json
 "dependencies": {
    "@angular/animations": "^4.3.3",
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/common": "^4.3.3",
    "@angular/compiler": "^4.3.3",
    "@angular/core": "^4.3.3",
    "@angular/flex-layout": "github:angular/flex-layout-builds",
    "@angular/forms": "^4.3.3",
    "@angular/http": "^4.3.3",
    "@angular/material": "^2.0.0-beta.8",
    "@angular/platform-browser": "^4.3.3",
    "@angular/platform-browser-dynamic": "^4.3.3",
    "@angular/platform-server": "^4.3.3",
    "@angular/router": "^4.3.3",
    "@types/crypto-js": "^3.1.32",
    "angular2-text-mask": "^8.0.1",
    "bootstrap": "^4.0.0-alpha.6",
    "chart.js": "^2.6.0",
    "core-js": "^2.4.1",
    "crypto-js": "^3.1.9-1",
    "express": "^4.14.0",
    "hammerjs": "^2.0.8",
    "jquery-ui": "^1.12.1",
    "jquery-ui-dist": "^1.12.1",
    "linqts": "^1.8.2",
    "ng2-dragula": "^1.5.0",
    "ngx-pagination": "^3.0.0",
    "rxjs": "^5.3.0",
    "ts-helpers": "^1.1.2",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@angular/cli": "^1.3.0-rc.5",
    "@angular/compiler-cli": "^4.3.3",
    "@angular/language-service": "^4.3.3",
    "@types/jasmine": "2.5.46",
    "@types/node": "~7.0.12",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.4"
  }
@filipesilva

This comment has been minimized.

Show comment
Hide comment
@filipesilva

filipesilva Aug 4, 2017

Member

@julianobrasil let's move this onto the CLI issue tracker now, this part isn't about Material any more.

Can you open a new issue there with these logs, and perhaps show me the contents of ./src/app/model/service/dao/usuario.service.ts? If you can provide a repro it would be even better.

Member

filipesilva commented Aug 4, 2017

@julianobrasil let's move this onto the CLI issue tracker now, this part isn't about Material any more.

Can you open a new issue there with these logs, and perhaps show me the contents of ./src/app/model/service/dao/usuario.service.ts? If you can provide a repro it would be even better.

@steve-todorov

This comment has been minimized.

Show comment
Hide comment
@steve-todorov

steve-todorov Aug 4, 2017

I've seen HUGE improvement using 1.3.0-rc.5! Having all of the material components and angular itself I previously had a "base" bundle which could be up to 2MB. After using ng build --prod --aot --build-optimizer the compiled code is around ~400kb which is absolutely awesome! @filipesilva job well done! 🥇 👍

Hash: 03b835ca4ff8a748a075
Version: webpack 3.4.1
Time: 56462ms
                              Asset       Size  Chunks                    Chunk Names
                    js/polyfills.js    62.4 kB       0  [emitted]         polyfills
                         js/main.js     337 kB       1  [emitted]  [big]  main
                       js/inline.js    1.36 kB       3  [emitted]         inline
css/styles.03b835ca4ff8a748a075.css    33.4 kB       2  [emitted]         styles
                        favicon.ico    5.43 kB          [emitted]         
                       ./index.html  516 bytes          [emitted]         
                ../../manifest.json  204 bytes          [emitted]         

steve-todorov commented Aug 4, 2017

I've seen HUGE improvement using 1.3.0-rc.5! Having all of the material components and angular itself I previously had a "base" bundle which could be up to 2MB. After using ng build --prod --aot --build-optimizer the compiled code is around ~400kb which is absolutely awesome! @filipesilva job well done! 🥇 👍

Hash: 03b835ca4ff8a748a075
Version: webpack 3.4.1
Time: 56462ms
                              Asset       Size  Chunks                    Chunk Names
                    js/polyfills.js    62.4 kB       0  [emitted]         polyfills
                         js/main.js     337 kB       1  [emitted]  [big]  main
                       js/inline.js    1.36 kB       3  [emitted]         inline
css/styles.03b835ca4ff8a748a075.css    33.4 kB       2  [emitted]         styles
                        favicon.ico    5.43 kB          [emitted]         
                       ./index.html  516 bytes          [emitted]         
                ../../manifest.json  204 bytes          [emitted]         
@filipesilva

This comment has been minimized.

Show comment
Hide comment
@filipesilva

filipesilva Aug 4, 2017

Member

That's great to hear!

Member

filipesilva commented Aug 4, 2017

That's great to hear!

@isEdison

This comment has been minimized.

Show comment
Hide comment
@isEdison

isEdison Aug 14, 2017

But there isn't a vendor.bundle.js anymore. Why?
Is there any way to separate it out from the main.bundle.js, thx.

isEdison commented Aug 14, 2017

But there isn't a vendor.bundle.js anymore. Why?
Is there any way to separate it out from the main.bundle.js, thx.

@trotyl

This comment has been minimized.

Show comment
Hide comment
@trotyl

trotyl Aug 14, 2017

Contributor

@isEdison try --vendor-chunk true

Contributor

trotyl commented Aug 14, 2017

@isEdison try --vendor-chunk true

@isEdison

This comment has been minimized.

Show comment
Hide comment
@isEdison

isEdison commented Aug 14, 2017

@trotyl it works!

@daniele-zurico

This comment has been minimized.

Show comment
Hide comment
@daniele-zurico

daniele-zurico Aug 14, 2017

It's worth it to add the vendor-chunk? Which one is the explanation to remove it from the normal build?

daniele-zurico commented Aug 14, 2017

It's worth it to add the vendor-chunk? Which one is the explanation to remove it from the normal build?

@filipesilva

This comment has been minimized.

Show comment
Hide comment
@filipesilva

filipesilva Aug 14, 2017

Member

We've seen much better results by not having the vendor bundle, so we default to it.

The combination of webpack 3 scope hoisting, build optimizer pure comments and UglifyJS allow a lot of code to be removed if it is in the same bundle. But when separating bundles, UglifyJS can no longer identify code to drop as well due to the indirection from the webpack loader.

So yes, you can re-add the vendor bundle by doing --vendor-chunk=true. But I advise you to compare the total size with and without it to make sure you're not delivering unnecessary code.

Member

filipesilva commented Aug 14, 2017

We've seen much better results by not having the vendor bundle, so we default to it.

The combination of webpack 3 scope hoisting, build optimizer pure comments and UglifyJS allow a lot of code to be removed if it is in the same bundle. But when separating bundles, UglifyJS can no longer identify code to drop as well due to the indirection from the webpack loader.

So yes, you can re-add the vendor bundle by doing --vendor-chunk=true. But I advise you to compare the total size with and without it to make sure you're not delivering unnecessary code.

@HaareeKrishna

This comment has been minimized.

Show comment
Hide comment
@HaareeKrishna

HaareeKrishna Sep 1, 2017

Webpack will not load unused modules and cannot remove it from bundle. We need to use uglifyJs to remove the dead code from bundle.

HaareeKrishna commented Sep 1, 2017

Webpack will not load unused modules and cannot remove it from bundle. We need to use uglifyJs to remove the dead code from bundle.

@IAMtheIAM

This comment has been minimized.

Show comment
Hide comment
@IAMtheIAM

IAMtheIAM Sep 19, 2017

How do we use build-optmizer with webpack doing the build? I don't use ng on command line at all for my setup. Currently in 2.0.0-beta.10 still no reduction in bundle size at all using webpack. It just plops the whole materialize.js into the bundle, even when only importing specific modules.

IAMtheIAM commented Sep 19, 2017

How do we use build-optmizer with webpack doing the build? I don't use ng on command line at all for my setup. Currently in 2.0.0-beta.10 still no reduction in bundle size at all using webpack. It just plops the whole materialize.js into the bundle, even when only importing specific modules.

@willshowell

This comment has been minimized.

Show comment
Hide comment
Contributor

willshowell commented Sep 19, 2017

@IAMtheIAM

This comment has been minimized.

Show comment
Hide comment
@IAMtheIAM

IAMtheIAM Sep 19, 2017

@willshowell Yes sorry, I meant the whole @angular/material js bundle.

So if I add that webpack plugin you pointed me to, Angular Build Optmizer, this should allow webpack/uglifyjs to tree shake the angular/material bundle ? I will check that out.

Lastly, should that loader only be used for development, or is it safe for production? I am unfamiliar with what it does.

IAMtheIAM commented Sep 19, 2017

@willshowell Yes sorry, I meant the whole @angular/material js bundle.

So if I add that webpack plugin you pointed me to, Angular Build Optmizer, this should allow webpack/uglifyjs to tree shake the angular/material bundle ? I will check that out.

Lastly, should that loader only be used for development, or is it safe for production? I am unfamiliar with what it does.

@trotyl

This comment has been minimized.

Show comment
Hide comment
@trotyl

trotyl Sep 20, 2017

Contributor

@IAMtheIAM The build-optimizer can only work with AOT (and parts of the optimization needs uglifyJS), so likely you can only use that in production. (Few people use AOT in dev as I know)

Contributor

trotyl commented Sep 20, 2017

@IAMtheIAM The build-optimizer can only work with AOT (and parts of the optimization needs uglifyJS), so likely you can only use that in production. (Few people use AOT in dev as I know)

@CardzMania

This comment has been minimized.

Show comment
Hide comment
@CardzMania

CardzMania Oct 13, 2017

We still see material.es5.js + 19 modules in our project
screen shot 2017-10-13 at 4 28 40 pm

"@angular/material": "^2.0.0-beta.12",

Any ideas what we can do to get rid of this or how to debug whats going on?

CardzMania commented Oct 13, 2017

We still see material.es5.js + 19 modules in our project
screen shot 2017-10-13 at 4 28 40 pm

"@angular/material": "^2.0.0-beta.12",

Any ideas what we can do to get rid of this or how to debug whats going on?

@aitboudad

This comment has been minimized.

Show comment
Hide comment
@aitboudad

aitboudad Oct 13, 2017

Contributor

@CardzMania just avoid importing modules from @angular/material:

Before:

import {MatButtonModule} from '@angular/material';

After:

import {MatButtonModule} from '@angular/material/button';
Contributor

aitboudad commented Oct 13, 2017

@CardzMania just avoid importing modules from @angular/material:

Before:

import {MatButtonModule} from '@angular/material';

After:

import {MatButtonModule} from '@angular/material/button';
@CardzMania

This comment has been minimized.

Show comment
Hide comment
@CardzMania

CardzMania Oct 13, 2017

Ohhh, thanks for the quick reply, let me try that. Must have missed it in the comments :(

CardzMania commented Oct 13, 2017

Ohhh, thanks for the quick reply, let me try that. Must have missed it in the comments :(

@CardzMania

This comment has been minimized.

Show comment
Hide comment
@CardzMania

CardzMania Oct 13, 2017

Great, that worked! Had a hiccup along the way and noting here for others, just changing modules is not enough. Do remember to change all imports also:

Before:
import { MatDialogRef } from '@angular/material';

After
import { MatDialogRef } from '@angular/material/dialog';

Search for from '@angular/material' and just get rid of it!

CardzMania commented Oct 13, 2017

Great, that worked! Had a hiccup along the way and noting here for others, just changing modules is not enough. Do remember to change all imports also:

Before:
import { MatDialogRef } from '@angular/material';

After
import { MatDialogRef } from '@angular/material/dialog';

Search for from '@angular/material' and just get rid of it!

@daniele-pecora

This comment has been minimized.

Show comment
Hide comment
@daniele-pecora

daniele-pecora Oct 15, 2017

Can confirm this
Viewings from the webpack-bundle-analyzer
Before
before

After
after

daniele-pecora commented Oct 15, 2017

Can confirm this
Viewings from the webpack-bundle-analyzer
Before
before

After
after

@Lakston

This comment has been minimized.

Show comment
Hide comment
@Lakston

Lakston Dec 12, 2017

Has this been fixed ? Because I am importing from @angular/material and the tree shaking is working properly :

screen shot 2017-12-12 at 08 57 42

Lakston commented Dec 12, 2017

Has this been fixed ? Because I am importing from @angular/material and the tree shaking is working properly :

screen shot 2017-12-12 at 08 57 42

@oliveti

This comment has been minimized.

Show comment
Hide comment
@oliveti

oliveti Dec 12, 2017

Hi,

@Lakston, you can see all the modules but tree shaking should strip out all unused modules.

If I want to make the tree shaking work as expected I have to import the sub-modules like this import { MatDialogModule } from '@angular/material/dialog';

main f99a665aedb758fe3621 bundle js - source map explorer 2017-12-12 12-34-18

Isn't anyway to make it work with importing @angular/material?

oliveti commented Dec 12, 2017

Hi,

@Lakston, you can see all the modules but tree shaking should strip out all unused modules.

If I want to make the tree shaking work as expected I have to import the sub-modules like this import { MatDialogModule } from '@angular/material/dialog';

main f99a665aedb758fe3621 bundle js - source map explorer 2017-12-12 12-34-18

Isn't anyway to make it work with importing @angular/material?

@GeorgeKnap

This comment has been minimized.

Show comment
Hide comment
@GeorgeKnap

GeorgeKnap Dec 12, 2017

@oliveti I agree with @Lakston
here are two of my projects. The first one uses imports from @angular/material the second one uses imports only from specific submodules like @angular/material/dialog.
Note the second one imports more modules -> it's bigger.
ecall-stats
gis_stats

both contains only those modules imported in my custom material.module.ts which means the tree-shaking must be working ok in both of them.
Correct me if I'm wrong.

versions:

@angular/material: 5.0.0
@angular: 5.1.0
@angular/cli: 1.6.0

GeorgeKnap commented Dec 12, 2017

@oliveti I agree with @Lakston
here are two of my projects. The first one uses imports from @angular/material the second one uses imports only from specific submodules like @angular/material/dialog.
Note the second one imports more modules -> it's bigger.
ecall-stats
gis_stats

both contains only those modules imported in my custom material.module.ts which means the tree-shaking must be working ok in both of them.
Correct me if I'm wrong.

versions:

@angular/material: 5.0.0
@angular: 5.1.0
@angular/cli: 1.6.0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment