angular: Pipes could not be found with Ivy enabled

This is an Ivy bug report.

I’m submitting a…


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

Event with the correct imports and declarations I get the following error

The pipe 'async' could not be found ("
    </div>

    <div class="progress-bar" [ERROR ->]*ngIf="isProgressBarVisible$ | async"></div>
</div>

"):

Expected behavior

It should compile

What is the motivation / use case for changing the behavior?

Just checking the compiler status

Environment


Angular version: 7.0.0-rc.1
 
For Tooling issues:
- Node version: NodeJS 10.12
- TypeScript version: 3.1.3

Others:
This is an *Ivy* bug report. I reported it, because the status page says pipes should work. Feel free to close this issue, if it's not the right time to submit bug tickets. 

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 3
  • Comments: 36 (20 by maintainers)

Most upvoted comments

I have same problem, and turned off ivy too. The problem is with pipes ERROR in : Template parse errors: The pipe 'date' could not be found....

For turn off ivy, open tsconfig.json and edit the key ivy to false.

"angularCompilerOptions": {
    "enableIvy": false
}

It’s failing for other reasons (first could not resolve foreign function declaration: app.module.ts forRoot, after fix Module not found: [object Object]).

Debug on Windows fails: HostResourceLoader: host(C:\Repositories\admin/C:/Repositories/admin/src/ts/components/dashboard/dashboard.component.html) returned a Promise

So I’ll leave this here, maybe it helps the Angular developers.

The error Error: Uncaught (in promise): Error: The pipe 'async' could not be found! is still an issue for me as of 9.0.0-next.7

Happens after I save a module (even without making changes to the module). Restarting ng serve fixes it.

I didn’t fix it, turned off ivy. It is still developed actively, eg. https://github.com/angular/angular/pull/27737

i’m having the same issues using latest angular 8 and angularfirebase

@JoostK, Thank you so much.

I have been pulling my hair out with this issue for months, having to restart my server on every template change was driving me insane. Chasing module imports thinking i have made some sort of error which I hadn’t of course.

You have made my Sunday. I moved to 9.0.0-next.5 and it solved it.

@ottodranik please test Ivy using the 9.0 preview releases, currently 9.0.0-next.6 is the latest. The issue you describe should have been resolved a while ago, but it’s not included in 8.x.

When “enableIvy”: true Everything works fine until I make changes to the template file (html-file, not ts-file). After that hot reload fires -> Angular 8 crashes and doesn’t recognize any pipes (translate, async, etc.) until I do ng serve again.

In console I saw that new loaded chunks become smaller. For example: Before adding some changes in html-file -> 148 kB, after -> 145 kB Before adding some changes in html-file -> 698 kB, after -> 694 kB

Then I see an error in browser console about pipes (any pipe). For example:

core.js:4002 ERROR Error: The pipe ‘translate’ could not be found! at getPipeDef$1 (core.js:23524) at Module.ɵɵpipe (core.js:23492) at DataSourceListComponent_Template (data-source-list.component.html:2) at executeTemplate (core.js:7900) at checkView (core.js:9013) at componentRefresh (core.js:8807) at refreshChildComponents (core.js:7675) at refreshDescendantViews (core.js:7600) at ComponentFactory.push…/node_modules/@angular/core/ivy_ngcc/fesm5/core.js.ComponentFactory.create (core.js:21567) at ViewContainerRef_.createComponent (core.js:10477) ERROR Error: Uncaught (in promise): Error: The pipe ‘translate’ could not be found! Error: The pipe ‘translate’ could not be found! at getPipeDef$1 (core.js:23524) at Module.ɵɵpipe (core.js:23492) at DataSourceListComponent_Template (data-source-list.component.html:2) at executeTemplate (core.js:7900) at checkView (core.js:9013) at componentRefresh (core.js:8807) at refreshChildComponents (core.js:7675) at refreshDescendantViews (core.js:7600) at ComponentFactory.push…/node_modules/@angular/core/ivy_ngcc/fesm5/core.js.ComponentFactory.create (core.js:21567) at ViewContainerRef_.createComponent (core.js:10477) at resolvePromise (zone.js:852) at resolvePromise (zone.js:809) at zone.js:913 at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) at Object.onInvokeTask (core.js:26256) at ZoneDelegate.push…/node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422) at Zone.push…/node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195) at drainMicroTaskQueue (zone.js:601)

you need to run run ngcc before you compile your code with ivy. checkout some of the ngcc integration tests in the repo. I hope that helps.

