Simple Angular 9项目编译整个Angular材质（es2015为esm2015）

我创建了一个简单的Angular 9项目，只有几个简单的组件。我使用以下方法添加了角度材质：

ng add @angular/material

完成后，我运行了npm start并注意到它开始编译整个@angular，其中包含一堆我在应用程序中没有使用的@angular/material/*组件：

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

我的问题是：为什么会这样？为什么需要这样做

在我的项目中加入@angular/material之前，在运行npm start时不必发生类似的事情。这是我的app.module.ts：

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

---

在tsconfig.json中，位于：

• lib数组添加es2015
• es2015的目标变更

---

希望它对您有用。

这是ngcc编译器，它为您导入的模块准备了常春藤。这是正常的。这并不意味着所有这些组件最终都会出现在您的应用程序中-不用担心！感谢您的回答@MikeOne-但是这不会延长产品构建过程吗？“导入的模块”是什么意思？事实上，我并没有在任何地方导入它们中的大多数，只有在构建过程位于单独的CI管道中时，才会在package.jsonDepends中将材质声明为依赖项。它只执行一次此过程（对于每个新安装的软件包）。如果您想了解更多，这是一篇很好的文章：并且回答了构建过程的问题-是的，构建是在CI工具中触发的，每次执行该步骤都需要稍长的时间，但是，构建的其余部分会稍快一些。我看不到v8和v9之间在构建时间上有多大的差异……很好，谢谢！：）