RouterLink is not working in Angular 6
12,169
write routerLinkActive as bellow..remove those brackets
<li>
<a class="nav-link" [routerLink] = "['/']" routerLinkActive="active">Home</a>
</li>
<li>
<a class="nav-link" [routerLink] = "['/login']" routerLinkActive="active">Login</a>
</li>
official documentation :- https://angular.io/guide/router
Author by
maneesha
I am doing a degree on Computer Science. I am interested in java developing. but um still learning those stuff.
Updated on June 23, 2022Comments
-
maneesha almost 2 years
I was coding watching a Brad Traversy tutorial. and I did exactly as it is said. this is my 'app.module.ts'.
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import {RouterModule, Routes} from '@angular/router'; import { AppComponent } from './app.component'; import { NavbarComponent } from './components/navbar/navbar.component'; import { LoginComponent } from './components/login/login.component'; import { RegisterComponent } from './components/register/register.component'; import { HomeComponent } from './components/home/home.component'; import { ProfileComponent } from './components/profile/profile.component'; import { DashboardComponent } from './components/dashboard/dashboard.component'; const appRoutes: Routes = [ {path:'', component: HomeComponent}, {path:'register', component: RegisterComponent}, {path:'login', component: LoginComponent}, {path:'dashboard', component: DashboardComponent}, {path:'profile', component: ProfileComponent} ] @NgModule({ declarations: [ AppComponent, NavbarComponent, LoginComponent, RegisterComponent, HomeComponent, ProfileComponent, DashboardComponent ], imports: [ BrowserModule, RouterModule.forRoot(appRoutes) // appRoutes: an object ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
this is my navbar component
<li><a class="nav-link" [routerLink] = "['/']" [routerLinkActive]=" ['active']">Home</a></li> <li><a class="nav-link" [routerLink] = "['/login']" [routerLinkActive]=" ['active']">Login</a></li>
I also added
<base href="/">
to the index.html file.
When I remove the RouterLink part the pages are working good.it displays the content inside the components when I give the path in the URL.
I checked in several questions. but I have done everything, I can't find an answer.
-
maneesha almost 6 yearsThank you, bu it didn't work actually. it gave an error: file not found
-
ChrisEenberg almost 6 yearsdid you remember to import { RouterModule, Routes } from '@angular/router'; to the module you are calling routerLink from?
-
ChrisEenberg almost 6 yearsAlso, remove the quotes from routerLinkActive part - I've updated my answer with the new code
-
maneesha almost 6 yearsThank you! I did like that. but I found the solution. actually, it's not an angular error. that's why it didn't show up in the console. the fault was in the bootstrap nav bar classes. when I removed the 'fixed-top' class from <nav>, it started to work
-
maneesha almost 6 yearsThank You for helping :)
-
Admin over 3 yearsIs there a way to activate the modal when we clicked the <a class="nav-link" [routerLink] = "['/login']" routerLinkActive="active" (click)="loginModal()>Login</a> when user click the login it will redirect to login page and open the modal .