在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 {}