How to enable tree-shaking for a new Angular 4 project

Question

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..

Answer 1

Update: From the angular-cli Wiki:

All builds make use of bundling and limited tree-shaking, while --prod builds 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.