How to imperatively route to empty URL in angular 2?

Question

I have a component responsible to handle the empty urlcase:

const loginRoutes: Routes = [
  { path: '',  component: LoginComponent }
];

The user is routed to authenticated area after a successful login.

this.router.navigate(["/secured"]);

When the user clicks on Sign out, after performing a server side logout I try the following:

this.router.navigate([""])

This does not route back to LoginComponent, instead the entire application is reloaded, after a 3-5 second delay.

I also have an application level routing file containing the following:

const appRoutes: Routes = [
  { path: '**',   redirectTo: '', pathMatch: 'full' }
];

I found the root cause: http://stackoverflow.com/questions/38120756/angular2-router-navigate-refresh-page — kmansoor, Mar 01 '17 at 22:57

elmiomar · Answer 1 · 2017-03-01T20:46:06.687

I cannot comment so I will write this as an answer. Can you try this?

edit base on comment: Since login component is in its own module (I will call it Child module). Try this:

Simply add {path: '', loadChildren: 'app/child/child.module#ChildModule'}

const appRoutes: Routes = [
  { path: '**',   redirectTo: '', pathMatch: 'full' },
  { path: '', loadChildren: 'app/child/child.module#ChildModule'}
];

and in the Child Module:

imports: [
    RouterModule.forChild([
        {
            path: '',
            component: LoginComponent
        }
    ])
]

Ideally, you would do:

Define ChildRoutingModule:

import {NgModule}     from '@angular/core';
import {RouterModule} from '@angular/router';
@NgModule({
imports: [
    RouterModule.forChild([
        {
            path: '',
            component: LoginComponent
        }
    ])
],
exports: [
    RouterModule
]
})
export class ChildRoutingModule {}

In the ChildModule:

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {LoginComponent} from './login.component';
@NgModule({
imports: [
    CommonModule,
    ChildRoutingModule
],
declarations: [
    LoginComponent
]
})
export class ChildModule {}

In the AppRoutingModule:

import {NgModule}     from '@angular/core';
import {RouterModule} from '@angular/router';
@NgModule({
imports: [
    RouterModule.forRoot([
        {path: '**', redirectTo: '', pathMatch: 'full'},
        {path: '', loadChildren: 'app/child/child.module#ChildModule'}
    ])
],
exports: [
    RouterModule
]
})
export class AppRoutingModule {}

and finally in the app Module:

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';

@NgModule({
imports: [
    BrowserModule,
    AppRoutingModule
],
declarations: [
    AppComponent
],
bootstrap: [AppComponent]
})
export class AppModule {}

Hope this helps!

@Omarllias, LoginComponent is housed in it's own module, which I import in the root application level module. — kmansoor, Mar 01 '17 at 20:21

How to imperatively route to empty URL in angular 2?

1 Answers1