Angular 2 包装器项目答案

【问题标题】：Angular 2 wrapper projectAngular 2 包装器项目
【发布时间】：2017-04-13 16:57:12
【问题描述】：

我必须开发一个 Angular 2 应用程序，它是其他 Angular 2 应用程序的包装器。

假设项目的主模块称为 MainModule 部署在 npm 中的其他 3rd 方模块是 AppModule1、AppModule2、... 我可以使用“npm i appmodule1”等将它们安装到我的主项目中。

这是我的代码：

import {AppModule1} from 'ThirdPartyLibrary/AppModule1';
import {AppModule2} from 'ThirdPartyLibrary/AppModule2';
import {AppModule3} from 'ThirdPartyLibrary/AppModule3';

（也导入其余模块） ..（可以说我做了这个动态）

@NgModule({
imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    RouterModule.forRoot(routes),
    AppModule1,AppModule2,..(lets say I made this dynamic)
],
declarations: [
    MainComponent
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
providers: [
    AnyMainModuleService,
    {provide: LocationStrategy, useClass: HashLocationStrategy}
],
bootstrap: [ MainComponent ]

}) 导出类 MainModule { }

AppModule1,2,3.. 在 imports 数组中有它的 RouterModule.forChild(routes)。我也尝试使用 RouterModule.forRoot(routes)。

路由器配置：

{ path: '', redirectTo: 'AppComponent1' },
{ path: 'appcomponent1', component: AppComponent1 },
{ path: 'appcomponent2', component: AppComponent2 },
{ path: 'appcomponent3', component: AppComponent3 },
{ path: 'appcomponent4', component: AppComponent4, children: childRoutesOfAppModule4enter code here },

AppModule4 中的路由器配置

 export const routes: Routes = [
        { path: '', redirectTo: 'home'},
        { path: 'home', component: HomeComponent },
        { path: 'about', component: AboutComponent}
    ];

问题是 AppModule4 的路由器配置应该是主组件的子路由，它覆盖了主路由器。

我一进入 localhost 我就看到了 AppComponent1 但我得到了 HomeComponent。

【问题讨论】：

标签： angular npm angular-ui-router wrapper router

【解决方案1】：

{ path: 'appcomponent4', component: AppComponent4, loadChildren: () => AppModule4}

使用它来导入路由器模块并在 AppModule4 中安装路由作为 RouterModule.forChild(routes)

【讨论】：