javascript - 在 AppModule 中导入模块以实现 Angular2 中的关注点分离

Question

类似 ASP.NET Core JavaScript services 的模板附带一个名为 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 {}

这给了我一个异常(exception)

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

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