Angular 2 个包装器项目

Question

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

假设项目的主模块称为 MainModule 部署在 npm 中的其他第 3 方模块是 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 ]

}) 导出 class MainModule { }

AppModule1,2,3.. 在导入数组中有其 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。

Answer 1

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

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

Angular 2 个包装器项目

Angular 2 wrapper project

router

wrapper

npm

angular-ui-router

angular