Javascript 在AppModule中导入模块以分离Angular2中的关注点

类似于的模板附带了一个名为

AppModule

的模块。由于我的应用程序分为两个逻辑区域，因此最好为它们使用两个模块（AreaA、AreaB）。我的想法是在

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

它像这样导入到

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

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

    ])
]

这给了我一个例外

异常：调用节点模块失败，错误：错误：模板 分析错误：“路由器出口”不是已知元素： 1.如果“路由器出口”是一个角度组件，则确认它是该模块的一部分。 2.如果“router outlet”是一个Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到此组件的“@NgModule.schemas”中 以抑制此消息

标记在

应用程序组件中用作主要内容的占位符。但当我在主应用程序模块中像这样设置路由时，它就起作用了

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

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）
 如果您有许多功能，并且希望在应用程序模块中分离，请使用功能模块。
共享模块是应用程序之间的通用功能模块。
核心模块是将应用程序模块进一步拆分为仅特定于应用程序模块的模块

我的建议是，首先开发应用程序，然后寻找模块并将其拆分。
您是否已经在angular中开发了功能模块和共享模块？我想这就是您想要的。您忘记在导入数组中添加RouterModule。。这应该对你有用..这给了我一个
DI错误
。但你的暗示是对的。我发现
RouterModule
必须被
RouterModule.forRoot（[]）
替换才能解决此问题。
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 {}