在AppModule中导入模块以分离Angular2中的关注点 [英] Import modules in the AppModule for separation of concerns in Angular2

问题描述

类似于 ASP.NET Core JavaScript服务的模板都带有一个称为的模块AppModule .由于我的应用程序分为两个逻辑区域，因此为它们使用两个模块(AreaA，AreaB)似乎是一个好主意.我的想法是将两者都导入到 AppModule 中，包括共享资源(如Pipes)(可能在此处引起麻烦).

Templates like from the ASP.NET Core JavaScript services came with a single module called AppModule. Since my application is divided into two logical areas, It seems a good idea to use two modules (AreaA, AreaB) for them. My idea was to import both in AppModule, including shared ressources like Pipes (which can cause trouble here).

因此出于测试目的，我创建了一个名为 ModuleA

So for testing purpose, I created a Module called 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.如果路由器出口"是Web组件，则将"CUSTOM_ELEMENTS_SCHEMA"添加到该组件的"@ NgModule.schemas"禁止显示此消息.

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.

<路由器出口> 标签在 app.component 中用作主要内容的占位符.但是当我在这样的主应用模块中设置路由时，它就可以工作了

The <router-outlet>tag is used in the app.componentas placeholder for the main content. But its working when I set the routes in the main app module like this

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 ).

This would force me to define all routes in the app.module. It requires imports to all my components across different modules, which seems to be a mess for me. I would like to set the routes in the sub-modules itselfs. The best solution would be an automatically added prefix for each module (like module-a for the first module).

推荐答案

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

这篇关于在AppModule中导入模块以分离Angular2中的关注点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！