angular: Angular 9 breaks xi18n

🐞 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?

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 20 (11 by maintainers)

Most upvoted comments

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 https://github.com/angular/angular/pull/32912 but this is blocked on https://github.com/angular/angular/pull/36843

petebacondarwin on May 7, 2020

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.

petebacondarwin on Mar 27, 2020

The aim is for this to be integrated in to the CLI by 10.1.0

petebacondarwin on Jul 10, 2020

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)

JohannesHoppe on May 11, 2020

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.

oxycoder on Apr 23, 2020