CODEWITHSUNDEEP
angulartypescript
Piotr Stapp
Piotr Stapp

Reputation: 19830

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

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:

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

Upvotes: 9

Views: 14530

Answers (2)

Niladri
Niladri

Reputation: 5962

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

Upvotes: 11

Kunal Mukherjee
Kunal Mukherjee

Reputation: 5853

You can make a Shared module and export all your pipes from that shared module if you are using it in more than one module.

For example just create a shared module like the follows:

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SearchFilterPipe } from './search-qafilter.pipe';
import { CapitalizePipe } from './search-question.pipe';

@NgModule({
  imports: [
    CommonModule,
    SharedRoutingModule
  ],
  declarations: [SearchFilterPipe , CapitalizePipe],
  providers: [],
  exports: [SearchFilterPipe , CapitalizePipe]
})
export class SharedModule {}

And import this shared module in whatever module you like and the pipe will be accessible from there without throwing any errors.

Upvotes: 0

Related Questions