web-dev-qa-db-fra.com

Erreur: Non capturé (promis): Erreur: Impossible de faire correspondre les itinéraires. Angular 2

Erreur

Je suis implémenté routage imbriqué dans mon application. lorsque l’application charge son écran de connexion après avoir connecté sa redirection vers la page d’administration où d’autres itinéraires enfants existent, tels que utilisateur, produit, api, etc. maintenant, lorsque je le visite, admin byddefault charge l’écran de l’utilisateur mais que <routeLinks> ne fonctionne pas et affiche cette erreur. Error: Uncaught (in promise): Error: Cannot match any routes: 'product'

 enter image description here

Après avoir cliqué sur le produit, cela montre ceci  enter image description here

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

à propos de.

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 { }
typescriptangular2-routing
40
Malik Kashmiri

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

Donc plus quelque chose comme 

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

Pour moi, cela a fonctionné comme le code ci-dessous. J'ai fait une différence entre RouterModule.forRoot et RouterModule.forChild. Puis, dans l’enfant, définissez le chemin parent et dans l’enfant, organisez 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 t'aides.

8
djl

J'utilise angular 4 et je suis confronté au même problème. Toutes les solutions sont possibles, mais finalement, cela 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 ceci vous aidera.

4
Jayant Patil

J'ai eu le problème que les importations pour le module de routage doivent venir après le module enfant, cela peut ne pas être directement lié à ce post, mais cela m'aurait aidé si je lis ceci:

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

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

Je devais utiliser une route générique à la fin de mon tableau de routes.

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

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

2
alex351

J'avais la même erreur pendant que je faisais l'application AngularJS. Je n'ai vu aucune erreur de mon terminal  compiled successfully mais lorsque je débogue avec l'outil de développement Google, j'ai cette erreur  error message . 

Après avoir eu cette erreur, j'ai d'abord examiné mon module de routage, car je ne voyais rien lorsque je demandais un hôte/un identifiant local.

J'ai découvert que j'avais mal orthographié le nom de connexion avec lgin et que je corrige, cela fonctionne bien. Je ne fais que partager ceci juste pour faire attention à toute erreur de frappe que nous pourrions rencontrer et qui nous mettrait dans un bon temps perdu!  after correcting the typo error

2
Moh K

J'ai aussi eu le même problème. J'ai essayé tous les moyens et cela n'a pas fonctionné jusqu'à ce que j'ai ajouté ce qui suit dans app.module.ts

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

Et ajoutez ce qui suit dans vos importations dans app.module.ts

Ng4LoadingSpinnerModule.forRoot()

Cette affaire pourrait être rare, mais j'espère que cela aidera quelqu'un

1
someone

Quant à moi, resetConfig ne fonctionne que

this.router.resetConfig(newRoutes);

Ou concat avec précédent 

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

Mais gardez à l'esprit que le dernier doit toujours être route avec le chemin **

0
V. Kalyuzhnyu

Cela peut être utile:

//I personally prefer dynamic import (angular 8)
{ path: 'pages', loadChildren: () => import('./pages/pages.module').then(mod => mod.PageModule) }

Dans le routage enfant, il devrait ressembler à ceci: { path: 'about', component: AboutComponent },

Notez qu'il n'y a pas de pages dans le chemin du routage enfant ni dans routerLink ou nsRouterLink il devrait ressembler à routerLink="/pages/about"

J'espère que cela aidera quelqu'un là-bas.

0
Harrison Oziegbe

Si vous passez id par url, veuillez utiliser ci-dessous

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

i.e Si vous transmettez un identifiant, nous devons à la fois modifier l’URL avec l’ID et modifier l’URL seul

0
guest

Si votre identifiant de passage, alors essayez de suivre cette méthode

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

Dans mon cas, un iframe avec une variable liée src essayait d'obtenir Host/null (lorsque la valeur de la variable liée était null). Ajouter un *ngIf à cela a aidé.

J'ai changé:

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

à

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