How can I fix my routerLink in my Angular Project

Question

Hello guys I'm learning Angular and we created a HeroesApp but my routerLink doesn't work, I imported and exported my routerModule and I don't know how can I fix it. auth-routing.module.ts auth-routing.module.ts part2 folders

for the moment I tried this other route thinking I had a problem with the route I posted (https://i.stack.imgur.com/aYQDb.png)

Answer 1

Try this

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

Answer 2

Your routerLink is fine. But in auth-routing.module.ts is not setup correctly.

There are two types of routing

1. Normal routing
2. With Lazy loading

Normal routing should be like as below:

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

Lazy loading routing should be like as below:

  const routes: Routes = [
    {
      path: 'customers',
      loadChildren: () =>
      import('./customers/customers.module').then((m) => m.CustomersModule),
    }
  ]

for more details I have created a demo for angular route. it will be helpful for you. stackblitz demo