Angular2の別のngModuleの子ルートとしてngModuleルートを追加するにはどうすればよいですか？

あなたの方法論は正しいです。このアプローチでは、インポートする必要があります子モジュールに親モジュール、 それでおしまい。子モジュールそれは自分のルーティングの世話をします。同様に、ネストされたモジュールを使用している場合は、1つの場所で多数のルートを宣言するのではなく、親ルートでモジュールをインポートする必要があります。

あなたのアプローチは正しいです。ルートをそれぞれのサブモジュールに分割する必要があります。技術的には、ルートがマージされるときに任意のモジュールに移動できますが、おそらく長期的には悪い考えです。

ルートを作ったプランカhttps://plnkr.co/edit/Y9ReEwnBZNId48xX1CDR?p=preview

@Component({
  selector: 'users',
  template: `
    <div>
      <h2>Users</h2>
      <ul><li *ngFor="let user of users">{{user}}</li></ul>
    </div>
  `,
})
export class Users {
  users = ["John", "Joe"];
}

const usersRoutes = [
  {path: 'users', component: Users}
];
const UsersRoutes = RouterModule.forChild(usersRoutes);


@NgModule({
  imports: [ CommonModule, UsersRoutes ],
  declarations: [ Users ],
  exports: [ Users ]
})
export class UsersModule {}

他の人たちから言われたように、私は少しはっきりしたいと思います。 サブモジュールを使用してアプリケーション機能を分割することは非常に優れています。アプリケーションが成長するにつれて、単純なコード構造を維持することが可能になります。

このプロセスを管理する最善の方法は、次のようなフォルダ構造を持つことです。

src
   - featureA
     - featureA.routes.ts
     - fefatureA.module.ts
     - component1
       - component1.ts
       - [...]
     - component2
       - component2.ts
       - [...]
     - [...]

   - featureB
     - featureB.routes.ts
     - fefatureB.module.ts
     - component1
       - component1.ts
       - [...]
     - component2
       - component2.ts
       - [...]
     - [...]

   - [...]

   - app-routing.module.ts
   - app.module.ts

すべてのフィーチャのモジュールで、このparticoularモジュールのルートを宣言します。 ファイルfeature.routes.ts：

const routerConfig: Routes = [
    {
        path: '',
        component: Component1
    },
    {
        path: 'other',
        component: Component2
    }
]

あなたはあなたのフィーチャのモジュールでこのルートをインポートします ファイルfeature.module.ts：

    import { routerConfig } from "./feature.routes";
        @NgModule({
          imports: [ 
            RouterModule.forChild(routerConfig),
          ],
        })
export class FeatureModule{}

最後に行うことは、ルーティングモジュールのすべてのものをインポートすることです。レイジーローディングは、tipicalアプリケーションのパフォーマンスに最適です。

ファイルapp-routing.module.ts：

import { FeatureAModule } from './featureA/featureA.module';
import { FeatureBModule } from './featureB/featureB.module';
    @NgModule({
      imports: [
        RouterModule.forRoot([
          { path: '', loadChildren: ()=> require("./featureA/featureA.module")["FeatureAModule"]},
{ path: 'feature-b', loadChildren: ()=> require("./featureB/featureB.module")["FeatureBModule"]},
        ],  
        { preloadingStrategy: PreloadAllModules}) //Define the loading strategy
      ],
    })
    export class AppRoutingModule {}

そして、ルーティングモジュールをあなたのアプリケーションモジュールにインポートする ファイルapp.module.ts：

import { AppRoutingModule } from './app-routing.module';

@NgModule({
  imports: [
    AppRoutingModule,
  ],
})
export class AppModule {}

ルータの子ではなく、ルート定義でloadChildrenプロパティを使用し、子モジュールを指し示す必要があります（ "＃"で区切られた文字列として、またはモジュールを返す関数として）

あなたのアプローチは正しいです。ユーザモジュールのようなモジュールに特有のルーティングを分割する必要があります。関連するルーティングは、アプリケーションのサイズが増えるにつれて非常に役立ちます。

