レイジーロードとパスマッチングに関する問題

Question

// App Routes 
export const ROUTES: Routes = [ 
    { path: '',     redirectTo: 'home', pathMatch:'full' }, 
    { path: 'account',   loadChildren: './app/account/account.module#AccountModule' }, 
    { path: 'enterprise',  loadChildren: './app/company/company.module#CompanyModule' }, 
    { path: 'home',    component: DashboardComponent,  canActivate:[SessionGuard] }, 
    { path: 'profile',   component: ProfileComponent, canActivate:[SessionGuard] }, 
    { path: 'user/:username', component: UserComponent,  canActivate:[SessionGuard] },  
    { path: '**',    component: ErrorComponent } 
]; 
// Account Routes 
export const ACCOUNT_ROUTES: Routes = [ 
    { 
     path: '', 
     component: AccountComponent, 
     outlet: 'account', 
     children: [ 
      { path: 'forgot', component: ForgotComponent}, 
      { path: 'login', component: LoginComponent}, 
      { path: 'register', component: RegisterComponent}, 
     ] 
    } 
]; 

// Company Routes 
export const COMPANY_ROUTES: Routes = [ 
    { 
     path: 'compnay', 
     component: CompanyComponent, 
     outlet: 'account', 
     children: [ 
      { path: 'about', component: AboutComponent}, 
      { path: 'careers', component: CareersComponent}, 
     ] 
    } 
]; 

レイジーロードモジュールを使用したルーティングに問題があります。エラーは、このようにプリントアウトされます。

core.js:1427 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'account/login' Error: Cannot match any routes. URL Segment: 'account/login'

は私のモジュールが正しく反映...

// App Module 
@NgModule({ 
    bootstrap: [ AppComponent ], 
    declarations: [ 
    AppComponent, 
    ... 
    ], 
    imports: [ 
    ... 
    CompanyModule, 
    AccountModule, 

    RouterModule.forRoot(ROUTES, { 
     useHash: Boolean(history.pushState) === false, 
     preloadingStrategy: PreloadAllModules 
    }) 
    ], 
    providers: [ 
    SessionGuard, 
    ... 
    ] 
}) 
export class AppModule {} 

// Account Lazy Module 
@NgModule({ 
    imports: [ 
     RouterModule.forChild(ACCOUNT_ROUTES) 
    ], 
    declarations: [ 
     AccountComponent, 
     ... 
    ],  
    bootstrap: [AccountComponent] 
}) 
export class CompanyModule {} 

// Company Lazy Module 
@NgModule({ 
    imports: [ 
     RouterModule.forChild(COMPANY_ROUTES) 
    ], 
    declarations: [ 
     CompanyComponent, 
     ... 
    ],  
    bootstrap: [CompanyComponent] 
}) 
export class CompanyModule {} 

は私はまた、各モジュールの上にルートを表示するためのルータのコンセントを使用しています。

// app level 
<router-outlet></router-outlet> 

// account level 
<router-outlet name="account"></router-outlet> 

// company level 
<router-outlet name="company"></router-outlet> 

誰もがこれを解読することができたら...大きな助けになります...私は今、時間これをしてきた、と私が作るすべての変更は、同じ出力を生成します。

Answer 1

あなたがリダイレクトされているか

this._router.navigate(['account', 'login']) 

またはnavigatebyURL

this_router.navigateByUrl('/account/login')