複数のモジュールを使用した角度5のルーティング

Question

複数のモジュールを使用してアプリケーションのルーティングを設定する際に問題が発生しています。 私はアプリケーションを多くのモジュールに分け、可能であればすべてのモジュールを1つのルーティング設定ファイルに入れたいと思っています。

私は4つのモジュールがあります。

1. AppModule - アプリ
2. のLoginModuleのデフォルトルートモジュール - 基本的なアプリのレイアウトを宣言共有モジュール - ログインを実行し、LoginComponent
3. MainModuleに宣言するモジュールをヘッダー、フッター、サイドメニューなどのコンポーネント。
4. As400screensModule - このモジュールは、URLと<router-outlet>タグでロードするコンポーネントを選択するルーティングをアプリレイアウト内に表示するコンポーネントを宣言します。

のは、私の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 { 

} 

私app.component.html

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

最初から始めましょう、ルータは、ログインページに行く必要があり、ログインが成功した後、MainMenuComponentを使って子ルーティングからロードする必要がある '/ app/main-menu'にナビゲートします。

問題は、異なるモジュールの子コンポーネントをロードするMainComponentの<router-outlet>タグを使用するときに始まります。

私MainComponent.html

<app-header></app-header> 
<div class="ol-body"> 
    <app-side-menu></app-side-menu> 
    <div class="container"> 
    <router-outlet></router-outlet> 
    </div> 
</div> 
<app-footer></app-footer> 

私main.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 { 

} 

私as400screens.Module.ts

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 { 

} 

私のapp.module.ts

@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' is not a known element:がMainComponent.tsから取得されます。 私はモジュールで遊んで、別の場所でそれらをインポートしようとしましたが、動作させる唯一の方法は、app400screensModuleでapp400screensRoutesを宣言し、app.routing.tsに既に定義されているルートで宣言することでした。

app.routing.tsにのみルートを設定する方法はありますか？ 多分私は物事を複雑にしているので、正しい方法でルーティングを設定しているというフィードバックを得ることを願っています。

Answer 1

インポートRouterModuleからMainModuleです。 MainComponentのルータコンセントを使用しているので、MainModule