是否只使用一个模块？我应该多次分开吗？

Question

目前在我的项目中，我只有AppModule，而且我在其中做了所有事情，而且很容易理解并且很容易进行路由。

它们都在app模块中，但都在自己的文件夹中：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CoreModule } from './core/core.module';
import { Angular2TokenService } from 'angular2-token';
import { RouterModule, Routes } from '@angular/router';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';

import { HttpModule } from '@angular/http';

import { AppRoutingModule } from './app.routing';
import { AppComponent } from './app.component';
import { SignInComponent } from './auth/sign-in/sign-in.component';
import { UpdatePasswordComponent } from './auth/update_password/update_password.component';

import { DashboardComponent } from './dashboard/dashboard.component';
import { FormsModule, ReactiveFormsModule }   from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './shared/material.module';
import { dateFormatPipe } from './shared/date_format.pipe';
import { dateTimeFormatPipe } from './shared/date_time_format.pipe';

import { AuthService } from './shared/auth.service';
import { SnackBarService } from './shared/snackbar.service';
import { ServiceNcmService } from './shared/service_ncm.service';

import { UserCompanyService } from './user_companies/user_company.service';
import { AppInterceptor } from './core/app.interceptor';
import { UserComponent } from './users/user.component';
import { UserService } from './users/user.service';
import { UserDetailsComponent } from './users/user_details/user_details.component';
import { DeleteUserCompanyComponent } from './users/user_details/delete_user_company.component';
import { DeleteUserComponent } from './users/user_details/delete_user.component';
import { ProfileService } from './profiles/profile.service';
import { CompanyNcmComponent } from './company_ncms/company_ncm.component';
import { CompanyNcmService } from './company_ncms/company_ncm.service';
import { CompanyNcmDetailsComponent } from './company_ncms/company_ncm_details/company_ncm_details.component';
import { InsertAllCompanyNcmComponent } from './company_ncms/company_ncm_details/insert_all_company_ncm.component';
import { DeleteCompanyNcmComponent } from './company_ncms/company_ncm_details/delete_company_ncm.component';
import { ChangeStatusCompanyNcmComponent } from './company_ncms/company_ncm_details/change_status_company_ncm.component';
import { DebounceDirective } from './directives/debounce_directive';
import { CompanyCurrencyComponent } from './company_currencies/company_currency.component';
import { CompanyCurrencyService } from './company_currencies/company_currency.service';
import { CompanyCurrencyDetailsComponent } from './company_currencies/company_currency_details/company_currency_details.component';
import { DeleteCompanyCurrencyComponent } from './company_currencies/company_currency_details/delete_company_currency.component';
import { ChangeStatusCompanyCurrencyComponent } from './company_currencies/company_currency_details/change_status_company_currency.component';
import { CurrencyBaseService } from './currency_bases/currency_base.service';
import { CompanySettingComponent } from './company_settings/company_setting.component';
import { CompanySettingService } from './company_settings/company_setting.service';
import { ServiceCompaniesService } from './company_settings/service_companies.service';

import { NcmTaxComponent } from './ncm_taxes/ncm_tax.component';
import { NcmTaxService } from './ncm_taxes/ncm_tax.service';
import { NcmTaxDetailsComponent } from './ncm_taxes/ncm_tax_details/ncm_tax_details.component';
import { NcmTaxHistoricsComponent } from './ncm_taxes/ncm_tax_details/ncm_tax_historics.component';
import { NcmTaxEventsComponent } from './ncm_taxes/ncm_tax_details/ncm_tax_events.component';
import { CurrencyQuotationComponent } from './currency_quotations/currency_quotation.component';
import { CurrencyQuotationService } from './currency_quotations/currency_quotation.service';
import { CurrencyQuotationEventsComponent } from './currency_quotations/currency_quotation_details/currency_quotation_events.component';
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
import { NgxPermissionsModule } from 'ngx-permissions';

