typescript - redireccionar - rutas angular 6

Error: No capturado(en promesa): Error: No puede coincidir con ninguna ruta Angular 2

Question

Error

Estoy implementado enrutamiento anidado en mi aplicación. cuando la aplicación carga su pantalla de inicio de sesión después de iniciar sesión, redirige a la página de administración donde existen más rutas secundarias como usuario, producto, api, etc. . Error: Uncaught (in promise): Error: Cannot match any routes: ''product''

Después de hacer clic en el producto se muestra

Código main.ts

import { bootstrap }    from ''@angular/platform-browser-dynamic'';
import { APP_ROUTER_PROVIDERS } from ''../app/app.routes'';
import { AppComponent } from ''../app/app.component'';

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);

app.component

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

@Component({
  selector: ''demo-app'',
  template: `

    <div class="outer-outlet">
      <router-outlet></router-outlet>
    </div>
  `,
  directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }

rutas de aplicaciones

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

import { AboutComponent, AboutHomeComponent, AboutItemComponent } from ''../app/about.component'';
import { HomeComponent } from ''../app/home.component'';

export const routes: RouterConfig = [
  { 
    path: '''', 
    component: HomeComponent
   },
  {
    path: ''admin'',
    component: AboutComponent,
    children: [
      { 
        path: '''', 
        component: AboutHomeComponent
       },
      { 
        path: ''/product'', 
        component: AboutItemComponent 
      }
    ]
  }
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

home.component

import { Component } from ''@angular/core'';

@Component({
  selector: ''app-home'',
  templateUrl:''../app/layouts/login.html''
})
export class HomeComponent { }

about.component

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

@Component({
  selector: ''about-home'',
  template: `<h3>user</h3>`
})
export class AboutHomeComponent { }

@Component({
  selector: ''about-item'',
  template: `<h3>product</h3>`
})
export class AboutItemComponent { }

@Component({
    selector: ''app-about'',
    templateUrl: ''../app/layouts/admin.html'',
    directives: [ROUTER_DIRECTIVES]
})
export class AboutComponent { }

Answer 1

Creo que su error es que su ruta debería ser product lugar de /product .

Entonces algo más como

  children: [
  { 
    path: '''', 
    component: AboutHomeComponent
   },
  { 
    path: ''product'', 
    component: AboutItemComponent 
  }

Answer 2

En cuanto a mí, resetConfig solo funciona

this.router.resetConfig(newRoutes);

O concat con anterior

this.router.resetConfig([...newRoutes, ...this.router.config]);

Pero tenga en cuenta que lo último debe ser siempre ruta con ruta **

Answer 3

En mi caso, un iframe con un src enlazado intentaba obtener host / null (cuando el valor de la variable enlazada era nulo). Agregar un *ngIf ayudó.

Cambié:

<iframe [src]="iframeSource"></iframe>

a

<iframe [src]="iframeSource" *ngIf="iframeSource"></iframe>

Answer 4

Estaba teniendo el mismo error mientras estaba haciendo la aplicación AngularJS. No vi ningún error desde mi terminal pero cuando depuro con la herramienta de desarrollador de Google, aparece este error .

Después de tener este error, primero revisé mi módulo de enrutamiento, ya que no veía nada al solicitar el host / inicio de sesión local.

Descubrí que lgin mal el inicio de sesión como lgin y cuando lo corrijo funciona bien. ¡Solo estoy compartiendo esto solo para prestar atención a cualquier error tipográfico con el que nos encontremos y ponernos en un gran momento suelto!

Answer 5

Estoy usando angular 4 y enfrenté el mismo problema, todas las soluciones posibles, pero finalmente, esto resuelve 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 ayudará.

Answer 6

Para mí funcionó como el código a continuación. Hice una diferencia entre RouterModule.forRoot y RouterModule.forChild . Luego, en el hijo, defina la ruta principal y en el conjunto de hijos, los hijos.

parent-routing.module.ts

RouterModule.forRoot([
  {
    path: ''parent'',  //parent path, define the component that you imported earlier..
    component: ParentComponent,
  }
]),
RouterModule.forChild([
  {
    path: ''parent'', //parent path
    children: [
      {
        path: '''', 
        redirectTo: ''/parent/childs'', //full child path
        pathMatch: ''full''
      },
      {
        path: ''childs'', 
        component: ParentChildsComponent,
      },
    ]
  }
])

Espero que esto ayude.

Answer 7

Si está pasando la identificación a través de la URL, use a continuación

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
      { path: ''Employees'', component: EmployeesComponent, pathMatch: ''full'' },
      { path: ''Add'', component: EmployeeAddComponent, pathMatch: ''full'' },
      **{ path: ''Edit/:id'', component: EmployeeEditComponent },
      { path: ''Edit'', component: EmployeeEditComponent },**
      { path: '''', redirectTo: ''Employees'', pathMatch: ''full'' }
    ]),
  ],

es decir, si está pasando alguna identificación, necesitamos editar url con id y editar url solo

Answer 8

Si su id de paso, intente seguir este método

 const routes: Routes = [
  {path:"", redirectTo:"/home", pathMatch:"full"},
  {path:"home", component:HomeComponent},
  {path:"add", component:AddComponent},
  {path:"edit/:id", component:EditComponent},
  {path:"show/:id", component:ShowComponent}
];
@NgModule({
  imports: [

    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
  declarations: []
})
export class AppRoutingModule { }

Answer 9

También tuve el mismo problema. Intenté todas las formas y no funcionó hasta que agregué lo siguiente en app.module.ts

import { Ng4LoadingSpinnerModule } from ''ng4-loading-spinner'';

Y agregue lo siguiente en sus importaciones en app.module.ts

Ng4LoadingSpinnerModule.forRoot()

Este caso puede ser raro, pero espero que esto ayude a alguien

Answer 10

Tuve el problema de que las importaciones para el módulo de enrutamiento deben venir después del módulo secundario, esto podría no estar directamente relacionado con esta publicación, pero me habría ayudado si leyera esto:

https://angular.io/guide/router#module-import-order-matters

imports: [
  BrowserModule,
  FormsModule,
  ChildModule,
  AppRoutingModule
],

Answer 11

Tuve que usar una ruta comodín al final de mi matriz de rutas.

{ path: ''**'', redirectTo: ''home'' }

Y el error fue resuelto.