web-dev-qa-db-ja.com

Angular 6-遅延モジュールの子モジュールへのルーティングが機能しない

ルートモジュールが遅延モジュールをロードするルーターリンクのリストを表示するアプリケーションを開発しようとしています。

const appRoutes: Routes = [
{
 path: 'compose',
 component: ComposeMessageComponent,
 outlet: 'popup'
},
{
 path: 'admin',
 loadChildren: 'app/admin/admin.module#AdminModule',
 canLoad: [AuthGuard]
},
{
 path: 'crisis-center',
 loadChildren: 'app/crisis-center/crisis-center.module#CrisisCenterModule',
 data: { preload: true }
}
];

この特定の場合、管理モジュールには、それ自体で宣言されたコンポーネント用の2つのルーターリンクと、別のモジュール（manage-heroes）用の1つのルーターリンクがあります。

const adminRoutes: Routes = [
  {
    path: '',
    component: AdminComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: '',
        canActivateChild: [AuthGuard],
        children: [
          { path: 'crises', component: ManageCrisesComponent },
          {path: 'heroes', component: ManageHeroesComponent},
          { path: '', component: AdminDashboardComponent }
        ]
      }
    ]
  }
];

私はすべてのパスにうまくナビゲートできますが、ヒーローに行き、独自のルートの1つ（たとえば、ゼロ）にナビゲートしようとすると、ページが見つかりません。ヒーローのルーティングは次のようになります。

const manageHeroesRoutes: Routes = [
  {
    path: '',
    component: ManageHeroesComponent,
    children: [
        { path: 'zeroes', component: ManageZerosComponent },
        { path: 'friends', component: ManageFriendsComponent }
    ]
  }
];

管理ルートのヒーローのパスを次のように置き換えた場合：

children: [
  { path: 'crises', component: ManageCrisesComponent },
  {path: 'heroes', loadChildren: 'app/admin/manage-heroes/manage-heroes.module#ManageHeroesModule'},
  { path: '', component: AdminDashboardComponent }
]

ヒーローのルートに問題なくアクセスできます。しかし、ManageHeroesモジュールを遅延ロードせずにアクセスできない理由を理解したいと思います。

ここに私の問題を再現したstackblitzへのリンクがあります https://stackblitz.com/edit/angular-pm9wsz

ありがとう。

angularrouteslazy-loading
5
vanio

ルートパスでコンポーネントを使用する場合、このルートを処理するコンポーネントを定義します。 Angularはそのコンポーネントのみをロードします。あなたの場合、コンポーネントは他のモジュールにありますが、angularは他のモジュールをロードしません。そのルートを含む。

ルートパスの定義で「子ロード」を使用する場合、angularはモジュールとその内部ルートを含むitensを遅延ロードします。

https://angular.io/guide/lazy-loading-ngmodules

0
Rodrigo

あなたの間違いは、crisesとheroesをAdminComponentの子ルートとして見ようとしているものですが、それらはAdminComponentと同じレベルにあります。コードを修正してください：

const adminRoutes: Routes = [
    {
        path: '',
        component: AdminComponent,
        canActivate: [AuthGuard],
    },
    {path: 'crises', component: ManageCrisesComponent},
    {path: 'heroes', component: ManageHeroesComponent}
];

これでangularはベース/ なので

  • adminからAdminComponent
  • admin/crises to ManageCrisesComponent
  • admin/heroes to ManageHeroesComponent

angular子ルートを追加した公式例： https://stackblitz.com/edit/angular-omprkj からの分岐

0
Andrei Zhamoida