Angular2 如何清理 AppModule

Question

我一直在使用在线教程并创建了一个 'ok' SPA 数据输入应用程序。

我已将它连接到我的 WEB API 很好，但只构建了一个模型，我的 AppModule 已经安静了几行。

我正在考虑并使用当前的方法，我认为 AppModule 将在我完成后变得非常大，难以阅读，甚至可能更难调试。

我是否可能错过了如何构建 Angular2 大型应用程序的要点？

我正在努力在网上找到一个大于 1 个组件的 tutorial/project 以供参考。

下面是我的 app.module.ts 和文件夹结构。

我将 CashMovement、ListComponent 和 DataService 分开，我认为这是很好的做法，但添加另外 10 个不同的数据服务和列表，app.module 将长篇大论。

在我继续之前，请任何人阅读一些他们可以指向我的内容或建议，我理解这些建议是个人意见。

app.module

import './rxjs-operators';

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule }    from '@angular/http';

import { PaginationModule, DatepickerModule, Ng2BootstrapModule, ModalModule, ProgressbarModule, TimepickerModule } from 'ng2-bootstrap/ng2-bootstrap';

import { SlimLoadingBarService, SlimLoadingBarComponent } from 'ng2-slim-loading-bar';


import { AppComponent }   from './app.component';
import { DateFormatPipe } from './shared/pipes/date-format.pipe';
import { HighlightDirective } from './shared/directives/highlight.directive';
import { HomeComponent } from './home/home.component';
import { MobileHideDirective } from './shared/directives/mobile-hide.directive';

import { CashMovementListComponent } from './cashmovements/cashmovement-list.component';
import { CashMovementDataService } from './cashmovements/cashmovement.data.service';

import { routing } from './app.routes';

import { ConfigService } from './shared/utils/config.service';
import { ItemsService } from './shared/utils/items.service';
import { MappingService } from './shared/utils/mapping.service';
import { NotificationService } from './shared/utils/notification.service';

@NgModule({
    imports: [
        BrowserModule,
        DatepickerModule,
        FormsModule,
        HttpModule,
        Ng2BootstrapModule,
        ModalModule,
        ProgressbarModule,
        PaginationModule,
        routing,
        TimepickerModule
    ],
    declarations: [
        AppComponent,
        DateFormatPipe,
        HighlightDirective,
        HomeComponent,
        MobileHideDirective,
        SlimLoadingBarComponent,
        CashMovementListComponent        
    ],
    providers: [
        ConfigService,
        CashMovementDataService,
        ItemsService,
        MappingService,
        NotificationService,
        SlimLoadingBarService
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

文件夹结构

Answer 1

你需要学会使用模块。

我通常将模块分解为这些类型

布局模块
功能模块
核心模块（仅1个）
共享模块（仅1个）
App模块（仅1个）

Layout 模块 用于对应用程序进行布局。例如顶栏模块、侧边菜单模块、页脚模块和主要内容模块。

功能模块。这到底是什么？确实没有明确的定义，但是您认为模块中可以自包含的任何功能区域，您也可以这样做。您会将这些功能模块导入布局模块，因为这些功能构成了不同的布局组件

核心模块。您将在这里导出您的布局模块和所有核心（单例）服务。您只需要 export（而不是导入）模块，因为核心模块中没有任何内容会实际使用这些布局模块。您只需导出它们，以便应用程序模块可以使用它们。核心模块只会导入app模块

共享模块。您将在此处声明所有共享管道、指令和组件。您还可以导出常用模块，如 CommonModule 和 FormsModule。其他模块将使用模块

应用模块。你已经知道这是什么了。在您自己创建的模块中，您唯一需要导入的是共享模块和核心模块。

这是基本布局

共享模块

@NgModule({
  declarations: [ HighlightDirective, SharedPipe, SharedComponent ],
  exports: [ 
    HighlightDirective, SharedPipe, SharedComponent,
    CommonModule, FormsModule
  ]
})
class SharedModule {}

布局模块 注意其他模块将使用 SharedModule

@NgModule({
  imports: [ FeatureAModule, FeatureBModule, SharedModule ]
  declarations: [ TopbarComponent ],
  exports: [ TopbarComponent ]
})
class TopbarModule {}

@NgModule({
  imports: [ SharedModule ]
  declarations: [ SidemenuComponent ],
  exports: [ SidemenuComponent ]
})
class SidemenuModule {
  static forRoot() {   // pattern for adding app-wide services
    return {
      ngModule: SidemenuModule,
      providers: [ MenuSelectionService ]
    }
  }
}

@NgModule({
  imports: [ HomeModule, OtherModule, SharedModuel ]
  declarations: [ MainContentComponent ],
  exports: [ MainContentComponent ]
})
class MainContentModule {}

CoreModule 汇集构成应用程序的所有布局模块。并添加其他应用程序范围内的服务，这些服务与其他模块无关

@NgModule({
  imports: [ SidemeuModule.forRoot() ]
  exports: [ TopbarModule, SidemenuModule, MainContentModule ],
})
class CoreModule {
  static forRoot() {
    return {
      ngModule: CoreModule,
      providers: [ UserService, AuthService ]
    }
  }
}

AppModule

@NgModule({
  imports: [
    BrowserModule,
    SharedModule,
    CoreModule.forRoot(),  // forRoot so we get all the providers
    HttpModule,
    RouterModule.forRoot(APP_ROUTES)
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
class AppModule {}

另请参阅：

Angular docs on using modules。上面可能有你不明白的地方。这一切都在文档中解释
The Angular 2 Style Guide. There's a section on App structure and Angular modules

Angular2 如何清理 AppModule

Angular2 How to clean up the AppModule

components

structure

single-page-application

angular

app.module

文件夹结构