具有根级导入的 Angular2 应用程序模块答案

【问题标题】：Angular2 app module with root level imports具有根级导入的 Angular2 应用程序模块
【发布时间】：2016-08-26 06:37:57
【问题描述】：

根级别的导入不应该在全局范围内可用（全局是指所有子模块和组件）吗？

我有以下根/应用程序模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { appRouterProviders, routing } from './app.routes';
import { DashboardModule } from './dashboard/dashboard.module';
import { DecisionModule } from './decision/decision.module';
import { MdCoreModule }           from '@angular2-material/core';
import { MdButtonModule }         from '@angular2-material/button';
import { MdCardModule }           from '@angular2-material/card';
import { MdListModule }           from '@angular2-material/list';
import { MdSidenavModule }        from '@angular2-material/sidenav';
import { MdToolbarModule }        from '@angular2-material/toolbar';
import { MdIconModule }           from '@angular2-material/icon';

@NgModule({
  declarations: [
    AppComponent                    
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    HttpModule,
    RouterModule,    
    routing,
    DashboardModule,
    MdCoreModule,
    MdButtonModule,
    MdCardModule,
    MdListModule,
    MdSidenavModule,    
    MdToolbarModule,
    MdIconModule
  ],
  providers: [
    appRouterProviders
  ],
  entryComponents: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {

}

如果我尝试在其中一个子模块中使用它们不显示的材料元素，则子模块如下所示：

import { NgModule }               from '@angular/core';
import { CommonModule }           from '@angular/common';
import { FormsModule }            from '@angular/forms';
import { dashboardRouting }       from './dashboard.routes';
import { DashboardComponent }     from './dashboard.component';
import { ActionsDialogComponent } from './actions-dialog';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    dashboardRouting,    
  ],
  declarations: [
    DashboardComponent,
    ActionsDialogComponent    
  ],
  providers: [    
  ]
})
export class DashboardModule {}

但是，如果我在它们显示的子模块中导入材料模块。这是材料设计组件工作时子模块的样子：

import { NgModule }               from '@angular/core';
import { CommonModule }           from '@angular/common';
import { FormsModule }            from '@angular/forms';
import { dashboardRouting }       from './dashboard.routes';
import { DashboardComponent }     from './dashboard.component';
import { ActionsDialogComponent } from './actions-dialog';
import { MdCoreModule }           from '@angular2-material/core';
import { MdButtonModule }         from '@angular2-material/button';
import { MdCardModule }           from '@angular2-material/card';
import { MdListModule }           from '@angular2-material/list';
import { MdSidenavModule }        from '@angular2-material/sidenav';
import { MdToolbarModule }        from '@angular2-material/toolbar';
import { MdIconModule }           from '@angular2-material/icon';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    dashboardRouting,
    MdCoreModule,
    MdButtonModule,
    MdCardModule,
    MdListModule,
    MdSidenavModule,    
    MdToolbarModule,
    MdIconModule,
  ],
  declarations: [
    DashboardComponent,
    ActionsDialogComponent    
  ],
  providers: [    
  ]
})
export class DashboardModule {}

如果材质模块已经在根级导入，为什么还要在子级再次导入？

【问题讨论】：

你的模块应该是可重用的。为什么使用您的模块的任何人都需要将各种模块导入他的根模块？这只会让你的模块更难重用。
哦等等……这是真的。谢谢。

标签： angular angular2-material

【解决方案1】：

Angular 的文档令人困惑，他们在几个方面声明您在根模块中导入的模块 (app.module.ts) 是全局可用的，但除非您仔细阅读（等等），否则不会很快发现的是，当您使用子模块时它打破了这种继承，一个子模块为组件创建了自己的应用程序域（不是服务，服务仍然是全局的，至少我阅读它的方式是这样）。这也是为什么如果你像我一样，我注意到一些我必须导入到我的子模块中的项目，而另一些我没有真正让我感到困惑的原因。这是 angular.io 上讨论这个的部分：NgModule.html

还有一点值得一提：我认为在 Angular2 中开发，因为 RC5+ 意味着我需要将所有功能打包到模块中，但事实并非如此。除非您想使用延迟加载或特别希望与他人共享代码，例如 npm 包，否则我们在日常使用 Angular2 的日常工作中构建模块并不是真正必要的。

【讨论】：

“我注意到一些项目我必须导入到我的子模块中，而另一些我没有，这让我很困惑。” - 很长一段时间都用这个打破了我的大脑。很好的解释。
脑洞大开。这让我在尝试使用角度材料模块时感到头疼。谢谢！
感谢您的解释。我已经坚持了好几天了。在我将声明从全局移动到模块级别后它起作用了。
这只是帮助我在 2022 年构建 Angular 10。非常感谢。

【解决方案2】：

在 Angular2 组件的概念中，没有什么比您所指的“根级别”更重要。
组件是模块化的部分，非常类似于 Java（或任何高级语言）项目中的类 - 您还可以在其中导入您使用的每个类。
它们可以相互嵌套或使用，但每个组件仍然需要导入自己的依赖项。
请注意，在 Angular2 中导入与在 Angular 1 中包含外部模块/库是一种非常不同的方法（然后基本上在 index.html 中为每个依赖项添加一个新引用）。
Angular 2 中的那些导入首先存在，因为 Typescript 编译器需要知道您的组件中使用了什么（因此增加了一些执行错误检查的能力）
编译和打包的构建应该只包含每个依赖项一次（前提是所有内容都配置正确）。

【讨论】：