RouterLink ne fonctionne pas et génère une erreur

**ricobye** · 25/07/2020, 23h12

Bonjour,

Dans le cadre d'un petit projet sous angular 9, je viens d'insérer un navbar, que j'appelle dans chacune des pages. Les liens de ce navbar hélas ne fonctionnent que lorsque je suis sur la page d'accueil.

Le navbar:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<nav class="navbar navbar-expand-lg navbar-light fixed-top white"
style="top: 35px; box-shadow: -1px 3px 5px 0 rgba(0, 0, 0, 0.09)">
 
    <img src="../../../../assets/img/logo-min.png" alt="" class="img-responsive" style="max-width: 150px">
 
 
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span ><i class="fa fa-navicon blue-text"></i></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link pr-3" routerLink="asscar" routerLinkActive="active"><i class="fas fa-car p-3"></i>Car</a>
      </li>
      <li class="nav-item">
        <a class="nav-link pr-3" routerLink="carplus"><i class="fas fa-car p-3"></i>Car Plus</a>
      </li>
      <li class="nav-item">
        <a class="nav-link pr-3" routerLink="cargold"><i class="fas fa-car p-3"></i>Car Gold</a>
      </li>
    </ul>
  </div>
</nav>

Mon app-routing.module:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
const MyPath: Routes = [ 
		{ path: '', redirectTo: '/home', pathMatch: 'full' },
		{ path: '', component: HomeComponent },	
		{ path: 'home', component: HomeComponent },
		{ path: 'home/asscar', component: AsscarComponent },
		{ path: 'home/carplus', component: CarplusComponent },
		{ path: 'home/cargold', component: CargoldComponent },
		{ path: 'home/asscar/caruser', component: CaruserComponent },

Lorsque je suis à la page d'accueil "home", le routerLink fonctionne parfaitement. J'arrive à accéder aux trois pages. Le problème survient lorsque je ne suis pas à la racine. Dans le repertoire asscar par exemple, je ne peux plus utiliser les liens du navbar car je pointe sur des routes inconnues...
Je m'explique:
Je suis à l'accueil j'ai l'url 'http://localhost:4200/home' et mon template home qui contient différents composants

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<bi-navbar></bi-navbar>
ma page daccueil
<bi-banner></bi-banner>
<bi-whyus></bi-whyus> 
<bi-confiance></bi-confiance>           
<bi-footer></bi-footer>

Je clique sur le navbar, le lien asscar et j'ai l'url 'http://localhost:4200/home/asscar'...et mon template asscar ce qui est normal

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<bi-navbar></bi-navbar>
Mon formulaire asscar        
<bi-footer></bi-footer>

à partir de là je clique à nouveau sur le navbar 'Car' et j'ai une erreur. En cliquant sur 'Car Plus', j'ai le même type d'erreur...

Le message d'erreur est le suivant :

core.js:6228 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home/asscar/asscar'
Error: Cannot match any routes. URL Segment: 'home/asscar/asscar'

core.js:6228 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home/asscar/carplus'
Error: Cannot match any routes. URL Segment: 'home/asscar/carplus'

Ce qui me surprend le plus c'est l'url. En cliquant sur le lien "Car Plus" du navbar, je m'attends à accéder à 'home/carplus' et afficher mon template 'carplus' mais je me retrouve face à 'home/asscar/tcarplus'...

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<bi-navbar></bi-navbar>
Mon formulaire Car Plus       
<bi-footer></bi-footer>

Je n'arrive pas du tout à comprendre. Pourriez vous me donner un coup de main s'il vous plait? Il y'a quelque chose qui m'échappe dans cette technologie...

Merci d'avance.

Cordialement

**krakatoa** · 25/07/2020, 23h46

routerLink="/

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
...
 <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link pr-3" routerLink="/asscar" routerLinkActive="active"><i class="fas fa-car p-3"></i>Car</a>
      </li>
      <li class="nav-item">
        <a class="nav-link pr-3" routerLink="/carplus"><i class="fas fa-car p-3"></i>Car Plus</a>
      </li>
      <li class="nav-item">
        <a class="nav-link pr-3" routerLink="/cargold"><i class="fas fa-car p-3"></i>Car Gold</a>
      </li>
    </ul>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
const MyPath: Routes = [ 
		{ path: '', redirectTo: '/home', pathMatch: 'full' },
		{ path: '', component: HomeComponent },	
		{ path: 'home', component: HomeComponent },
		{ path: 'asscar', component: AsscarComponent },
		{ path: 'carplus', component: CarplusComponent },
		{ path: 'cargold', component: CargoldComponent },
		{ path: 'asscar/caruser', component: CaruserComponent },

**ricobye** · 26/07/2020, 16h28

Envoyé par krakatoa

routerLink="/

Bonjour krakatoa
Merci pour le retour mais la solution préconisée n'a pas resolu mon problème. Je suis donc passé par une solution de contournement en utilisant "Route" dans des fonctions plutôt que RouterLink et ca marche...

dans mon navbar.composant.ts j'ai:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
 
@Component({
  selector: 'bi-navbar',
  templateUrl: './homenavbar.component.html',
  styleUrls: ['./homenavbar.component.scss']
})
export class HomenavbarComponent implements OnInit {
 
  constructor(private router: Router) {
 
  }
  Car = function () {
    this.router.navigate(['home/asscar/']);
 };
  Carplus = function () {
   this.router.navigate(['home/carplus/']);
};
  Caror = function () {
 this.router.navigate(['home/caror/']);
};
 
  ngOnInit(): void {
  }
 
}

Et dans le template, j'appelle les fonctions

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <!--<a class="nav-link pr-3" routerLink="asscar" routerLinkActive="active blue">-->
        <a class="nav-link pr-3" (click)="Car();"><i class="fas fa-car p-3"></i>Car</a>
      </li>
      <li class="nav-item">
        <!--<a class="nav-link pr-3" routerLink="carplus" routerLinkActive="active blue">-->
        <a class="nav-link pr-3" (click)="Carplus();"><i class="fas fa-car p-3"></i>Car Plus</a>
      </li>
        ....
    </ul>
  </div>

Par contre j'ai l'impression qu'il me recharge les pages comme le fait <a href="...">,

Cordialement

**krakatoa** · 26/07/2020, 17h49

tu as mis ça aussi ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
const MyPath: Routes = [ 
		{ path: '', redirectTo: '/home', pathMatch: 'full' },
		{ path: '', component: HomeComponent },	
		{ path: 'home', component: HomeComponent },
		{ path: 'asscar', component: AsscarComponent },
		{ path: 'carplus', component: CarplusComponent },
		{ path: 'cargold', component: CargoldComponent },
		{ path: 'asscar/caruser', component: CaruserComponent },