Angular 9 breaks xi18n

[DefeninMaxime]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

In angular 8+ when I use ng xi18n, command runs without error. Since angular 9, it produce an error.

Description

Produced error : Metadata collected contains an error that will be reported at runtime: Lambda not supported.

🔬 Minimal Reproduction

Try to execut ng xi18n inside a project with lambda.

For example:
Set a new route with:
{ path: 'signin', loadChildren: () => import('./lazy-loader-modules/lazy.module').then(m => m.LazyModule) }

And have a tsconfig like:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": true,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "types": [
      "node",
      "fabric"
    ],
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableIvy": true,
    "allowEmptyCodegenFiles": true,
    "annotateForClosureCompiler": true,
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "enableResourceInlining": true
  }
}

🔥 Exception or Error

Metadata collected contains an error that will be reported at runtime: Lambda not supported.

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.0.7
Node: 12.3.1
OS: win32 x64

Angular: 9.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router, service-worker
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.900.7
@angular-devkit/build-angular      0.900.7
@angular-devkit/build-ng-packagr   0.900.7
@angular-devkit/build-optimizer    0.900.7
@angular-devkit/build-webpack      0.900.7
@angular-devkit/core               9.0.7
@angular-devkit/schematics         9.0.7
@angular/cdk                       9.1.3
@angular/flex-layout               9.0.0-beta.29
@angular/material                  9.1.3
@ngtools/webpack                   9.0.7
@schematics/angular                9.0.7
@schematics/update                 0.900.7
ng-packagr                         9.0.3
rxjs                               6.5.4
typescript                         3.7.5
webpack                            4.41.2

Anything else relevant?

[nicolasd]

Hello,

have the same issue, any one could help ?

thanks

[petebacondarwin]

The problem is that the xi18n process uses the old ViewEngine compiler which has some restrictions on anonymous fat arrow functions (i.e. "lambdas"). The workaround, until we implement the new Ivy-based i18n extraction, is to use exported named functions instead of anonymous functions. So instead of :

{ path: 'signin', loadChildren: () => import('./lazy-loader-modules/lazy.module').then(m => m.LazyModule) }

You would need to do something like the following, I believe:

export function loadLazyModule() {
  return import('./lazy-loader-modules/lazy.module').then(m => m.LazyModule);
}

{ path: 'signin', loadChildren: loadLazyModule }

[DefeninMaxime]

Yes, this works.. But I don't understand why when we migrate to angular 9, code is transformed with lambda if other fixtures will not work after that...

[petebacondarwin]

For v9 we did not implement the new i18n message extraction, which parses the Angular component templates and extracts messages that will need to be translated. Instead we resolved to continue to use the pre-ivy extraction mechanism. Unfortunately this old mechanism relies upon the Angular code being compiled by the old ViewEngine compiler, which is not as clever at understanding (and statically evaluating) anonymous functions (aka lambdas).

For v10 we expect to have implemented a new extraction mechanism that does not rely upon the ViewEngine compiler, and so this restriction will go away then.

[DefeninMaxime]

Ok, maybe this could be document in migration tool to prevent issue like this ?
(Sorry if I miss something)

[petebacondarwin]

Yes, we should document this. @DefeninMaxime - can I ask where you tried looking for solutions when you came across this before posting the issue? It will help us work out where the best place to document it is.

[iuliust]

The problem is that the xi18n process uses the old ViewEngine compiler which has some restrictions on anonymous fat arrow functions (i.e. "lambdas"). The workaround, until we implement the new Ivy-based i18n extraction, is to use exported named functions instead of anonymous functions. So instead of :

{ path: 'signin', loadChildren: () => import('./lazy-loader-modules/lazy.module').then(m => m.LazyModule) }

You would need to do something like the following, I believe:

export function loadLazyModule() {
  return import('./lazy-loader-modules/lazy.module').then(m => m.LazyModule);
}

{ path: 'signin', loadChildren: loadLazyModule }

Didn't work for me.
I'm running the latest version of the cli though :
Angular CLI: 9.1.0
Node: 12.16.1
OS: linux x64

Angular: 9.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.901.0
@angular-devkit/build-angular 0.901.0
@angular-devkit/build-optimizer 0.901.0
@angular-devkit/build-webpack 0.901.0
@angular-devkit/core 9.0.6
@angular-devkit/schematics 9.0.6
@angular-devkit/schematics-cli 0.901.0
@angular/cdk 9.2.0
@angular/flex-layout 9.0.0-beta.29
@angular/material 9.2.0
@ngtools/webpack 9.1.0
@nguniversal/builders 9.1.0
@nguniversal/common 9.0.2
@nguniversal/express-engine 9.1.0
@schematics/angular 9.1.0
@schematics/schematics 0.901.0
@schematics/update 0.901.0
rxjs 6.5.5
typescript 3.8.3
webpack 4.42.0

[petebacondarwin]

@iuliust - please provide more information about your scenario if the suggested fix doesn't work. Are you getting the exact same error message? Can you provide a minimal reproduction that we can look at? Have you looked through your code for fat arrow functions that might be used in NgModule, Component, etc, decorated classes?

[oxycoder]

The following code still not work with current xi18n (9.1.3)

  {
    path: 'user',
    loadChildren: () => import('@oms/user/user.module').then((m) => m.UserModule),
    data: {
      title: $localize`:@@user:User`
    }
  },

ERROR in Cannot read property 'loadChildren' of undefined

However, build and serve are working.

[lukengda]

Are we still on track for an ivy based i18n extraction in v10? Where can I find the progress status for that? I suppose that the problems described above would be fixed with that.

[petebacondarwin]

I'm really sorry but the ivy message extraction has missed the cut for 10.0.0.
Targeting 10.1.0 now - I have just not had any capacity to work on this over the last few weeks.

The main PR is #32912 but this is blocked on #36843

[JohannesHoppe]

Here is a pragmatic workaround.

Instead of ng xi18n use the Locl cli from @ocombe.
https://github.com/loclapp/locl/tree/master/libs/cli#extraction

npm install @locl/cli --save-dev
npx locl extract -s="dist/apps/demo/*.js" -f=xmb -o=messages.xmb

I have tested this with XMB files, the generated files look slightly different, but the same keys are extracted (only in a different order). So we can finally all upgrade to Ivy! 🙂👍

---

To enable even more people to find a solution via Google. My error message was:

ERROR in src/app/xxx.reducer.ts(19,24): Error during template compile of 'reducer'
  Function calls are not supported in decorators but 'createReducer' was called.

So, I was using the new shorter syntax to create a reducer in NgRx, which was also not compatible with the current i18n extraction tooling (see)

[alan-agius4]

Transferring to the FW repo, to be triaged better.