in general, there are still too many failing tests for us to resolve before we are ready to accept ivy related issues, so I’m going to close this one.

Well… seems fixed as of angular and cli 9.0.0-rc.3. I just closed the new issue. I’ll reopen if i experience it again…

I am facing the exact same issues…

Angular CLI: 9.0.0-next.12
Node: 10.16.0
OS: darwin x64
Angular: 9.0.0-next.11
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.900.0-next.12
@angular-devkit/build-angular      0.900.0-next.12
@angular-devkit/build-ng-packagr   0.900.0-next.12
@angular-devkit/build-optimizer    0.900.0-next.12
@angular-devkit/build-webpack      0.900.0-next.12
@angular-devkit/core               9.0.0-next.12
@angular-devkit/schematics         9.0.0-next.12
@angular/cdk                       9.0.0-next.0
@angular/cli                       9.0.0-next.12
@angular/flex-layout               8.0.0-beta.27
@angular/localize                  9.0.0-next.5
@angular/material                  9.0.0-next.0
@ngtools/webpack                   9.0.0-next.12
@schematics/angular                9.0.0-next.12
@schematics/update                 0.900.0-next.12
ng-packagr                         5.7.0
rxjs                               6.5.3
typescript                         3.5.3
webpack                            4.41.1

@JoostK

Angular CLI: 9.0.0-next.5
Node: 12.8.0
OS: win32 x64
Angular: 9.0.0-next.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-next.5
@angular-devkit/build-angular     0.900.0-next.5
@angular-devkit/build-optimizer   0.900.0-next.5
@angular-devkit/build-webpack     0.900.0-next.5
@angular-devkit/core              9.0.0-next.5
@angular-devkit/schematics        9.0.0-next.5
@angular/cdk                      8.2.0
@angular/cli                      9.0.0-next.5
@angular/material                 8.2.0
@angular/pwa                      0.900.0-next.5
@ngtools/webpack                  9.0.0-next.5
@nguniversal/express-engine       8.1.1
@schematics/angular               9.0.0-next.5
@schematics/update                0.900.0-next.5
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.40.2

Try enableIvy: 'ngtsc' to use the new compiler pipeline.

I’m using 9.0.0-rc.3 and I declared a pipe in AppModule (the pipe itself resides in our src/shared/pipes folder) and it keeps saying could not be found. Now I can’t even get the application to run, running into issue #33821.

EDIT: this was also happening with Ivy disabled. I created a PipeModule, declared my pipe in that (instead of AppModule), and instead of importing the new PipeModule module to AppModule, I only imported it into the modules that used it, and it seems to be fixed. Still doesn’t work if I import it globally into AppModule and I have no idea why.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyPipe } from './my-pipe.pipe'; // example

@NgModule({
  declarations: [MyPipe],
  imports: [CommonModule],
  exports: [MyPipe]
})
export class PipesModule {
}

@Splaktar I added CommonModule as you asked and it didnt fix the issue. I also created a new issue https://github.com/angular/angular/issues/33950

@Splaktar

I made an app to reproduce the error https://github.com/tuurbo/angular-async-error

@JoostK

Spent 3 hours trying to recreate the issue… the best I can do is give you some things I learned.

  • The error doesn’t seem specific to the async pipe. If I remove async from the template, I get Can't bind to 'ngIf' since it isn't a known property of 'ng-container'. instead.
  • Only the lazy route of the problematic module/component are affected by the errors. I can click on other lazy routes and they load fine.
  • What’s weird is even if i striped down the problem component to a empty module/component that just has a simple string as the component template, the error still persists.
  • Was able to resolve the issue by deleting the problem module and moving its imports directly into the parent module

@ottodranik please test Ivy using the 9.0 preview releases, currently 9.0.0-next.6 is the latest. The issue you describe should have been resolved a while ago, but it’s not included in 8.x.

will it be backported to 8.x.x?

No, Ivy fixes are only committed to master (i.e. @next) while it’s in preview. There’s no production value in backporting to 8.x.

@ottodranik please test Ivy using the 9.0 preview releases, currently 9.0.0-next.6 is the latest. The issue you describe should have been resolved a while ago, but it’s not included in 8.x.

will it be backported to 8.x.x?

i am getting the same issue is there any solution to resolve this production build issue. Thanks in advance.

Build fail for me also with Ivy enabled 😔 The pipe 'json' could not be found (" ... "): ... Someday i’ll get to see this baby in action…

Same problem, solved with orientation of @tiagoboeing