Angular2 router (@angular/router), how to set default route?

Question

How can I set a default route in my @Routes route metadata collection? If you use the angular2 router from @angular/router-deprecated you define the routes in @routeConfig object, which is a collection of route objects, but these route objects have more attributes on them. For instance they have 'name' and 'useAsDefualt' attributes whereas the routes defined out of @angular/router do not. I would like to write my new app using the new router, but how do i use the new router and set a default route?

This is my main app component which defines my routes:

import { Component } from '@angular/core';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ConfigManagerComponent } from './configManager/configManager.component';
import { ApplicationMgmtComponent } from './applicationMgmt/applicationMgmt.component';
import { MergeComponent } from './merge/merge.component';

import { ROUTER_DIRECTIVES, Routes } from '@angular/router';


@Component({
    selector: 'app-container',
    templateUrl: 'app/app.component.html',
    directives: [ROUTER_DIRECTIVES]
})

@Routes([

        { path: '/Dashboard', component: DashboardComponent },
        { path: '/ConfigManager', component: ConfigManagerComponent },
        { path: '/Merge', component: MergeComponent },
        { path: '/ApplicationManagement', component: ApplicationMgmtComponent }
])

export class AppComponent { }

The route definitions seem to be working fine, when I click on anchor tags like this one:

<li class="nav hidden-xs"><a [routerLink]="['./Dashboard']">Dashboard</a>/li>

It transitions to the associated route. My only issue is that when my app loads it doesn't have a route active. How do i define a default route that is active when my app bootstraps?

Thanks!

Günter Zöchbauer · Accepted Answer · 2018-01-18 14:54:54Z

191

V2.0.0 and later

See also see https://angular.io/guide/router#the-default-route-to-heroes

RouterConfig = [
  { path: '', redirectTo: '/heroes', pathMatch: 'full' },
  { path: 'heroes', component: HeroComponent,
    children: [
      { path: '', redirectTo: '/detail', pathMatch: 'full' },
      { path: 'detail', component: HeroDetailComponent }
    ] 
  }
];

There is also the catch-all route

{ path: '**', redirectTo: '/heroes', pathMatch: 'full' },

which redirects "invalid" urls.

V3-alpha (vladivostok)

Use path / and redirectTo

RouterConfig = [
  { path: '/', redirectTo: 'heroes', terminal: true },
  { path: 'heroes', component: HeroComponent,
    children: [
      { path: '/', redirectTo: 'detail', terminal: true },
      { path: 'detail', component: HeroDetailComponent }
    ] 
  }
];

RC.1 @angular/router

The RC router doesn't yet support useAsDefault. As a workaround you can navigate explicitely.

In the root component

export class AppComponent {
  constructor(router:Router) {
    router.navigate(['/Merge']);
  }
}

for other components

export class OtherComponent {
  constructor(private router:Router) {}

  routerOnActivate(curr: RouteSegment, prev?: RouteSegment, currTree?: RouteTree, prevTree?: RouteTree) : void {
    this.router.navigate(['SomeRoute'], curr);
  }
}

edited Jan 18, 2018 at 14:54

answered Jun 3, 2016 at 4:13

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

cobolstinks Over a year ago

When i try to use Rotuer in the constructor Typescript complains about not finding "Router". Do i need to import this?

Günter Zöchbauer Over a year ago

You need to import any type used in your file. If you add Router as type to any variable or parameter, you need to import it.

cobolstinks Over a year ago

Yeah right after I posted I tried this: import { ROUTER_DIRECTIVES, Routes, Router } from '@angular/router'; seems to work now, thanks!

Gerard Simpson Over a year ago

