角度4：（約束で）キャッチされない：フォールバックルート（pathMatchは）フォールバックURLに正しく、エラーをリダイレクトしませんエラー：

Question

私はすべてがある

const appRoutes: Routes = [ 
    { path: '', redirectTo: '/', pathMatch:'full'}, 
    { path: '', component: MainComponent }, 
    { path: 'signin', component:SigninComponent}, 
    { path: 'signup', component: SignupComponent}, 
    { path: 'dashboard', component: DashboardComponent, 
    children: [ 
     { path: '', redirectTo:'/dashboard/overview', pathMatch: 'full'}, 
     { path: 'overview', component: OverviewCampaignsComponent }, 
     { path: 'active', component: ActiveCampaignsComponent}, 
     { path: 'history', component: HistoryCampaignsComponent} 
    ] } 

] 

ルータオブジェクト次ている任意のルートを照合することができませんredirectToを含むルートを除いて正常に動作します。私は例/ダッシュボード/ dsadadasdasd3213のために入力した場合、私は/ asdasdqweqweを入力した場合、私は私が同様のエラーを取得し、コンソール

core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard/dsadadasdasd3213' Error: Cannot match any routes. URL Segment: 'dashboard/dsadadasdasd3213'

にエラーが発生します。ここで何が間違っているようですか？どうもありがとうございました！

Answer 1

がより理解するためのコードの下に見つけてくださいフォールバックルート

{ path: '**', redirectTo: 'session/404' }

を追加...

export const AppRoutes: Routes = [ 
    { path: '', redirectTo: 'dashboard', pathMatch: 'full'}, 
    // users routes 
    { 
    path: '', 
    component: AdminLayoutComponent, 
    children: [ 
     { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' }, 
     { path: 'containers', loadChildren: './containers/containers.module#ContainersModule' }, 
     { path: 'groupcontainers', loadChildren: './group-containers/group-containers.module#GroupContainersModule' }, 
     { path: 'mypublickeys', loadChildren: './public-keys/public-keys.module#PublicKeysModule' }, 
     { path: 'myservers', loadChildren: './my-servers/my-servers.module#MyServersModule' }, 
     { path: 'group', loadChildren: './group/group.module#GroupModule' }, 
     { path: 'admin', loadChildren: './admin/admin.module#AdminModule'} 
    ], 
    canActivate: [AuthGuardService] 
    }, 
    // non authentication routes 
    { 
    path: '', 
    component: AuthLayoutComponent, 
    children: [ 
     { path: '', loadChildren: './session/session.module#SessionModule'} 
    ] 
    }, 
    { path: '**', redirectTo: 'session/404' } 
]; 

Answer 2

は、コンポーネントError404Componentを扱う404エラーを作成し、すべてのパスと一致するように、ワイルドカードでのパスを追加してみてくださいこれは指定されていないので、次のようにそのルートに移動します。

const appRoutes: Routes = [ 
     { path: '', redirectTo: '/', pathMatch:'full'}, 
     { path: '', component: MainComponent }, 
     { path: 'signin', component:SigninComponent}, 
     { path: 'signup', component: SignupComponent}, 
     { path: 'dashboard', component: DashboardComponent, 
     children: [ 
      { path: '', redirectTo:'/dashboard/overview', pathMatch: 'full'}, 
      { path: 'overview', component: OverviewCampaignsComponent }, 
      { path: 'active', component: ActiveCampaignsComponent}, 
      { path: 'history', component: HistoryCampaignsComponent} 
      { path: '**', component: Error404Component} 
     ] } 

    ]