Angular 多个组件的延迟加载不起作用

Question

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

它抛出以下错误：

错误错误：未捕获（承诺）：错误：无法匹配任何路由。 URL 段：'admin'

app.routing.ts

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

懒-routing.module.ts

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

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

提前致谢

Answer 1

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

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

或

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

Answer 2

检查我在 site-header.component.ts

中所做的以下更改

NavigateToRoute(pageURL: string) {
    //alert(pageURL);
    if (pageURL == "home") {
      console.log(pageURL);
      this.router.navigate(['home']),
      this.MenuActive = "home";
    }
    else if (pageURL == "admin") {
      console.log(pageURL);
      this.router.navigate(['admin'], {relativeTo: this.route}); // <- this was missing
      this.MenuActive = "admin";
    }
    else if (pageURL == "settings") {
      console.log(pageURL);
      this.router.navigate(['settings'], {relativeTo: this.route});
      this.MenuActive = "settings";
    }
    else if (pageURL == "about") {
      console.log(pageURL);
      this.router.navigate(['about'], {relativeTo: this.route});
      this.MenuActive = "about";
    }
    else if (pageURL == "login") {
      console.log(pageURL);
      this.router.navigate(['login'], {relativeTo: this.route});
    }
  }

查看更新后的示例here

Angular 多个组件的延迟加载不起作用

Angular LazyLoading with multiple component doesn't work

lazy-loading

angular