Implement Angular Lazy Loading inside one Module with different components

Question

I'm trying to implement lazy loading in my test application. I have one home/main/app module with an example name - Movies. I've created a new module called Auth with two components - Registration and Login. I want both components to be lazily loaded. Here is my sample code inside 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:

 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. 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. Any idea how this problem can be solved ?

URLMatcher: stackoverflow.com/a/66468311/271450

Jonathan
– Jonathan

2021-03-04 03:54:36 +00:00
Commented Mar 4, 2021 at 3:54 — Jonathan
– Jonathan, Commented Mar 4, 2021 at 3:54

Abhijit · Accepted Answer · 2021-02-19 18:06:32Z

This is not a good way to do that.

Just do it as follow

Update app.module as

 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

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

Collectives™ on Stack Overflow

Implement Angular Lazy Loading inside one Module with different components

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related