Angular 5 router link is NaN

1
votes

I have this router file in angular 5:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login.component';
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
const routes: Routes = [
  {
    path:'login',
    component: LoginComponent,

  },
  {
    path:'forgotpassword',
    component: ForgotPasswordComponent,

  },
  {
    path: '',
    component: LoginComponent,
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: []
})
export class LoginRoutingModule { }

And here is my components html:

<div class="container">

  <div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
    <div class="panel panel-info">
      <div class="panel-heading">
        <div class="panel-title">Sign In</div>
        <div style="float:right; font-size: 80%; position: relative; top:-10px">
          <a [routerLink]="login/forgotPassword">Forgot password?</a>
        </div>
      </div>

      <div style="padding-top:30px" class="panel-body">

        <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>

        <form [formGroup]="loginForm">

          <div style="margin-bottom: 25px" class="input-group">
            <span class="input-group-addon">
              <i class="glyphicon glyphicon-user"></i>
            </span>
            <input id="username" formControlName="username" type="text" class="form-control" name="username" value="" placeholder="username or email"
              >
          </div>

          <div style="margin-bottom: 25px" class="input-group">
            <span class="input-group-addon">
              <i class="glyphicon glyphicon-lock"></i>
            </span>
            <input id="password" formControlName="password" type="password" class="form-control" name="password" placeholder="password">
          </div>
          <div class="input-group">

          </div>
          <div style="margin-top:10px" class="form-group">
            <!-- Button -->
            <div class="col-sm-12 controls">
              <button id="btn-login" [disabled]="!loginForm.valid" (click)='login()' class="btn btn-success">Login </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

When I clikc on forgot password, I see an error:

EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'NaN' Error: Cannot match any routes. URL Segment: 'NaN'

But when I enter the url normally it works:

http://localhost:4200/login/forgotPassword

or

http://localhost:4200/forgotPassword

This should not happen as well, as I want the first url to be valid and to go to forgot password component from login component only.

2
angularroutingroutesangular5
according to your routes, you dont have login/forgotpassword.. U should change it to forgotpassword, or make a child route in login route – dAxx_

2 Answers

3
votes

Wrap your route into '' to make it a string.

[routerLink]="'login/forgotPassword'"
              ^                    ^

or just without []

routerLink="login/forgotPassword"
2
votes

Try below code:

in module:

 {
    path: 'login', component: LoginComponent,
    children: [
      { path: 'forgotPassword', component: ForgotPasswordComponent },
    ]
  }

and in HTML:

[routerLink]='/login/forgotPassword'

OR

routerLink='/login/forgotPassword'