在一个具有不同组件的模块内实现 Angular Lazy Loading

问题描述

我正在尝试在我的测试应用程序中实现延迟加载。我有一个带有示例名称的 home/main/app 模块 - 电影。我创建了一个名为 Auth 的新模块，其中包含两个组件 - 注册和登录。我希望两个组件都被延迟加载。这是我在 app-routing.module.ts 中的示例代码

  const routes: Route[] = [
      { path: 'movies',component: MoviesComponent,resolve: { homepageMovies: HomepageMoviesResolver } },{ path: 'movies/search',component: SearchedMoviesComponent },{ path: 'movies/:id',component: MovieDetailsComponent,resolve: { singleMovie: SingleMovieResolver } },{ path: 'register',loadChildren: () => import('./auth2/auth2.module').then(m=>m.Auth2Module) },{ path: 'login',loadChildren: () => import('./auth2/auth2.module').then(m=>m.Auth2Module)},{ path: '',pathMatch: 'full',redirectTo: 'movies' },{ path: '**',component: PageNotFoundComponent },];

我的 Auth 模块实现了延迟加载：

 const routes: Routes = [
  { path: '',component: RegisterComponent },component: LoginComponent }  
 ];

问题是当我导航到 http://localhost:4200/register 时一切正常，我看到了注册表。但是，当我转到 http://localhost:4200/login 时，我再次看到相同的注册表单，并且带有该表单的登录组件未正确显示。知道如何解决这个问题吗？

解决方法

这不是一个好方法。

就按照下面的做

将 app.module 更新为

 const routes: Route[] = [
      { path: 'movies',component: MoviesComponent,resolve: { homepageMovies: HomepageMoviesResolver } },{ path: 'movies/search',component: SearchedMoviesComponent },{ path: 'movies/:id',component: MovieDetailsComponent,resolve: { singleMovie: SingleMovieResolver } },{ path: 'auth',loadChildren: () => import('./auth2/auth2.module').then(m=>m.Auth2Module) },{ path: '',pathMatch: 'full',redirectTo: 'movies' },{ path: '**',component: PageNotFoundComponent },];

和 auth2.module 为

const routes: Routes = [
 { path: 'register',component: RegisterComponent },{ path: 'login',component: LoginComponent }  
];

现在以 registration 身份访问 http://localhost:4200/auth/register 页面 和 login 页为 http://localhost:4200/auth/login