@NgModule({
  declarations: [
    AppComponent, SignInComponent, DashboardComponent, UserComponent, 
    UserDetailsComponent, DeleteUserCompanyComponent, DeleteUserComponent,
    CompanyNcmComponent, CompanyNcmDetailsComponent, DeleteCompanyNcmComponent,
    DebounceDirective, ChangeStatusCompanyNcmComponent,
    CompanyCurrencyComponent, CompanyCurrencyDetailsComponent, DeleteCompanyCurrencyComponent,
    ChangeStatusCompanyCurrencyComponent, CompanySettingComponent,
    NcmTaxComponent, NcmTaxDetailsComponent, NcmTaxHistoricsComponent,
    dateFormatPipe, dateTimeFormatPipe, NcmTaxEventsComponent, CurrencyQuotationComponent,
    CurrencyQuotationEventsComponent, InsertAllCompanyNcmComponent,
    UpdatePasswordComponent
  ],
  imports: [
    BrowserModule,
    CoreModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    HttpModule,
    BrowserAnimationsModule,
    MaterialModule,
    ReactiveFormsModule,
    NgxMatSelectSearchModule,
    NgxPermissionsModule.forRoot()
  ],
  providers: [ 
    CurrencyQuotationService, NcmTaxService, 
    CompanySettingService, CurrencyBaseService, 
    CompanyCurrencyService, CompanyNcmService, Angular2TokenService, 
    SnackBarService, ProfileService, HttpClientModule, UserService, 
    AuthService, UserCompanyService, ServiceCompaniesService,
    ServiceNcmService,
  {
    provide: HTTP_INTERCEPTORS,
    useClass: AppInterceptor,
    multi: true,
  }],
  entryComponents: [
    UserDetailsComponent, DeleteUserCompanyComponent, DeleteUserComponent,
    CompanyNcmDetailsComponent, ChangeStatusCompanyNcmComponent,
    DeleteCompanyNcmComponent, CurrencyQuotationEventsComponent,
    CompanyCurrencyDetailsComponent, ChangeStatusCompanyCurrencyComponent,
    DeleteCompanyCurrencyComponent, NcmTaxDetailsComponent,
    NcmTaxHistoricsComponent, NcmTaxEventsComponent, InsertAllCompanyNcmComponent,

  ],
  bootstrap: [AppComponent]
})

export class AppModule {}

是否只使用一个模块？我应该分开吗？

Answer 1

这取决于应用程序的大小。如果你只有很少的组件＆＃34;描述＆＃34;一个功能，保持一个是好的。例如，如果您有一个包含头版，联系页面等的小型公共网站，我就没有理由看到有多个模块。

在大多数常见情况下，Angular用于较大的Web应用程序，通过身份验证，框架设计可以更好地分离模块中的组件以进行封装，延迟加载等。

Answer 2

  

是否只使用一个模块？我应该分开吗？

这个问题就像why don't we write all of the code in a single file?

你说过，

  

易于理解且易于进行路由

嗯，对你来说可能是真的（我对此表示怀疑）。但请记住，您不是主要为计算机编写代码，而是为其他人编写代码。拥有一个庞大的模块会使您的代码库变得复杂化，而其他人很难对其进行调整。

请详细了解Separation of Concerns

Angular模块非常适合SoC。您可以根据需要为应用程序的不同部分提供尽可能多的功能模块。使用小模块可以轻松测试和扩展您的应用程序。此外，您可以轻松使用Angular Lazy Loading Modules。即使您认为不需要，也应该急切地尝试使用延迟加载。它极大地改善了用户体验。

另外，请检查Feature Modules

的角度指南

您已经拥有某种模块化系统（没有NgModule s）

我建议您为每个根文件夹创建NgModule个。即users.module，company_currencies.module等。您的应用程序现在看起来很大，将来将应用程序拆分为不同的模块将会变得更加混乱。