Simple Angular 9 project compiles whole Angular Material (es2015 as esm2015)

Question

I've created a simple Angular 9 project with only few simple components. I've added angular material using:

ng add @angular/material

And after I've done it I run npm start and noticed it started to compile the whole @angular with a bunch of @angular/material/* components that I don't use in my app:

Compiling @angular/cdk/keycodes : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Compiling @angular/cdk/collections : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/cdk/observers : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/cdk/platform : es2015 as esm2015
Compiling @angular/cdk/accordion : es2015 as esm2015
Compiling @angular/cdk/portal : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/cdk/bidi : es2015 as esm2015
Compiling @angular/cdk/a11y : es2015 as esm2015
Compiling @angular/cdk/text-field : es2015 as esm2015
Compiling @angular/cdk/layout : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/cdk/stepper : es2015 as esm2015
Compiling @angular/cdk/table : es2015 as esm2015
Compiling @angular/cdk/tree : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/cdk/scrolling : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/cdk/clipboard : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/cdk/drag-drop : es2015 as esm2015
Compiling @angular/cdk/overlay : es2015 as esm2015
Compiling @angular/material/core : es2015 as esm2015
Compiling @angular/material/expansion : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/material/divider : es2015 as esm2015
Compiling @angular/material/button : es2015 as esm2015
Compiling @angular/material/sort : es2015 as esm2015
Compiling @angular/material/form-field : es2015 as esm2015
Compiling @angular/material/icon : es2015 as esm2015
Compiling @angular/material/tooltip : es2015 as esm2015
Compiling @angular/material/dialog : es2015 as esm2015
Compiling @angular/material/badge : es2015 as esm2015
Compiling @angular/material/card : es2015 as esm2015
Compiling @angular/material/button-toggle : es2015 as esm2015
Compiling @angular/material/bottom-sheet : es2015 as esm2015
Compiling @angular/material/select : es2015 as esm2015
Compiling @angular/material/checkbox : es2015 as esm2015
Compiling @angular/material/input : es2015 as esm2015
Compiling @angular/material/chips : es2015 as esm2015
Compiling @angular/material/autocomplete : es2015 as esm2015
Compiling @angular/material/grid-list : es2015 as esm2015
Compiling @angular/material/icon/testing : es2015 as esm2015
Compiling @angular/material/list : es2015 as esm2015
Compiling @angular/material/paginator : es2015 as esm2015
Compiling @angular/material/progress-spinner : es2015 as esm2015
Compiling @angular/material/menu : es2015 as esm2015
Compiling @angular/material/progress-bar : es2015 as esm2015
Compiling @angular/material/radio : es2015 as esm2015
Compiling @angular/material/datepicker : es2015 as esm2015
Compiling @angular/material/sidenav : es2015 as esm2015
Compiling @angular/material/slider : es2015 as esm2015
Compiling @angular/material/slide-toggle : es2015 as esm2015
Compiling @angular/material/snack-bar : es2015 as esm2015
Compiling @angular/material/stepper : es2015 as esm2015
Compiling @angular/material/table : es2015 as esm2015
Compiling @angular/material/toolbar : es2015 as esm2015
Compiling @angular/material/tabs : es2015 as esm2015
Compiling @angular/material/tree : es2015 as esm2015

My question is: why it happened? Why does that need to happen?

Before having @angular/material in my project nothing like that had to happen on running npm start. Here is my app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
    ParentCompComponent,
    ChildCompComponent,
    MainComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    MatButtonModule,
    MatToolbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is the ngcc compiler preparing your imported modules for Ivy. This is normal. It doesn’t mean all those components will end up in you application - no worries! — MikeOne, Apr 19 '20 at 12:51
thank you for answer @MikeOne - however is this not going to extend prod build process? and what do you mean by "imported modules"? in fact I havent imported most of them anywhere, only declared material as dependency in package.json — Maciej Tułaza, Apr 19 '20 at 14:05
Depends if you build process is in a seperate CI pipeline. It only does this process once (for every newly installed package). If you want to know more about it, this is a good article: https://dev.to/eugeniolentini/an-introduction-to-angular-9-ivy-compiler-177n — MikeOne, Apr 19 '20 at 14:13
@MikeOne so I understand it happens because Angular 9 introduced Ivy compiler enabled by default, right? it compiles es2015 code to esm2015? what esm2015 is? I will read the art you linked, thanks! — Maciej Tułaza, Apr 19 '20 at 14:16
and answering the build process question - yes, build is triggered in CI tool, everytime from scratch — Maciej Tułaza, Apr 19 '20 at 14:31
Yeah that step takes slightly longer, however, the rest of the build is slightly faster. I'm not seeing that much difference in build times between v8 and v9.. — MikeOne, Apr 19 '20 at 14:34

score 17 · Answer 1 · answered Oct 01 '20 at 16:01

17

In tsconfig.json at the:

lib array add es2015.
Target change to es2015

Hope it works for you.

answered Oct 01 '20 at 16:01

Liviu Mihaianu

289
3
13

Simple Angular 9 project compiles whole Angular Material (es2015 as esm2015)

1 Answers1