1

来自ASP.NET Core JavaScript 服务的模板带有一个名为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）。

4

2 回答 2

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 {}
于 2017-02-11T17:39:28.270 回答
0

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

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

于 2017-02-11T16:38:46.120 回答