web-dev-qa-db-ja.com

Angular 6デフォルトルートがロードされていません。これを修正するにはどうすればよいですか？

私はangular 6プロジェクトを次のように構成しています...

src
|- app
|  |- core
|  |  |- layout.component.ts/html/scss
|  |  |- core.module.ts
|  |- views
|  |  |- modules
|  |  |  |- sample
|  |  |  |  |- sample.component.ts/html/scss
|  |  |  |  |- sample-routing.module.ts
|  |  |  |  |- sample.module.ts
|- app.component.ts/html/scss
|- app-routing.module.ts
|- app.module.ts

...サンプルモジュールのルーティング構造は次のようになります...

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: SampleComponent
      }
    ]
  }
];

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

...そしてアプリルーティングモジュールは...

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: '',
        redirectTo: 'sample',
        pathMatch: 'full'
      },
      {
        path: 'sample',
        loadChildren: './views/sample/sample.module#SampleModule'
      }
    ]
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

私が気付いている動作は、アプリを提供するときに、layout componentであるはずのデフォルトの基本ルートが読み込まれないことです。代わりに、コンソールにエラーのない白い画面が表示されます。次に、http://localhost:4200/sampleと入力すると、正しい動作が得られます。それでも、サンプルモジュールを含むレイアウトコンポーネントをロードする必要がある最初のリダイレクトは発生していません。 app.component.htmlには<router-outlet></router-outlet>とlayout.component.htmlがあり、私が認めるよりも長い間、これを理解しようとしてきました。おそらく、レイアウトコンポーネントの場所は私が思っているよりも重要なので、アプリモジュールに登録する必要がありますか？

angularangular6angular-routerangular-module
5
yul-dev

RouterModuleをインポートし、routesを同じプロジェクト内の古い無関係のモジュールで、デフォルトルートで定義しました。何かのようなもの...

const routes = {
  {
     path: '',
     component: RandomComponent
  }
}
...
imports: [RouterModule.forChild(routes)]
...

それを削除すると、実装しようとしていたルーティングが修正されました。 Angularいくつかの熱心な場所を登録しようとしていたに違いありません。正直に言うと、ちょっと馬鹿げています。答えてくれた人に感謝します！

1
yul-dev

これは、遅延ロードされたルートでredirectToが無視される問題のようです。

どちらの方法でも、お持ちの構成を使用して、子ルート自体の中でリダイレクトを行うことができます。

sample.routing

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        redirectTo: 'sample',
        pathMatch: 'full'
      },
      {
        path: 'sample',
        component: SampleComponent,
      },

    ]
  }
];

そしてapp.routing

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: '',
        loadChildren: './views/sample/sample.module#SampleModule'
      }
    ]
  }
];
0
Amit Chigadani

子パスは親パスと同じです

 path: '',
component: LayoutComponent,
children: [
  {
    path: '/sample',//changed this 
    redirectTo: 'sample',
    pathMatch: 'full'
  }
0
Vaibhav Kumar Goyal