The pipe ' ' could not be found - error after Angular upgrade

Question

I'm trying to upgrade Angular 4 to latest (7.0.3), everything was well until production compilation. In it I received:

ERROR in : Template parse errors:
The pipe 'filter' could not be found ("v class="form-group">
    <ul class="ui-select-list">
      <li [attr.name]="item.id" *ngFor="let [ERROR ->]item of data | filter : qModel" innerHtml="{{ 'AAA' | translate }}"></li>
    </ul>
</div>
"): C:/x/src/app/components/ui/fields/combo/ui.combo.html@2:44
The pipe 'translate' could not be found ("s="ui-select-list">
      <li [attr.name]="item.id" *ngFor="let item of data | filter : qModel" inn[ERROR ->]erHtml="{{ 'AAA' | translate }}"></li>
    </ul>
</div>
"): C:/x/src/app/components/ui/fields/combo/ui.combo.html@2:79

To reproduce the error I created a minimal repository from my code: https://github.com/ptrstpp950/myBugInAngular

Results are the following:

• ng build --prod app produces above error
• ng build app works 100% fine

I try to read about pipes in shared modules, I tried to make changes according to guides but still, without success.

Answer 1

from your tsconfig.json it seems you are using Ivy renderer in your Angular 7 project

as below -

"angularCompilerOptions": {
    "enableIvy": true
  }

you can make it "enableIvy": false and try the production build again.

During the production build (ng build --prod) it removes the pipes due to tree shaking. Ivy is not fully compatible yet and it can only be used for testing purpose . Before using Ivy you need to run ngcc to convert pre-Ivy packages to include Ivy definitions, ngcc is a command line tool from @angular/compiler-cli .

Please refer to the below links regarding Ivy renderer

https://github.com/angular/angular/blob/master/packages/core/src/render3/STATUS.md#implementation-status

https://github.com/angular/angular/issues/26436