Angular Lazy Loading loading same route again

Question

https://stackblitz.com/github/sandypm2020/BookStore

<ul class="leftNav">
  <li>
    <a routerLink="/books">Books</a>
  </li>
  <li>
    <a routerLink="/users">Users</a>
  </li>
</ul>

const routes: Routes = [
  {
    path: 'books',
    loadChildren: () => import('./book/book.module').then((m) => m.BookModule),
  },
  {
    path: 'users',
    loadChildren: () => import('./user/user.module').then((m) => m.UserModule),
  },
  { path: '', pathMatch: 'full', redirectTo: 'books' },
];

Guys I want to use lazy loading I have following routes and URLs. But for some reason when I go to user it loads books route again can someone help why that is happening?

You need to use routerLink instead of href in the anchor tags — Clashsoft
– Clashsoft, Commented Sep 2, 2020 at 21:41

Abolfazl Roshanzamir · Accepted Answer · 2020-09-02 21:42:58Z

3

First: change href to routerLink like the following :

<ul class="leftNav">
        <li>
          <a routerLink="/books">Books</a>
        </li>
        <li>
          <a routerLink="/users">Users</a>
        </li>
  </ul>

Then go to UserModule and add the routes to import section like the following :

@NgModule({
  declarations: [UserListComponent, AddUserComponent, UserEditComponent],
  imports: [CommonModule, RouterModule.forChild(routes)],
})
export class UserModule {}

edited Sep 2, 2020 at 21:42

answered Sep 2, 2020 at 21:23

Abolfazl Roshanzamir

15.1k9 gold badges76 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sandy Pm Over a year ago

Hi @AbolfazlR I tried your suggestion but that's not helping

LittleFuerry · Accepted Answer · 2020-09-02 21:53:43Z

0

I saw stackblitz, No need to import booklist component and user component in app.routing.module.ts, please remove and test again, let me know as well

answered Sep 2, 2020 at 21:53

LittleFuerry

4310 bronze badges

2 Comments

Sandy Pm Over a year ago

Actually above answer fixed it I was missing router import for user module

LittleFuerry Over a year ago

Good, also you can consider above answer as Note then.

Collectives™ on Stack Overflow

Angular Lazy Loading loading same route again

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related