Angular2 router (@angular / router), cómo establecer la ruta predeterminada?

¿Cómo puedo establecer una ruta predeterminada en mi colección de metadatos de ruta @Routes? Si utiliza el enrutador angular2 de @angular / router-deprecated, define las rutas en el objeto @RouteConfig, que es una colección de objetos de ruta, pero estos objetos de ruta tienen más atributos en ellos. Por ejemplo, tienen los atributos' name 'y' useAsDefualt', mientras que las rutas definidas desde @angular/router no lo hacen. Me gustaría escribir mi nueva aplicación usando el nuevo router, pero ¿cómo uso el nuevo router y establecer ¿una ruta predeterminada?

Este es mi componente principal de la aplicación que define mis rutas: 

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 { }

Las definiciones de ruta parecen estar funcionando bien, cuando hago clic en etiquetas de anclaje como esta: 

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

Transita a la ruta asociada. Mi único problema es que cuando mi aplicación se carga no tiene una ruta activa. ¿Cómo defino una ruta predeterminada que está activa cuando se inicia mi aplicación?

Gracias!

 47
angular
Author: cobolstinks, 2016-06-03
Source

10 answers

V2.0. 0 y posteriores

Véase también 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 }
    ] 
  }
];

También está la ruta general

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

Que redirige urls "inválidas".

V3-alfa (vladivostok)

Utilice la ruta / y 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

El router RC aún no es compatible con useAsDefault. Como solución alternativa, puede navegar explícitamente.

En la raíz componente

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

Para otros componentes

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

  routerOnActivate(curr: RouteSegment, prev?: RouteSegment, currTree?: RouteTree, prevTree?: RouteTree) : void {
    this.router.navigate(['SomeRoute'], curr);
  }
}
 77
Author: Günter Zöchbauer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-18 14:54:54

Se establece la ruta de la ruta es". Ejemplo para DashboardComponent es cargar primero.

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

Espero que te ayude.

 9
Author: Nguyen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-03 03:29:44

En Angular 2+, puede establecer la ruta en la página predeterminada agregando esta ruta a su módulo de ruta. En este caso, login es mi ruta de destino para la página predeterminada.

{path:'',redirectTo:'login', pathMatch: 'full' },
 3
Author: Hiran,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-01 06:25:21

Me enfrenté al mismo problema aplicar todas las soluciones posibles, pero finalmente esto resolver mi problema

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

Espero que esto te ayude.

 2
Author: Jayant Patil,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-05 06:27:27

Con la versión actual de angular 2 no puedes usar '/' en una ruta o dar un nombre a tu ruta. Lo que puedes hacer es crear un archivo de ruta como " app.ruta.ts " e importar sus componentes, asegúrese de la ruta al importar.

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';`

Añadir: 

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

Entonces sus rutas: 

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

Luego exportar: 

export  const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)]

En su principal.ts importa APP_ROUTER_PROVIDERS y añade bootstrap a los proveedores del router al main.ts como este: 

bootstrap(AppComponent,[APP_ROUTER_PROVIDERS]);

Finalmente, su enlace se verá como esto: 

li class="nav hidden-xs"><a [routerLink]="['./Dashboard']" routerLinkActive="active">Dashboard</a>/li>
 1
Author: user6569033,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-04 07:05:36

Solo necesita agregar otro parámetro en su ruta, el parámetro es useAsDefault:true. Por ejemplo, si desea que el DashboardComponent sea predeterminado, debe hacer esto:

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

Te recomiendo que añadas nombres a tus rutas.

{ path: '/Dashboard',name:'Dashboard', component: DashboardComponent , useAsDefault:true}
 1
Author: ernesto petit,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-19 14:40:38

La ruta debe dejarse en blanco para que sea un componente predeterminado.

{ path: '', component: DashboardComponent },
 1
Author: Bimal Kharel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-10 15:52:15

Suponga que desea cargar RegistrationComponent en cargar y, a continuación, ConfirmationComponent en algún evento, haga clic en RegistrationComponent.

Así que en appModule.ts, puedes escribir así.

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

O

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

También Está bien. Elige lo que quieras.

 1
Author: Alok Ranjan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-16 12:51:41

De acuerdo con la documentación, solo debe 

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

En su aplicación-enrutamiento.módulo.ts fuente: https://angular.io/guide/router

 0
Author: Eddy Ferreira,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-30 20:59:44

Agregar ruta a su página predeterminada 

 $routeProvider
     .when("/db", {
         templateUrl: "/home/dashboard"
     })

Luego en tu landing page agrega el siguiente script.

 $( document ).ready() 
 {
    window.location = "/#!db";
 };
 -2
Author: Imran,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-08 10:14:00