You are missing a closing curly bracket on this line: { path: '', redirectTo: '/heroes', pathMatch: 'full', I cannot add it because edits must be at least 6 characters, please add it

Ced Over a year ago

@GünterZöchbauer it was an error on my side. When there is an hash fragment and one calls window.location.hash = '' prior navigation, it won't navigate at all (DefaultStrategy).

|

Nguyen · Accepted Answer · 2016-06-03 03:29:44Z

19

You set path of route is ''. Example for DashboardComponent is load first.

@Routes([
        { path: '', component: DashboardComponent },
        { path: '/ConfigManager', component: ConfigManagerComponent },
        { path: '/Merge', component: MergeComponent },
        { path: '/ApplicationManagement', component: ApplicationMgmtComponent }
])

Hope it help you.

answered Jun 3, 2016 at 3:29

Nguyen

4238 silver badges18 bronze badges

2 Comments

tchelidze Over a year ago

notice that, on load, app will navigate to DashboardComponent but URL will be empty instead of /dashboard

cobolstinks Over a year ago

Thank you for supplying this approach. The only thing im hesitant about is that the route isn't explicitly referenced in the url. I would like to maintain the /Dashboard suffix on the url. But otherwise this would work really well.

Hiran · Accepted Answer · 2017-08-01 06:25:21Z

11

In Angular 2+, you can set route to default page by adding this route to your route module. In this case login is my target route for the default page.

{path:'',redirectTo:'login', pathMatch: 'full' },

answered Aug 1, 2017 at 6:25

Hiran

1,20011 silver badges19 bronze badges

Comments

Eddy Ferreira · Accepted Answer · 2018-08-30 20:59:44Z

6

according to documentation you should just

{ path: '**', component: DefaultLayoutComponent }

on your app-routing.module.ts source: https://angular.io/guide/router

answered Aug 30, 2018 at 20:59

Eddy Ferreira

8008 silver badges14 bronze badges

1 Comment

Ramp Over a year ago

quick note, the order in which the path is set is important.

JustBaron · Accepted Answer · 2018-05-16 12:51:41Z

4

Suppose you want to load RegistrationComponent on load and then ConfirmationComponent on some event click on RegistrationComponent.

So in appModule.ts, you can write like this.

RouterModule.forRoot([
      { 
        path: '', 
        redirectTo: 'registration', 
        pathMatch: 'full'
       },
       { 
        path: 'registration', 
        component: RegistrationComponent
       },
      {
        path : 'confirmation',
        component: ConfirmationComponent
      }
    ])

OR

RouterModule.forRoot([
       { 
        path: '', 
        component: RegistrationComponent
       },
      {
        path : 'confirmation',
        component: ConfirmationComponent
      }
    ])

is also fine. Choose whatever you like.

edited May 16, 2018 at 12:51

JustBaron

2,3437 gold badges25 silver badges37 bronze badges

answered May 16, 2018 at 12:08

Alok Ranjan

1,09713 silver badges12 bronze badges

Comments

Cody Gray · Accepted Answer · 2017-09-10 15:52:15Z

3

The path should be left blank to make it default component.

{ path: '', component: DashboardComponent },

edited Sep 10, 2017 at 15:52

Cody Gray♦

246k53 gold badges512 silver badges591 bronze badges

answered Jan 19, 2017 at 5:27

Bimal Kharel

492 bronze badges

1 Comment

teenage vampire Over a year ago

Right, if you want to redirect to app component, use { path: ' ', component: AppComponent},

Jayant Patil · Accepted Answer · 2017-12-05 06:27:27Z

3

I faced same issue apply all possible solution but finally this solve my problem

export class AppRoutingModule {
constructor(private router: Router) {
    this.router.errorHandler = (error: any) => {
        this.router.navigate(['404']); // or redirect to default route
    }
  }
}

Hope this will help you.

answered Dec 5, 2017 at 6:27

Jayant Patil

1,5872 gold badges11 silver badges18 bronze badges

Comments

Sameh · Accepted Answer · 2020-03-27 04:37:38Z

I just faced the same issue, I managed to make it work on my machine, however the change I did is not the same way it is mentioned in the documentation so it could be an issue of angular version routing module, mine is Angular 7

It only worked when I changed the lazy module main route entry path with same path as configured at the app-routes.ts

routes = [{path:'', redirectTo: '\home\default', pathMatch: 'full'},
           {path: '', 
           children: [{
             path:'home',
             loadChildren :'lazy module path'      
           }]

         }];

 routes configured at HomeModule
 const routes = [{path: 'home', redirectTo: 'default', pathMatch: 'full'},
             {path: 'default', component: MyPageComponent},
            ]

 instead of 
 const routes = [{path: '', redirectTo: 'default', pathMatch: 'full'},
                   {path: 'default', component: MyPageComponent},
                ]

User42 · Accepted Answer · 2016-08-04 07:05:36Z

With the current version of angular 2 you can't use '/' on a path or give a name to your route. What you can do is create a route file like "app.routes.ts" and import your components, make sure of the path when importing.

import { Component } from '@angular/core';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ConfigManagerComponent } from './configManager/configManager.component';
import { ApplicationMgmtComponent } from './applicationMgmt/applicationMgmt.component';
import { MergeComponent } from './merge/merge.component';`

Add:

import {RouterConfig, provideRouter } from '@angular/router';

Then your routes:

const routes:RouterConfig = [      
    { path: 'Dashboard', component: DashboardComponent },
    { path: 'ConfigManager', component: ConfigManagerComponent },
    { path: 'Merge', component: MergeComponent },
    { path: 'ApplicationManagement', component: ApplicationMgmtComponent }
 ];

Then export:

export  const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)]

In your main.ts import APP_ROUTER_PROVIDERS and add bootstrap the router providers to the main.ts like this:

bootstrap(AppComponent,[APP_ROUTER_PROVIDERS]);

Finally, your link will look like this:

li class="nav hidden-xs"><a [routerLink]="['./Dashboard']" routerLinkActive="active">Dashboard</a>/li>

ernesto petit · Accepted Answer · 2016-08-19 14:40:38Z

1

Only you need to add other parameter in your route, the parameter is useAsDefault:true. For example, if you want the DashboardComponent as default you need to do this:

@RouteConfig([
    { path: '/Dashboard', component: DashboardComponent , useAsDefault:true},
    .
    .
    .
    ])

I recomend you to add names to your routes.

{ path: '/Dashboard',name:'Dashboard', component: DashboardComponent , useAsDefault:true}

answered Aug 19, 2016 at 14:40

ernesto petit

1,6272 gold badges16 silver badges22 bronze badges

Collectives™ on Stack Overflow

Angular2 router (@angular/router), how to set default route?

10 Answers 10

10 Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

10 Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related