延迟加载和路径匹配问题答案

【问题标题】：Issue with Lazy Loading and Path matching延迟加载和路径匹配问题
【发布时间】：2017-12-27 12:47:49
【问题描述】：

    // 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 错误：未捕获（承诺中）：错误：无法匹配任何路线。 URL 段：“帐户/登录”错误：无法匹配任何路线。 URL 段：“帐户/登录”

我的模块反映正确...

// 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>

如果有人能破译这个……那将是一个巨大的帮助……我已经在这方面工作了好几个小时了，我所做的每一次更改都会产生相同的输出。

【问题讨论】：

你是如何重定向的？
@Sajeetharan 假设您在询问我在用户未登录时使用的 SessionGuard this._router.navigate(['/account/login']);。
但是我重定向/导航或者直接点击 URL 都没有关系......它仍然返回路径不存在。我必须注释掉'**'路径才能得到错误，否则它只会重定向到错误组件。
你检查下面的答案了吗

标签： angular angular2-routing lazy-loading

【解决方案1】：

你应该使用

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

或通过 URL 导航

this_router.navigateByUrl('/account/login')

【讨论】：

就像我之前所说的，我如何导航到 URL 并不重要。