Импорт модулей в 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. Он требует импорта для всех моих компонентов в разных модулях, что для меня кажется бесполезным. Я хотел бы установить маршруты в самих подмодулях. Лучшим решением будет автоматически добавленный префикс для каждого модуля (например, 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 {}