I just created a new Angular 4 project with the CLI: ng new test
The versions:
@angular/cli: 1.0.0
node: 6.10.0
os: win32 x64
@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/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
However, tree-shaking is not working correctly, as my unused class FooBar is still in the main.*.js file.
My sample component TS file (FooBar should not be in the output):
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
export class FooBar {
foo = "hello";
}
I tried to use rollup (like described in the docs) but this didn't work as well...
Is there a simple way to enable tree-shaking? (I expected it to be enabled by default when creating a project via CLI).
Update: I'm using ng build --prod and it's still not shaked..
Update: From the angular-cli Wiki:
All builds make use of bundling and limited tree-shaking, while
--prodbuilds also run limited dead code elimination via UglifyJS.
See below, too.
The Ahead-of-Time (AOT) Compiler
An --prod build defaults to --aot=true now; it has for a while.
There aren't any docs that I have found on the angular.io site that offers a great amount of detail on the exact process of tree-shaking. The Angular CLI has been using webpack for some time now, and there is some information on how that tool does tree-shaking here. UglifyJS seems to be a common theme.
As long as you follow the guidelines in the link above about AOT, you should have good results. If you have difficulty doing an AOT compilation with 3rd party libraries, there is always the risk that the library wasn't written to support AOT. Although, AOT compatibility is expected nowadays.
For tree shaking use ng build --prod --build-optimizer. This way vendor.js and main.js are combined in main.js file. To avoid that you have to add --vendor-chunk=true
Try to do ng build --prod --aot