Angular2での問題の分離のためにAppModule内のモジュールをインポート

Question

ASP.NET Core JavaScript servicesのようなテンプレートには、AppModuleという1つのモジュールが付属しています。私のアプリケーションは2つの論理領域に分割されているので、2つのモジュール（AreaA、AreaB）を使用することをお勧めします。私の考えは、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>を与えたことは、この

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

ようAppModuleにインポートしています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 {} 

と呼ばれるモジュールを作成しましたタグはで使用されていますメインコンテンツのプレースホルダとしてしかし、私はこの

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

    ]) 
] 

のような主要なアプリモジュールにルートを設定し、その作業時にこれがapp.module内のすべてのルートを定義するために私を強制します。それは、私の混乱のように思われる、異なるモジュール間のすべてのコンポーネントへのインポートを必要とします。サブモジュール自体のルートを設定したいと思います。最良の解決策は、各モジュール（例えば、モジュール、最初のモジュールの場合はなど）に自動的に追加された接頭辞です。

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