在AppModule中導入模塊以分離Angular2中的問題

Question

與ASP.NET Core JavaScript services類似的模板附帶了一個名爲AppModule的模塊。由於我的應用程序分爲兩個邏輯區域，因此對它們使用兩個模塊（AreaA，AreaB）似乎是個好主意。我的想法是導入AppModule，包括像Pipes這樣的共享資源（這可能會導致麻煩）。

所以對於測試目的，我創建了一個名爲ModuleA

import { HomeComponent } from './home/home.component'; 
import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { UniversalModule } from 'angular2-universal'; 

@NgModule({ 
    declarations: [ 
     HomeComponent 
    ], 

    imports: [ 
     UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. 

     RouterModule.forChild([ 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
      { path: 'home', component: HomeComponent }, 
     ]) 
    ] 
}) 

export class ModuleAModule {} 

它在AppModule進口這樣

import { ModuleAModule } from './module-a/module-a.module'; 
import { NavMenuComponent } from './shared/navmenu/navmenu.component'; 
import { AppComponent } from './shared/app/app.component'; 
import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { UniversalModule } from 'angular2-universal'; 

@NgModule({ 
    bootstrap: [ AppComponent ], 
    declarations: [ 
     AppComponent, 
     NavMenuComponent 
    ], 

    imports: [ 
     UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. 
     ModuleAModule 
    ] 
}) 

export class AppModule {} 

模塊這給了我一個異常

Exception: Call to Node module failed with error: Error: Template parse errors: 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, then verify that it is part of this module. 2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

的<router-outlet>標記用於app.component作爲主要內容的佔位符。但是，它的工作，當我設置的路線主要應用模塊在這樣

imports: [ 
    UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. 
    ParentAreaModule, 
    RouterModule.forRoot([ 
     {path: 'home',component:HomeComponent} 

    ]) 
] 

這將迫使我來定義app.module所有路由。它需要跨越不同模塊導入我的所有組件，這對我來說似乎是一團糟。我想在子模塊本身設置路由。最好的解決方案是爲每個模塊自動添加前綴（如模塊-a爲第一個模塊）。

Answer 1

如果您有很多功能並希望在應用程序模塊中分離，請使用功能模塊。共享模塊是您的應用程序之間常見功能的模塊。 核心模塊是進一步將應用程序模塊拆分爲僅針對應用程序模塊的模塊的模塊。

我的建議是首先開發應用程序，然後查找模塊並將其拆分。

Answer 2

import { ModuleAModule } from './module-a/module-a.module'; 
import { NavMenuComponent } from './shared/navmenu/navmenu.component'; 
import { AppComponent } from './shared/app/app.component'; 
import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { UniversalModule } from 'angular2-universal'; 

@NgModule({ 
    bootstrap: [ AppComponent ], 
    declarations: [ 
     AppComponent, 
     NavMenuComponent 
    ], 

    imports: [ 
     UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. 
     ModuleAModule, 
     RouterModule 
    ] 
}) 

export class AppModule {}