i am using angular 7 when routerLink not working when i click on anchor button it's not working

Question

in angular 7 i have define different component app folder and define component in route is well when i definde router name in url it,s work fine show me that component which is attached to that url but when i define that rout name in anchor tag click on anchor it,s not working here is my html code

<li class="nav-item">
  <a class="nav-link" routerLink="/home">Home</a>
</li>
<li class="nav-item @@about">
  <a class="nav-link" routerLink="/about">About</a>
</li>
<li class="nav-item @@blog">
  <a class="nav-link" routerLink="/blog">BLOG</a>
</li>

this is my router

const routes: Routes = [{
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'about',
    component: AboutComponent
  },
  {
    path: 'blog',
    component: BlogComponent
  },
];

Answer 1

If your anchor tag is not becoming blue that means routerLink is not binded with anchor tag. It is because you have not imported RouterModule.

Note : You have to import RouterModule in the the module where you have declared this component where you are adding routerLink and not in the app.module.ts. For example : if you have home.component.ts in home.module.ts and you want to use <a [routerLink]="[/student]"></a> in home.component.html then add RouterModule in home.module.ts

import {RouterModule} from '@angular/router';
@NgModule(
{ 
  ...
   import:[
     ...
       RouterModule
     ...
   ]
  ...
}
)

Answer 2

In my angular 9 case, the component with links, was declared in a Shared Module. The RouterModule was in the parent module. So the routerLink did not work.

It worked when I imported the RouterModule in the Shared Module also.

In case you are using ng serve, you may have to restart it.