// main-board routesファイル

  import { RouterModule,Routes } from '@angular/router';

 import {  MainBoardComponent  } from './main-board.component';

  const MainBoardRoutes: Routes = [{
       path: 'app',
       component: MainBoardComponent
  }];
 export const MainBoardRouting = 
 RouterModule.forRoot(MainBoardRoutes); // use for root instead of for child 

あなたが必要なのは、loadChildren

child.module.ts

const childRoutes: Routes = [
    {
        path: '',
        component: ChildComponentA
    },
    {
        path: 'other',
        component: ChildComponentB
    }
]

@NgModule({
    imports: [
        RouterModule.forChild(childRoutes)
    ]
})
class MyChildModule {}

app.module.ts

const appRoutes: Routes = [
    {
        path: 'children',
        // If using a function that returns the Module,
        // it will be "eager-loaded"
        loadChildren: () => MyChildModule
        // When using a string, it will be lazy-loaded
        // loadChildren: './path/to/child.module#MyChildModule'
    }
]

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ]
})
class AppModule {
}

• 遅延ロードの反対はeager-loadingです - fscheidl
• @fscheidl情報のおかげで、私はまだ何とかしていない - borislemke

下の図は、app.moduleとfeatureモジュール用のサンプルルーティングモジュールを示しています。

アプリルーティングモジュールのルーティングファイルには主要ルートが含まれ、フィーチャモジュールのルーティングファイルには子ルートのルートが含まれています。これが結果的に得られるルアーが/ feature / booksであるのを助けることを望む

app-routing.module.ts //これをapp.module.tsにインポートする

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';

export const routes: Routes = [
  { path: 'feature', loadChildren: 'app/feature/feature.module#FeatureModule'},
  { path: '', redirectTo: 'feature', pathMatch: 'full' },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
})

export class AppRoutingModule {
}

feature-routing.module.ts //これをfeature.module.tsにインポートする

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';

// ---- components imported----
import { BooksComponent } from './books/books.component';
import { FeatureComponent } from './feature.component';

const featureRoutes: Routes = [

  {
    path: '',
    component: FeatureComponent,
    children: [
      {path: '', redirectTo: 'books', pathMatch: 'full'},
      {path: 'books', component: BooksComponent},
      {path: '**', redirectTo: 'books', pathMatch: 'full'},
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(featureRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class FeatureRoutingModule {
}

私は最近のプロジェクトでこれを行っています。ここにサンプルがあります

app.routing.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

@NgModule({
imports: [
    RouterModule.forRoot([
        { path: '', loadChildren: '../home/home.module#HomeModule' },
        { path: 'settings', loadChildren: '../settings/settings.module#SettingsModule' },
        { path: 'home', redirectTo: '', pathMatch: 'full' }
    ])
],
exports: [
    RouterModule
]
})
export class AppRoutingModule {  
}

home.module.ts

//all necessary imports

@NgModule({
imports: [
    CommonModule,
    TranslateModule,
    FormsModule,
    RouterModule.forChild([
        {
            path: '', component: HomeComponent, canActivate: [SecureGuard]
        }
    ]),
    ViewCountPipeModule
],
declarations: [
    HomeComponent
],
providers: [
    SecureGuard,
    CommonService
]
})
export class HomeModule {
}

settings.module.ts

//all the necessary imports

@NgModule({
imports: [
    CommonModule,
    TranslateModule,
    FormsModule,
    RouterModule.forChild([
        {
            path: '', component: RouteHolderComponent,
            children: [
                { path: '', redirectTo: 'settings', pathMatch: 'full' },
                { path: 'settings', component: SettingsComponent },
                { path: 'profile', loadChildren: '../profile-settings/profile-settings.module#ProfileSettingsModule' },
                { path: 'account', loadChildren: '../account-settings/account-settings.module#AccountSettingsModule' }
            ], canActivate: [SecureGuard]
        }
    ]),
    RouteHolderModule
],
declarations: [
    SettingsComponent
],
providers: [
    SecureGuard, SettingsService
]
})
export class SettingsModule {
}

RouteHolderModule輸出RouteHolderComponentちょうど<router-outlet></router-outlet>タグを付けてください。