4

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
  • 145
  • 2
  • 4
  • 12

2 Answers2

2

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

RamAnji
  • 470
  • 3
  • 12
  • Is there a way to activate the modal when we clicked the Login when user click the login it will redirect to login page and open the modal . –  Oct 20 '20 at 13:45
0

Update: To improve on my answer. What you're trying to do is call a directive by adding [routerLink] with braces around. Then passing it a string which will evaluate as javascript to a route. This will not work, so you need to pass it valid javascript, e.g. an array of routes.

Try removing the slash and quotes from the routerlink like this:

 <li><a class="nav-link" [routerLink]=['/'] [routerLinkActive]=['active']>Home</a></li>
 <li><a class="nav-link" [routerLink]=['/login'] [routerLinkActive]=['active']>Login</a></li>

As described here:

Feel free to comment if this doesn't work and I will update my answer.

Kind regards Chris

ChrisEenberg
  • 773
  • 1
  • 5
  • 19
  • Thank you, bu it didn't work actually. it gave an error: file not found – maneesha Jun 15 '18 at 13:38
  • did you remember to import { RouterModule, Routes } from '@angular/router'; to the module you are calling routerLink from? – ChrisEenberg Jun 15 '18 at 13:40
  • Also, remove the quotes from routerLinkActive part - I've updated my answer with the new code – ChrisEenberg Jun 15 '18 at 13:42
  • 1
    Thank 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 – maneesha Jun 15 '18 at 14:48
  • Thank You for helping :) – maneesha Jun 15 '18 at 16:40