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    lt li class  nav hidden-xs  gt  lt a  routerLink       Dashboard    gt Dashboard lt  a gt  li gt    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

User · Answer

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}

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

according to documentation you should just     path        component  DefaultLayoutComponent     on your app-routing module ts source  https   angular io guide router

User · Answer

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

User · Answer

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  gt  lt a  routerLink       Dashboard    routerLinkActive  active  gt Dashboard lt  a gt  li gt

User · Answer

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    gt            this router navigate   404        or redirect to default route               Hope this will help you

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

Examples related to angular