Angular2 router and navigate

Question

I am facing one issue regarding angular2 routing. Here is my package.json with latest version of angular 2.0.0-rc.4.

When I open my url with example.com/admin/login, Its working and show me login page. That is ok. Then I filled correct email and password it goes on dashboad with same.

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "start": "npm run tsc:w"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "^3.0.0-beta.2",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "angular2-cookie": "^1.2.2",  
    "angular2-in-memory-web-api": "0.0.14",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4"
  }
}

I have put my first "router-outlet" in app.component.ts. Now login with this url like: example.com/admin/login. It is working fine.

app.component.ts

import { Component }          from '@angular/core';
import { ROUTER_DIRECTIVES, RouterOutlet }  from '@angular/router';
import { CookieService } from 'angular2-cookie/core';

@Component({
  selector: 'admin-app',
  template: `
    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES, RouterOutlet],
  providers: [CookieService],
  precompile: [AppComponent]
})
export class AppComponent {
}

login.route.ts

import { RouterConfig }          from '@angular/router';
import { LoginComponent }     from './components/login.component';
import { ForgotComponent }     from './components/forgot.component';
import { AuthGuard }     from './services/auth.guard';
import { AuthService }     from './services/auth.service';
import { CookieService } from 'angular2-cookie/core';

export const AuthRoutes: RouterConfig = [
    { path: 'login', component: LoginComponent },
    { path: 'forgot', component: ForgotComponent}
];

export const AUTH_PROVIDERS = [AuthGuard, AuthService, CookieService];

After filled up correct user credential and click on "Sign In" button my "checklogin" function will call. In this function I redirect my page on dashboard but the page reload with this url "example.com/admin/dashboard?". Why "?" concate at the last of url? Why this problem occur ?

login.component.ts

import {Component, provide} from '@angular/core';
import { ROUTER_DIRECTIVES, Router } from '@angular/router';
import { FormBuilder, Validators, Control, ControlGroup, FORM_DIRECTIVES } from '@angular/common';
import 'rxjs/Rx';
import { CookieService } from 'angular2-cookie/core';

import { AdminFormValidator } from '../../common/validations/adminform.validator';
import { AuthService } from '../services/auth.service';

@Component({
    templateUrl: '/templates/admin/auth/login.html',
    directives: [ROUTER_DIRECTIVES],
    providers: [AuthService, CookieService],
    precompile: [LoginComponent]
})

export class LoginComponent { 

    form: ControlGroup;
    email: Control;
    password: Control;
    getData: string;

    constructor(private builder: FormBuilder, private _authService: AuthService, private _cookieService:CookieService, public router: Router) {

        this.email = new Control("", Validators.compose([Validators.required, AdminFormValidator.checkEmail, AdminFormValidator.startsWithNumber]));
        this.password = new Control("", Validators.compose([Validators.required]));

        this.form = builder.group({
            email:  this.email,
            password:  this.password
        });
    }   

    checkLogin(){
        var submitData = this._authService.checkLogin(this.form.value);
        console.log(this._authService.getLoginUserInfo());
        this.router.navigateByUrl('dashboard');
    }
}

admin.component.ts

import {Component} from '@angular/core';
import { Router, ROUTER_DIRECTIVES, RouterOutlet } from '@angular/router';

import { HeaderComponent } from './header.component';
import { LeftComponent } from './left.component';
import { FooterComponent } from './footer.component';

@Component({
    template: `
        <router-outlet></router-outlet>
      `,
    directives: [ROUTER_DIRECTIVES, RouterOutlet, HeaderComponent, LeftComponent, FooterComponent],
    precompile: [AdminComponent]
})
export class AdminComponent { 
    constructor() {}
}

dashboard.route.ts

import { RouterConfig }          from '@angular/router';
import { AuthGuard }          from './../auth/services/auth.guard';
import { AdminComponent }     from './../common/components/admin.component';
import { DashboardComponent }     from './components/dashboard.component';

export const DashboardRoutes: RouterConfig = [
    { path: '', component: AdminComponent,
        children: [
            { path: '', component: DashboardComponent },
            { path: 'dashboard', component: DashboardComponent }
        ]
    }
];

Thanks in advanced.

Just curious, why are you using this.router.navigateByUrl('dashboard'); and not something like this.router.navigate(['/dashboard']) ? — Pytth

Akshay Rao Akshay Rao · Accepted Answer · 2016-07-14T12:22:21

This is because you are making a children route of admin component so it will take the path till admin as a base path and append or concate the further path in it...

This is why when u redirect your page on dashboard the page reload with this url "example.com/admin/dashboard

this is what you were looking for :)

Angular2 router and navigate

1 Answers