[英]Implement Angular Lazy Loading inside one Module with different components
I'm trying to implement lazy loading in my test application.我正在尝试在我的测试应用程序中实现延迟加载。 I have one home/main/app module with an example name - Movies.
我有一个带有示例名称的 home/main/app 模块 - 电影。 I've created a new module called Auth with two components - Registration and Login.
我创建了一个名为 Auth 的新模块,其中包含两个组件 - 注册和登录。 I want both components to be lazily loaded.
我希望两个组件都被延迟加载。 Here is my sample code inside app-routing.module.ts
这是我在 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 },
];
And my Auth module with the implemented lazy loading:还有我的 Auth 模块,实现了延迟加载:
const routes: Routes = [
{ path: '', pathMatch: 'full', component: RegisterComponent },
{ path: '', pathMatch: 'full', component: LoginComponent }
];
The problem is that when I navigate to http://localhost:4200/register everything is OK and I see the Registration Form.问题是,当我导航到 http://localhost:4200/register 时,一切正常,我看到了注册表。 However, when I go to http://localhost:4200/login I see again the same Registration form again and the Login Component with it's form is not displaying properly.
但是,当我从 go 到 http://localhost:4200/login 再次看到相同的注册表单时,带有它的登录组件的表单显示不正确。 Any idea how this problem can be solved?
知道如何解决这个问题吗?
This is not a good way to do that.这不是一个好方法。
Just do it as follow只需按照以下方式进行
Update app.module
as 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 },
];
and auth2.module
as和
auth2.module
作为
const routes: Routes = [
{ path: 'register', pathMatch: 'full', component: RegisterComponent },
{ path: 'login', pathMatch: 'full', component: LoginComponent }
];
Now access registration
page as http://localhost:4200/auth/register
and login
page as http://localhost:4200/auth/login
现在访问
registration
页面http://localhost:4200/auth/register
和login
页面http://localhost:4200/auth/login
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.