时间戳

首页 > 解决方案 > 具有多个组件的 Angular LazyLoading 不起作用

angular - 具有多个组件的 Angular LazyLoading 不起作用

问题描述

我是 Angular 的新手。我正在尝试使用多个组件实现延迟加载。它的延迟加载主页组件正确，但无法加载其他组件。

它抛出以下错误：

ERROR 错误：未捕获（在承诺中）：错误：无法匹配任何路由。URL 段：“管理员”

app.routing.ts

{
   path: '',
   component: SiteLayoutComponent,
   children: 
   [
      {
        path: 'home',
        loadChildren: './lazymodules/lazy.module#LazyModule',
      },
   ]},

惰性路由.module.ts

const routes: Routes = [
  {
    path: '', component: HomeComponent,
  }
   ,
   {
     path: 'admin', component: AdminComponent,
   },
  { path: 'settings', component: SettingsComponent },
  { path: 'about', component: AboutComponent }];

我在stackblitz创建了类似的示例应用程序。任何人都请在这里。

提前致谢

标签： angularlazy-loading

解决方案

将您的导航代码（在站点头文件中）替换为 -

this.router.navigateByUrl('/home/admin');

或者

this.router.navigate(['home/admin']);

推荐阅读