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

Question

像来自ASP.NET核心JavaScript服务的模板一样，带有一个名为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 {}

这给了我一个例外

例外:调用节点模块失败，错误:错误:模板解析错误：“路由器-出口”不是已知的元素: 1。如果“路由器-出口”是一个角组件，那么验证它是该模块的一部分。2.如果‘路由器-出口’是一个网络组件，然后添加"CUSTOM_ELEMENTS_SCHEMA“到该组件的'@NgModule.schemas‘，以抑制此消息。

<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中的所有路由。它需要跨不同模块对我的所有组件进行导入，这对我来说似乎一团糟。我想设置子模块itselfs中的路由。最好的解决方案是为每个模块自动添加前缀(就像模块--第一个模块的)。

Answer 1

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

Answer 2

如果您有许多功能，并且希望在您的应用程序模块中分离，请使用功能模块。共享模块是应用程序之间常见的功能模块。核心模块是将应用程序模块进一步划分为仅针对应用程序模块的东西的模块。

我的建议是先开发应用程序，然后寻找模块并将它们分开。