web-dev-qa-db-fra.com

ERROR Error: Uncaught (promis), ne peut correspondre à aucun itinéraire. Segment URL

J'ai une navigation simple dans l'application angulaire 6, 

Voici le 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>

voici le module app.routing

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

Voici le module d'application

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 clique sur 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 je ne parviens toujours pas à supprimer cette erreur 

qu'est-ce que je fais mal dans mon code? toute aide sera utile merci

javascripthtmlangulartypescriptangular-routerlink
5
user9964622

Lorsque vous utilisez routerLink comme ceci, vous devez définir la valeur de la route à laquelle vous devez accéder. Mais lorsque vous utilisez routerLink avec la syntaxe de liaison de propriété, comme ceci: [routerLink], vous devez lui attribuer un nom de propriété dont la valeur sera la route vers laquelle l'utilisateur doit naviguer.

Donc, pour résoudre votre problème, remplacez ce routerLink="['/about']" par routerLink="/about" dans votre code HTML.

Il y avait d'autres endroits où vous utilisiez la syntaxe de liaison de propriété alors que ce n'était pas vraiment nécessaire. Je l'ai corrigé et vous pouvez simplement utiliser la syntaxe de 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 à quel endroit charger exactement le modèle pour le composant correspondant à l'itinéraire atteint. Donc, pour cela, n'oubliez pas d'ajouter un <router-outlet></router-outlet>, soit dans votre modèle fourni ci-dessus, soit dans un composant parent.

Il existe un autre problème avec votre AppRoutingModule. Vous devez exporter la RouterModule à partir de là pour qu'elle soit disponible pour votre AppModule lors de son importation. Pour résoudre ce problème, exportez-le à partir de votre AppRoutingModule en l'ajoutant au tableau exports.

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

Comme le dit l'erreur, votre lien de routeur doit correspondre aux routes existantes configurées

Ce devrait être juste routerLink="/about "

2
Sajeetharan

Si vous avez besoin de la syntaxe [], utile pour " modifier les formulaires " lorsque vous devez transmettre des paramètres tels que id avec la route, procédez comme suit:

[routerLink]="['edit', business._id]"

Comme pour un " à propos de la page " sans paramètres comme le vôtre,

[routerLink]="/about"

ou 

[routerLink]=['about']

fera l'affaire.

0
rtrigo