Angular 具有多个模块的角5布线

我面临使用多个模块配置应用程序路由的问题。 如果可能的话，我想将我的应用程序分离为多个模块，并将它们全部路由到一个路由配置文件中

我有4个模块：

AppModule-应用程序的默认根模块

LoginModule—对LoginComponent执行登录和声明的模块

MainModule—一个共享模块，用于声明基本的应用程序布局组件，如页眉、页脚、侧菜单等

As400screensModule-此模块声明应出现在应用程序布局中的组件，并通过url和

标记选择要加载的组件 让我们从我的app.routing.ts文件开始

export const routes: Routes = [
  { path: '', component: LoginComponent, pathMatch: 'full' },
  { path: 'app', component: MainComponent, canActivate: [OLAuthGuard],
       children: [
        { path: 'inventory-and-purchasing-menu', component: InventoryAndPurchasingMenuComponent },
        { path: 'main-menu', component: MainMenuComponent },
        { path: 'inventory-management', component: InventoryManagementComponent },
        { path: 'items', component: ItemsComponent },
      ]
  },
];

@NgModule({
  imports: [
    NgbModule,
    FormsModule,
    CommonModule,
    RouterModule.forRoot(routes),
  ],
  declarations: [
  ],
  exports: [RouterModule],
  providers: [],
  bootstrap: []
})


export class AppRoutingModule {

}

myapp.component.html

<router-outlet></router-outlet>
<app-preloader></app-preloader>

myAS400屏幕.Module.ts

@NgModule({
  imports: [
    NgbModule,
    FormsModule,
    CommonModule,
    As400screensModule,
    MfrpcModule
  ],
  declarations: [HeaderComponent, FooterComponent, OLSideMenuComponent,
    BreadcrumbsComponent, PreloaderComponent, MainComponent, TestComponent, TestChildComponent],
  exports: [ HeaderComponent, FooterComponent, OLSideMenuComponent,
    BreadcrumbsComponent, PreloaderComponent, MainComponent,TestComponent, TestChildComponent],
  providers: [],
  bootstrap: []
})

export class MainModule {

}

export const as400screensRoutes: Routes = [
  {path: 'inventory-and-purchasing-menu', component: InventoryAndPurchasingMenuComponent},
  {path: 'main-menu', component: MainMenuComponent},
  {path: 'inventory-management', component: InventoryManagementComponent},
  {path: 'items', component: ItemsComponent},
];

@NgModule({
  imports: [
    NgbModule,
    FormsModule,
    CommonModule,
    RouterModule.forChild(as400screensRoutes)
  ],
  declarations: [
    MainMenuComponent,
    InventoryManagementComponent,
    ItemsComponent,
    InventoryAndPurchasingMenuComponent
  ],
  exports: [
    RouterModule,
    MainMenuComponent,
    InventoryManagementComponent,
    ItemsComponent,
    InventoryAndPurchasingMenuComponent],
  providers: [],
  bootstrap: []
})

export class As400screensModule {

}

@NgModule({
  declarations: [AppComponent],
  imports: [
    AppRoutingModule, // default app routing module
    LoginModule,
    MainModule,
    BrowserModule,
    FormsModule,
    HttpClientModule,
    CommonModule,
    AngularWebStorageModule,
    NgbModule.forRoot(),
  ],
  exports: [],
  providers: [OLConfig, OLHttpService, OLUtils, OLAppService, OLAuthGuard, OLAuthGuardService, OLConstants],
  bootstrap: [AppComponent],
})

export class AppModule {
}

我的应用程序模块.ts

@NgModule({
  imports: [
    NgbModule,
    FormsModule,
    CommonModule,
    As400screensModule,
    MfrpcModule
  ],
  declarations: [HeaderComponent, FooterComponent, OLSideMenuComponent,
    BreadcrumbsComponent, PreloaderComponent, MainComponent, TestComponent, TestChildComponent],
  exports: [ HeaderComponent, FooterComponent, OLSideMenuComponent,
    BreadcrumbsComponent, PreloaderComponent, MainComponent,TestComponent, TestChildComponent],
  providers: [],
  bootstrap: []
})

export class MainModule {

}

export const as400screensRoutes: Routes = [
  {path: 'inventory-and-purchasing-menu', component: InventoryAndPurchasingMenuComponent},
  {path: 'main-menu', component: MainMenuComponent},
  {path: 'inventory-management', component: InventoryManagementComponent},
  {path: 'items', component: ItemsComponent},
];

@NgModule({
  imports: [
    NgbModule,
    FormsModule,
    CommonModule,
    RouterModule.forChild(as400screensRoutes)
  ],
  declarations: [
    MainMenuComponent,
    InventoryManagementComponent,
    ItemsComponent,
    InventoryAndPurchasingMenuComponent
  ],
  exports: [
    RouterModule,
    MainMenuComponent,
    InventoryManagementComponent,
    ItemsComponent,
    InventoryAndPurchasingMenuComponent],
  providers: [],
  bootstrap: []
})

export class As400screensModule {

}

@NgModule({
  declarations: [AppComponent],
  imports: [
    AppRoutingModule, // default app routing module
    LoginModule,
    MainModule,
    BrowserModule,
    FormsModule,
    HttpClientModule,
    CommonModule,
    AngularWebStorageModule,
    NgbModule.forRoot(),
  ],
  exports: [],
  providers: [OLConfig, OLHttpService, OLUtils, OLAppService, OLAuthGuard, OLAuthGuardService, OLConstants],
  bootstrap: [AppComponent],
})

export class AppModule {
}

我的问题是我需要在as400screensModule中配置as400screensRoutes，但在app.routing.ts中我已经声明了路由 对于所有应用程序。 如果我删除as400screensRoutes，我将得到错误

“router-outlet”不是已知元素：

来自main组件.ts。 我尝试使用模块并在不同的位置导入它们，但唯一可行的方法是在as400screensModule中声明as400screensRoutes，并使用app.routing.ts中已定义的路由

是否有办法仅在app.routing.ts中配置路由？

---

也许我把事情复杂化了，所以希望得到反馈，我正在以正确的方式配置路由。

导入

RouterModule

到

main模块。由于您正在
main组件
中使用路由器插座，该组件是
main模块
的一部分，因此可以将
RouterModule
导入
main模块
。因为您正在使用
main组件中的路由器插座
，它是
main模块的一部分
谢谢@stojevskimilan！这就是问题所在。很高兴帮助您检查
CoreModule
您还可以更好地构建
AppModule
。这是你的文件