[Ivy] Error: Missing pipe: translate

[pshurygin]

🐞 bug report

Is this a regression?

Not an issue with VE. Also not an issue with ivy version below 9.0.0-next-1.
Issue is present at lease with next-3 and next-4 versions.

Description

Here is a compilation error we get with our application with enableIvy: true and angular 9.0.0-next-4

🔬 Minimal Reproduction

Not sure how to reproduce the error as the stacktrace does not point to any place in our pretty large appliction . We use ngx-translate everywhere (about 2000 usages of translate pipe all over the place). Also we have a lot of lazy-loaded modules wchich also use ngx-translate with TranslateModule.forChild() call.

🔥 Exception or Error

ERROR in Error: Missing pipe: translate
    at Context.getPipeByName (D:\Solomoto\impl\solo\SolomotoWebRole\node_modules\@angular\compiler-cli
\src\ngtsc\typecheck\src\type_check_block.js:494:23)
    at tcbResolve (D:\Solomoto\impl\solo\SolomotoWebRole\node_modules\@angular\compiler-cli\src\ngtsc\
typecheck\src\type_check_block.js:987:28)
    at AstTranslator.maybeResolve (D:\Solomoto\impl\solo\SolomotoWebRole\node_modules\@angular\compile
r-cli\src\ngtsc\typecheck\src\type_check_block.js:851:74)
    at AstTranslator.translate (D:\Solomoto\impl\solo\SolomotoWebRole\node_modules\@angular\compiler-c
li\src\ngtsc\typecheck\src\expression.js:69:33)
    at D:\Solomoto\impl\solo\SolomotoWebRole\node_modules\@angular\compiler-cli\src\ngtsc\typecheck\sr
c\expression.js:104:124
    at Array.reduce ()
    at AstTranslator.visitInterpolation (D:\Solomoto\impl\solo\SolomotoWebRole\node_modules\@angular\c
ompiler-cli\src\ngtsc\typecheck\src\expression.js:104:36)
    at Interpolation.visit (D:\Solomoto\impl\solo\SolomotoWebRole\node_modules\@angular\compiler\bundl
es\compiler.umd.js:7394:28)
    at AstTranslator.translate (D:\Solomoto\impl\solo\SolomotoWebRole\node_modules\@angular\compiler-c
li\src\ngtsc\typecheck\src\expression.js:73:24)
    at Object.astToTypescript (D:\Solomoto\impl\solo\SolomotoWebRole\node_modules\@angular\compiler-cl
i\src\ngtsc\typecheck\src\expression.js:49:27)
    at tcbExpression (D:\Solomoto\impl\solo\SolomotoWebRole\node_modules\@angular\compiler-cli\src\ngt
sc\typecheck\src\type_check_block.js:851:29)
    at TcbTextInterpolationOp.execute (D:\Solomoto\impl\solo\SolomotoWebRole\node_modules\@angular\com
piler-cli\src\ngtsc\typecheck\src\type_check_block.js:288:24)
    at Scope.executeOp (D:\Solomoto\impl\solo\SolomotoWebRole\node_modules\@angular\compiler-cli\src\n
gtsc\typecheck\src\type_check_block.js:710:26)
    at Scope.render (D:\Solomoto\impl\solo\SolomotoWebRole\node_modules\@angular\compiler-cli\src\ngts
c\typecheck\src\type_check_block.js:649:22)
    at TcbTemplateBodyOp.execute (D:\Solomoto\impl\solo\SolomotoWebRole\node_modules\@angular\compiler
-cli\src\ngtsc\typecheck\src\type_check_block.js:267:58)
    at Scope.executeOp (D:\Solomoto\impl\solo\SolomotoWebRole\node_modules\@angular\compiler-cli\src\n
gtsc\typecheck\src\type_check_block.js:710:26)

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.0-next.2
Node: 10.16.0
OS: win32 x64
Angular: 9.0.0-next.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-next.2
@angular-devkit/build-angular     0.900.0-next.2
@angular-devkit/build-optimizer   0.900.0-next.2
@angular-devkit/build-webpack     0.900.0-next.2
@angular-devkit/core              9.0.0-next.2
@angular-devkit/schematics        9.0.0-next.2
@angular/cdk                      8.1.4
@angular/cli                      9.0.0-next.2
@angular/material                 8.1.4
@ngtools/webpack                  9.0.0-next.2
@schematics/angular               9.0.0-next.2
@schematics/update                0.900.0-next.2
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.39.2

[spock123]

FWIW ngx-translate works perfectly for me with IVY. Did you include the TranslateModule in the Lazy loaded module as well?

[pshurygin]

Yes, otherwise it wouldn't have worked with VE. Also, it worked for me until latest 2 or 3 releases.

[pshurygin]

I could try to reproduce this, but i need some directions to what can cause such an error, so i can narrow it down to specific parts of our app.
Anyway, i think the error message for this kind of error should point to exact component & module causing the error.

[pshurygin]

Ok, so after some painful debugging I have discovered that the error message has nothing to do with the actual error.

The problem was that some 3rd-party libraries are not compatible with ivy and ngcc cannot handle them properly. Whenever we import these libraries into some module, components within this module start to blow up with these absolutely irrelevant error messages. Even if we remove translate pipe from the component, we'll get another irrelevant error message about some other non-existant issue.

Prior to version 9.0.0-next-1 this was not the case: the error message for these incompatible libraries was somewhat clear (pointing to the line where library's module was imported), but even that one could be improved.

The libraries i'm talking about are ng2-file-upload and angular-google-maps, both of them are known to be incompatible with ivy to the point that ngcc cannot handle them correctly.

So i can see two main issues here:

1. ngcc is not capable of handling some of the pre-ivy angular libraries. Not sure if this can be fixed on the angular side, or if it's the responsibility of the author of the library. In reality, some of these libraries have not been updated for years, so they probably wont ever be compatible with ivy, unless ngcc handles them
2. After 9.0.0-next-1 the error message for this type of issue has become cryptic and irrelevant to the root cause, leading to a lot of confusion for the developers.

[alxhub]

Should be fixed by #33454

[danielehrhardt]

So i can see two main issues here:

1. ngcc is not capable of handling some of the pre-ivy angular libraries. Not sure if this can be fixed on the angular side, or if it's the responsibility of the author of the library. In reality, some of these libraries have not been updated for years, so they probably wont ever be compatible with ivy, unless ngcc handles them
2. After 9.0.0-next-1 the error message for this type of issue has become cryptic and irrelevant to the root cause, leading to a lot of confusion for the developers.

How did you found the two 3rd-party libraries what caused the Issue?

[pshurygin]

You just go through your angular-based dependencies and remove them one by one until the problem is gone. The libs which were not updated lately and are less popular are more likely to be incompatible.

By the way, the 2 mentioned libs are updated atm to work with ivy and latest angular version.

[petebacondarwin]

@pshurygin - is this fixed for you now that #33454 has landed?

[pshurygin]

@petebacondarwin
Well, both of the libraries which were the cause for the issue are now updated and work correctly, so the error is gone. But i'm not sure if some other incompatible library may cause the same problem in the future.
Anyway, I will close this issue so, if anything, another issue should be opened.

[petebacondarwin]

Thanks @pshurygin

[erperejildo]

facing the same issue with v. ~8.2.14

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}