Angular7 : Erreurs d'analyse des templates : Le tuyau 'titlecase' / 'slice' n'a pas été trouvé

Question

Je suis en train de migrer mon application de Angulaire 6 à Angulaire 7

Après avoir exécuté ng update, et mis à jour mes paquets, tout va bien jusqu'à ce que j'exécute.. :

ng build --configuration=production 

il semble qu'il ne puisse pas trouver certains tuyaux angulaires bien connus : porte-titre / tranche :

ERROR in : Template parse errors:
The pipe 'titlecase' could not be found ("span class="nav-item border-left text-truncate px-2 text-left">
    <span class="text-capitalize">{{[ERROR ->]username | titlecase }}</span>
    <span class="text-capitalize">&nbsp;</span>
    <span class="text-"): /media/khalidvm/SecondDisk/SOCLE_RCD/Front/Frontend_v3_crmd/src/app/Features/CRMD/navbar-crmd/navbar-crmd-components/navbar-crmd/navbar-crmd.component.html@14:36
The pipe 'slice' could not be found ("ecase }}</span>
    <span class="text-capitalize">&nbsp;</span>
    <span class="text-capitalize">{{[ERROR ->]userlastname | slice:0:1}} </span>
    <span class="text-capitalize">&nbsp;</span>
    <span>-</span>"): /media/khalidvm/SecondDisk/SOCLE_RCD/Front/Frontend_v3_crmd/src/app/Features/CRMD/navbar-crmd/navbar-crmd-components/navbar-crmd/navbar-crmd.component.html@16:36

Mon composant ressemble à ceci :

<div id="HeaderNav" class="nav bg-white mx-auto py-1 d-flex  flex-nowrap">
  <span class="nav-item dropdown mx-1">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      <span class="icon svg-avatar"></span>
    </a>
    <ul class="dropdown-menu">
      <a class="dropdown-item disabled">Profil Conseiller</a>
      <a class="dropdown-item" *ngIf="srcdPiloteViewAccess" (click)="goSrcdView()">Devenir Pilote</a>
      <a class="dropdown-item" *ngIf="administrationViewAccess" (click)="goAdministrationView()">Devenir Administrateur</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" (click)="logout()">Se déconnecter</a>
    </ul>
  </span>
  <span class="nav-item border-left text-truncate px-2 text-left">
    <span class="text-capitalize">{{username | titlecase }}</span>
    <span class="text-capitalize">&nbsp;</span>
    <span class="text-capitalize">{{userlastname | slice:0:1}} </span>
    <span class="text-capitalize">&nbsp;</span>
    <span>-</span>
    <span class="text-capitalize">&nbsp;</span>
    <span class="text-capitalize">boutique orange {{shopName}}</span>
  </span>
  <span class="nav-item text-truncate text-center en-attente">
    <!--<span class="nav-item">4 personnes en attente</span>-->
  </span>
  <span class="espace-vide"></span>
</div>

J'ai donc vérifié mon module NgModule et j'importe bien le Module commun

Mais lors de la construction de l'application, ils sont manquants.

Des suggestions ?

Answer 1

J'ai eu exactement le même problème. En creusant un peu, j'ai découvert que ça a quelque chose à voir avec avoir activé Ivy dans votre configuration TS.

Ce que j'ai fait pour résoudre ce problème est supprimer la configuration suivante à partir du tsconfig.json :

"angularCompilerOptions": {
    "enableIvy": true
}