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

这给了我一个例外

异常：调用节点模块失败，错误：错误：模板解析错误：'router-outlet'不是已知元素： 1.如果'router-outlet'是Angular组件，则验证它是否是此模块的一部分。 2.如果'router-outlet'是Web组件，则将“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中的所有路线。它需要在不同的模块中导入我的所有组件，这对我来说似乎是一团糟。我想在子模块中设置路由。最佳解决方案是为每个模块自动添加前缀（例如第一个模块的 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 {}

Answer 2

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

我的建议是首先开发应用程序，然后查找模块并将其拆分。

在AppModule中导入模块以分离Angular2

2 个答案: