Angular7:模板解析错误:找不到管道“titlecase"/“slice"

问题描述

我正在将我的应用从 Angular 6 迁移到 Angular 7

运行 ng update 并更新我的包后，一切顺利，直到我运行:

ng build --configuration=production

似乎找不到一些有角度的知名管道:titlecase/slice :

ERROR in : 模板解析错误:找不到管道titlecase"(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.组件.html@14:36找不到管道切片"("ecase }}</span><span class="text-capitalize">&nbsp;</span><span class="text-capitalize">{{[ERROR ->]userlastname |切片: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

我的组件如下所示:

<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="下拉菜单"><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 管理员</a><div class="dropdown-divider"></div><a class="dropdown-item" (click)="logout()">Se déconnecter</a></span><span class="nav-item border-left text-truncate px-2 text-left"><span class="text-capitalize">{{用户名 |titlecase }}</span><span class="text-capitalize">&nbsp;</span><span class="text-capitalize">{{userlastname |切片:0:1}} </span><span class="text-capitalize">&nbsp;</span><span>-</span><span class="text-capitalize">&nbsp;</span><span class="text-capitalize">精品橙色{{shopName}}</span></span><span class="nav-item text-truncate text-center en-attente"><!--<span class="nav-item">4 人注意</span>--></span><span class="espace-vide"></span>

因此我已经验证了我的模块 NgModule ，并且我正在导入 CommonModule

但是在构建应用程序时，它们丢失了

建议?

解决方案

我遇到了完全相同的问题.通过一点点挖掘，我发现它与 在你的TS 配置.

我为解决它所做的是从tsconfig.json中删除以下配置:

"angularCompilerOptions": {启用常春藤":真}

I'm migrating my app from Angular 6 to Angular 7

After running ng update , and updating my packages , things goes well until i run:

ng build --configuration=production

it seems that it can't find some angular well known pipes : titlecase / slice :

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

My component looks like this :

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

Thefore i ve verified my module NgModule , and i'm well importing the CommonModule

But when when building the app , they are missing

Suggestions ?

解决方案

I had this exact same problem. With a little digging I found out it has something to do with having Ivy enabled in your TS config.

What I did to solve it is remove the following configuration from the tsconfig.json:

"angularCompilerOptions": {
    "enableIvy": true
}

这篇关于Angular7:模板解析错误:找不到管道“titlecase"/“slice"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！