ERREUR Erreur: Uncaught (promettre), Ne peut pas correspondre à toutes les routes. URL Segment

J'ai une navigation simple dans angulaire 6 app,

Voici HTML

<nav class="main-nav>
<ul class="main-nav__list " ng-sticky [addClass]="'main-sticky-link'" [ngClass]="ref.click === true? 'Navbar__ToggleShow' :''">
            <li class="main-nav__item">
              <a class="main-nav__link" routerLink="['/']" routerLinkActive="active">Home</a>
            </li>
            <li class="main-nav__item"> 
              <a class="main-nav__link" routerLink="['/about']" routerLinkActive="active">About us</a>
            </li>

          </ul>
</nav>

ici est d'application.module de routage

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AboutComponent } from './components/about/about.component';
import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
import { FooterComponent } from './components/footer/footer.component';
import { ProjectsComponent } from './components/projects/projects.component';
const routes: Routes = [
  { path: 'about', component: AboutComponent },
  { path: 'what', component: WhatwedoComponent },
  { path: 'contacts', component: FooterComponent },
  { path: 'projects', component: ProjectsComponent},
];

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

Ici est d'application module de

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgStickyDirective } from 'ng-sticky';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AppRoutingModule } from './/app-routing.module';
import { MainNavDirective } from './layout/main-nav.directive';
import { AboutComponent } from './components/about/about.component';
import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
import { FooterComponent } from './components/footer/footer.component';
import { WhyChooseUsComponent } from './components/why-choose-us/why-choose-us.component';
import { TeamComponent } from './components/team/team.component';
import { ProjectsComponent } from './components/projects/projects.component';
import { ClientsComponent } from './components/clients/clients.component';
import { HowItWorksComponent } from './components/how-it-works/how-it-works.component';
import { PartnersComponent } from './components/partners/partners.component';
@NgModule({
declarations: [
AppComponent,
NgStickyDirective,
MainLayoutComponent,
MainNavDirective,
AboutComponent,
WhatwedoComponent,
FooterComponent,
WhyChooseUsComponent,
TeamComponent,
ProjectsComponent,
ClientsComponent,
HowItWorksComponent,
PartnersComponent
],
imports: [
BrowserModule,
RouterModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

quand je lance mon application et cliquez sur à propos de nous, j'obtiens l'erreur suivante :

core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '%5B'/about'%5D'
Error: Cannot match any routes. URL Segment: '%5B'/about'%5D'
at

J'ai essayé différentes combinaisons pour résoudre le problème mais toujours pas capable de me débarrasser de cette erreur,

ce que j'ai fait une erreur dans mon code? toute aide sera utile merci

InformationsquelleAutor user9964622 | 2018-08-26

4

Lorsque vous utilisez routerLink comme ceci, alors vous avez besoin de paas la valeur de la route, il devrait aller. Mais lorsque vous utilisez routerLink avec la propriété de liaison de la syntaxe, comme ceci: [routerLink], alors il devrait être assigné à un nom de la propriété dont la valeur sera la route, il devrait éviter à l'utilisateur.

Afin de résoudre votre problème, remplacez ce routerLink="['/about']" avec routerLink="/about" dans votre code HTML.

Il y avait d'autres endroits où vous avez utilisé la propriété de syntaxe de liaison lorsqu'il n'était pas vraiment nécessaire. J'ai corrigé et vous pouvez simplement utiliser la syntaxe du modèle ci-dessous:
```
<nav class="main-nav>
<ul 
class="main-nav__list" 
ng-sticky 
addClass="main-sticky-link" 
[ngClass]="ref.click ? 'Navbar__ToggleShow' : ''">
<li class="main-nav__item" routerLinkActive="active">
<a class="main-nav__link" routerLink="/">Home</a>
</li>
<li class="main-nav__item" routerLinkActive="active"> 
<a class="main-nav__link" routerLink="/about">About us</a>
</li>
</ul>
</nav>
```
Il doit également savoir où exactement faut-il charger le modèle pour le Composant correspondant à la route qu'il a atteint. Donc pour cela, n'oubliez pas d'ajouter un <router-outlet></router-outlet>, que ce soit dans votre modèle fourni ci-dessus ou dans un composant parent.

Il y a un autre problème avec votre AppRoutingModule. Vous avez besoin d'exporter le RouterModule à partir de là, de sorte qu'il est disponible pour votre AppModule lors de l'importation d'elle. Pour remédier à cela, l'exportation à partir de votre AppRoutingModule en l'ajoutant à la exports tableau.
```
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { MainLayoutComponent } from './layout/main-layout/main-layout.component';
import { AboutComponent } from './components/about/about.component';
import { WhatwedoComponent } from './components/whatwedo/whatwedo.component';
import { FooterComponent } from './components/footer/footer.component';
import { ProjectsComponent } from './components/projects/projects.component';
const routes: Routes = [
{ path: 'about', component: AboutComponent },
{ path: 'what', component: WhatwedoComponent },
{ path: 'contacts', component: FooterComponent },
{ path: 'projects', component: ProjectsComponent},
];
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes),
],
exports: [RouterModule],
declarations: []
})
export class AppRoutingModule { }
```
- Merci de votre droit , j'ai oublié que 🙁
- Stackoverflow fixe un délai pour accepter la réponse hahaha si juste être patient . trop rapide !!
- ce résoudre le problème, mais quand je clique sur nous, il ne fait rien 🙁
- Passez la souris sur le lien et vérifier en bas à gauche de l'écran où il va naviguer à l'utilisateur?
- - Je résoudre le problème j'ai besoin d'ajouter un routeur de sortie pour les principaux éléments de mise en page des composants
- Oh. Ok. Assurez-vous d'exporter le RouterModule de AppRoutingModule ainsi.
InformationsquelleAutor SiddAjmera
2

Que le message d'erreur indique que votre routeur lien doit correspondre à l'routes existantes configuré

Il doit être juste routerLink="/about"

InformationsquelleAutor Sajeetharan
1

Dans le cas où vous avez besoin de la [] syntaxe, utile pour "modifier les formes" quand vous en avez besoin pour passer des paramètres comme id de la route, vous feriez quelque chose comme:
```
[routerLink]="['edit', business._id]"
```
Que pour un "sur la page" sans paramètres comme la vôtre,
```
[routerLink]="/about"
```
ou
```
[routerLink]=['about']
```
fera l'affaire.

InformationsquelleAutor rtrigo

Vous devez vous connecter pour publier un commentaire.