Erreur : Uncaught (in promise) : Erreur : Cannot match any routes Angular 2

Question

Error J'ai implémenté un routage imbriqué dans mon application. Lorsque l'application se charge, elle affiche l'écran de connexion. Après la connexion, elle redirige vers la page d'administration où d'autres routes enfant existent comme utilisateur, produit, api, etc. <routeLinks> ne fonctionne pas et affiche cette erreur. Error: Uncaught (in promise): Error: Cannot match any routes: 'product'

Après avoir cliqué sur le produit, on voit apparaître ceci

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

app.routes

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

Je pense que votre erreur est que votre route devrait être product au lieu de /product .

Donc plutôt quelque chose comme

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

Answer 2

Pour moi, cela a fonctionné comme le code ci-dessous. J'ai fait une différence entre RouterModule.forRoot et RouterModule.forChild . Ensuite, dans le tableau des enfants, définissez le chemin du parent et dans le tableau des enfants, les enfants.

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,
      },
    ]
  }
])

J'espère que cela vous aidera.

Answer 3

J'utilise angular 4 et j'ai rencontré le même problème, toutes les solutions possibles mais finalement, ceci résout mon problème.

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

J'espère que cela vous aidera.

Answer 4

J'ai dû utiliser une route joker à la fin de mon tableau de routes.

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

Et l'erreur a été résolue.

Answer 5

J'avais la même erreur lorsque je faisais une application AngularJS. Je n'ai pas vu d'erreur dans mon terminal mais quand je débogue avec l'outil de développement de google, j'ai obtenu cette erreur .

Après avoir eu cette erreur, j'ai d'abord revu mon module de routage, puisque je ne voyais rien lorsque je demandais l'hôte local /login.

J'ai découvert que j'ai mal orthographié l'identifiant en tant que lgin et quand je corrige, ça fonctionne bien. Je partage juste cela pour faire attention à toute erreur de frappe que nous pourrions rencontrer et qui nous ferait perdre beaucoup de temps !