Angular 2包装器项目

时间:2016-11-29 15:57:52

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

我必须开发一个角度2应用程序,它是其他角度2应用程序的包装。

让我们说项目的主要模块叫做MainModule 在npm中部署的其他第三方模块是AppModule1,AppModule2,...... 我可以将它们安装到我的主项目中,使用  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(路由)。我也尝试过使用RouterModule.forRoot(路由)。

路由器配置:

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

1 个答案:

答案 0 :(得分:0)

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

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