如何在 angular 中正确延迟加载组件？

Question

我在 Angular 中遇到了一些简单的路由管理问题：我有第一个模块：

import { NgModule } from '@angular/core';
import { Routes } from '@angular/router';
import { RouterModule } from '@angular/router';
import { LayoutComponent } from './ui/components/layout/layout.component';


const routes: Routes = [{ path: '**',
     component: LayoutComponent,
     children: [    { path: '', redirectTo: '/posts', pathMatch: 'full'},
    { path: 'posts',loadChildren: './posts/posts.module#PostsModule' }] }];

@NgModule({
  imports: [RouterModule.forRoot(routes)
     ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

以及应该显示简单 "it works" 组件的 "PostModule" :

import { NgModule } from '@angular/core';\n
import { Routes } from '@angular/router';\n
import { RouterModule } from '@angular/router';
import { PostsComponent } from './containers/posts/posts.component';
import { ProfileComponent } from './containers/profile/profile.component';

const routes: Routes = [{ path: '', component: PostsComponent },{ path: ':profileId', component: ProfileComponent },];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PostsRoutingModule { }

但是路线

的none

http://localhost:4200/posts/

http://localhost:4200/posts/1

显示预期内容

我想我错过了一些简单的东西，我的 app.component 看起来像这样：

   <router-outlet>
      <router-outlet></router-outlet>
   </router-outlet>

我看过"lazy loading"上的一些帖子，但是我写的东西和我到现在为止所学的似乎是连贯的，错误在哪里？

Answer 1

您使用的是哪个 Angular 版本？您尝试过以下方法吗？

const routes: Routes = [{
  path: '**',
  component: LayoutComponent,
  children: [
    { path: '', redirectTo: '/posts', pathMatch: 'full' },
    { path: 'posts', loadChildren : () => import('./posts/posts.module').then(x => x.PostsModule) }
  ]
}];

更新：

路由器添加到路由器出口的组件是在外部router-outlet下面添加的，因此在内部添加一些东西是没有意义的。

需要将内部 router-outlet 移动到 LayoutComponent 组件中，由路由器添加。

Answer 2

首先尝试执行以下操作：

   <router-outlet>
      <p>Layout Component loaded</p>
      <router-outlet></router-outlet>
   </router-outlet>

然后，如果您的着陆页中写了某些内容，请将第二个路由器插座放入您的 LayoutComponent。

为了在一个模板中并排使用多个出口，您需要使用命名路由器出口。

Answer 3

问题似乎出在您构建路由的方式上。应该这样配置：

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      { path: 'posts', loadChildren: './posts/posts.module#PostsModule' }
    ]
  },
  { path: '**', redirectTo: '/', pathMatch: 'full' }
];

"path: '**'"的想法是处理您在浏览器中输入的任何未定义的路由（即/hello-world）并重定向到根目录或您选择的任何其他定义的路由。

所以按照您定义的方式，路由始终捕获导航并显示 LayoutComponent。

如何在 angular 中正确延迟加载组件？

How to properly lazyload component in angular?

lazy-loading

angular

angular-load-children