Erreur: Uncaught (promettre): Erreur: Ne peut pas correspondre à toutes les routes Angulaire 2
Erreur
Je suis en œuvre imbriquée de routage dans mon application. lors de l'application des charges de ses spectacles écran de connexion après la connexion de ses rediriger vers la page d'administration où plus d'enfant, il existe des itinéraires comme l'utilisateur, produit, api, etc. maintenant, quand je navigue à l'admin il byddefault charge de l'utilisateur de l'écran, mais plus à l' <routeLinks>
pas de travail et sa montre cette erreur.
Error: Uncaught (in promise): Error: Cannot match any routes: 'product'
Après Cliquez sur Produit, il montre ce
Code principal.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.composant
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.itinéraires
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)
];
la maison.composant
import { Component } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl:'../app/layouts/login.html'
})
export class HomeComponent { }
sur.composant
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 { }
- Votre
app.routes
est identique àapp.component
. Pourriez-vous s'il vous plaît poster au bonapp.routes
. Je suis actuellement confronté au même problème que vous. - question de mise à jour
Vous devez vous connecter pour publier un commentaire.
Je pense que votre erreur, c'est que votre itinéraire sera
product
au lieu de/product
.Donc plus quelque chose comme
{ path: '**', component: NotFoundCmp }
Pour moi, il a travaillé comme le code ci-dessous. J'ai fait une différence entre
RouterModule.forRoot
etRouterModule.forChild
. Ensuite à l'enfant de définir le chemin d'accès parent et dans les enfants de la matrice de l'enfant.parent-routage.le module.ts
Espère que cette aide.
Je suis en utilisant angulaire 4 et confronté à la même question s'applique, toutes les solution possible, mais enfin, ce résoudre mon problème
Espère que cela va vous aider.
J'ai eu le problème des importations pour le module de routage doit venir après l'enfant module, cela pourrait ne pas être directement liées à ce poste, mais il aurait aidé moi si j'ai lu ceci:
https://angular.io/guide/router#module-import-order-matters
J'ai dû utiliser un caractère générique route à la fin de mes itinéraires tableau.
{ path: '**', redirectTo: 'home' }
Et l'erreur a été résolue.
J'ai eu le même message d'erreur alors que je faisais application AngularJS. Je n'ai pas vu d'erreur à partir de mon terminal mais quand je debug avec google developer tool, j'ai eu cette erreur.
Après avoir cette erreur, j'ai revu mon module de routage d'abord , puisque je n'ai pas vu quoi que ce soit tout en demandant de l'hôte local /login.
J'ai découvert que j'ai mal orthographié le nom de connexion que
lgin
et quand je corrige, il fonctionne très bien. Je suis juste partage de ce juste à payer attention à la faute de frappe d'erreur on peut rencontrer avec nous a mis dans une grande perdre du temps!Si votre passage id, puis essayez de suivre cette méthode,
Si vous êtes de passage de l'id de l'url, veuillez utiliser ci-dessous
je.e Si vous êtes de passage à toute pièce d'identité, nous avons besoin à la fois d'url modifier avec l'id et de modifier l'url de la seule
Que pour moi
resetConfig
ne fonctionne queOu concat avec les précédents
Mais gardez à l'esprit que la dernière doit toujours être à la route avec le chemin
**
J'ai aussi eu le même problème. Essayé par tous les moyens et il n'a pas fonctionné jusqu'à ce que j'ai ajouté ce qui suit dans l'app.le module.ts
Et ajoutez la ligne suivante dans votre importations dans l'app.le module.ts
Ce cas, peut-être rare, mais j'espère que cela aide quelqu'un là-bas
Dans mon cas, un
iframe
avec un liésrc
a été d'essayer d'obtenir de l'hôte/null ( lorsque la valeur de la variable liée est nulle ).L'ajout d'un
*ngIf
à, il a aidé.J'ai changé:
à
Cela Peut vous être utile:
De l'enfant de routage, il devrait ressembler à:
{ path: 'about', component: AboutComponent },
Noter qu'il n'y a pas de
pages
dans le chemin d'accès de l'enfant et de routage dansrouterLink
ounsRouterLink
il devrait ressembler àrouterLink="/pages/about"
J'espère thi aider quelqu'un là-bas.
si ça arrive à quelqu'un maintenant angulaire 8, j'ai obtenu l'erreur supprimé par l'ajout d'un " /" avant la route et il a travaillé en tant que de besoin.