Le routeur Angular2 ajoute un composant au lieu de le remplacer

Question

J'ai une application Angular2 avec une sortie de routeur qui affiche différents composants en fonction du lien cliqué dans un menu latéral.

Le balisage du composant principal contenant le <router-outlet> ressemble à ceci

<div *ngIf="authenticated == false">
  <app-login></app-login>
</div>
<div *ngIf="authenticated">
  <div class="page home-page">
    <header class="header">
      <app-navbar></app-navbar>
    </header>
    <div class="page-content d-flex align-items-stretch">
      <div class="sidebar-container">
        <app-sidebar-menu></app-sidebar-menu>
      </div>
      <div class="content-inner">
      <app-page-header></app-page-header>
        <div id="sub-content">
          <router-outlet></router-outlet>
        </div>
        <app-footer></app-footer>
      </div>
    </div>
  </div>
</div>

Si je clique sur le bouton Démonstration le composant de démonstration est affiché, mais si je clique ensuite sur le lien Accueil le composant "home" est rendu au-dessus du composant "demo" dans le DOM. En cliquant plusieurs fois sur les deux composants, vous obtiendrez un DOM semblable à celui-ci

<div _ngcontent-c0="" id="sub-content">
    <router-outlet _ngcontent-c0=""></router-outlet>
  <app-home _nghost-c6="">...</app-home>
  <app-demo _nghost-c7="">...</app-demo>
  <app-home _nghost-c6="">...</app-home> <!-- Why so many here? Should be just either one <app-home> or <app-demo>  -->
  <app-demo _nghost-c7="">...</app-demo>
  <app-home _nghost-c6="">...</app-home>
  <app-demo _nghost-c7="">...</app-demo>
  <app-footer _ngcontent-c0="" _nghost-c5="">...</app-footer>
</div>

Les itinéraires sont définis comme suit

export const router: Routes = [
    { path: 'demo', component: DemoComponent, canActivate: [AuthGuard] },
    { path: 'home', component: HomeComponent, canActivate: [AuthGuard] }
]

Comment se fait-il que le <router-outlet> ne remplace pas le composant, mais ajoute une autre "instance" du composant lors du passage d'un itinéraire à l'autre ?

Answer 1

En utilisant la méthode de l'élimination, j'ai découvert que le coupable du problème était le BrowserAnimations dans mon module app.module.ts . En le retirant de mon imports le problème a disparu. Je vais essayer de créer un Plunker pour en faire la démonstration.

Mise à jour : Elle est décrite dans le présent document. Problème Github .

Mise à jour 2017-12-13 : Ce problème a été corrigé dans ce PR, fix(animations) : récupération et nettoyage corrects du DOM en cas de défaillance du CD .

Answer 2

C'est également le cas lorsque le composant A génère une erreur Ainsi, lors de la navigation vers le composant B, le composant A n'a pas pu être détruit à cause de l'erreur. Il s'agit d'un bogue d'Angular. Jusqu'à ce qu'il soit corrigé, trouvez la cause de l'erreur et corrigez-la. Vérifiez la console de vos outils de développement.

Answer 3

J'ai eu un problème très similaire, en utilisant également Firebase.

Voir les composants ajoutés à la sortie du routeur

Cependant, j'ai découvert que le problème provenait d'une erreur dans l'un de mes composants, sans rapport avec mon routage. Un des composants avait une référence à un "FormsArray", qui n'était pas utilisé et malformé. Cela générait des erreurs dans la console devtools, mais je n'ai pas pensé à vérifier, puisque tout se compilait bien.

Je ne sais pas si cela aidera quelqu'un.

Answer 4

J'utilisais NgZone dans le composant et mon routerLink avait le même problème, sans aucune erreur dans la console.

J'ai remplacé le routerLink par un (click) à l'intérieur et j'ai appelé une fonction comme celle-ci :

constructor(
    (...)
    private zone: NgZone,
    (...)
  ) { }

goToPage() {
    this.zone.run(() => this.router.navigate(['/page']));
}

Answer 5

J'ai eu un problème similaire, et la raison est que j'ai utilisé une directive qui n'est pas déclarée dans le composant A et il n'y avait pas d'erreur dans la compilation ou la console. Ainsi, lorsque je navigue vers le composant B, le routeur ajoute le contenu.

Pour déboguer, j'ai commenté toutes les balises html dans les deux composants en ne laissant qu'un h1 pour voir si le contenu était ajouté. Avec quelques tests, j'ai trouvé la directive et en la supprimant, le routeur est redevenu normal.