Localized bundle generation failed: Unexpected reserved word 'let'

[submarines-and]

🐞 Bug report

Command (mark with an x)

• new
• build
• prerender
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, it worked in angular 11.

Description

Angular build fails with message:

✖ Localized bundle generation failed: /path/to/project/main.js: Unexpected reserved word 'let'. (1:2980997)
An error occurred inlining file "main.js"

Issue feels similar to this one, i.e. that some dependency has a strange coding pattern.The error refers to "main.js", which I presume is stored in memory. Is there a way to save this to disk? If so, I can search it to find the exact violating code.

Suspect list:

• Babel
• Localization
• Server side rendering (universal)
• Pre-rendering

🔬 Minimal Reproduction

1. ng new loc-error
2. ng add @angular/localize
3. ng add @nguniversal/express-engine
4. Add "localize": true to angular.json for server and browser build targets
5. Add "serverTarget": "loc-error:server:production" to prerender step
6. yarn prerender

Link to minimal repository with this setup:
https://github.com/submarines-and/angular-localization-error

🔥 Exception or Error

🌍 Your Environment

Angular CLI: 12.0.0
Node: 14.15.5
Package Manager: npm 6.14.11
OS: darwin x64

Angular: 12.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic
... platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.0
@angular-devkit/build-angular   12.0.0
@angular-devkit/core            12.0.0
@angular-devkit/schematics      12.0.0
@nguniversal/builders           12.0.0
@nguniversal/express-engine     12.0.0
@schematics/angular             12.0.0
rxjs                            6.6.7
typescript                      4.2.4

Localization on
Server side rendering (universal) on
Pre-rendering on.

yarn version 1.22.10

[alan-agius4]

The temporary file is saved on disk, you can add a breakpoint here

angular-cli/packages/angular_devkit/build_angular/src/server/index.ts

Line 104 in 069b0b4

const { emittedFiles = [], outputPath, webpackStats } = output;

to determine where it is saved.

[submarines-and]

I'm not sure how helpful this is, but here is the code at the failing row:column (1:2980997). Extract included below, full file attached,

main.txt

{let \u0275ResourceLoaderImpl_BaseFactory;return function ResourceLoaderImpl_Factory(t){return(\u0275ResourceLoaderImpl_BaseFactory||(\u0275ResourceLoaderImpl_BaseFactory=\u0275\u0275getInheritedFactory(ResourceLoaderImpl)))(t||ResourceLoaderImpl)}}(),ResourceLoaderImpl.\u0275prov=\u0275\u0275defineInjectable({token:ResourceLoaderImpl,factory:ResourceLoaderImpl.\u0275fac});const INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS=[INTERNAL_BROWSER_PLATFORM_PROVIDERS,{provide:COMPILER_OPTIONS,useValue:{providers:[{provide:ResourceLoader,useClass:ResourceLoaderImpl,deps:[]}]},multi:!0},{provide:PLATFORM_ID,useValue:"browser"}];new core_Version("12.0.0"),createPlatformFactory(platformCoreDynamic,"browserDynamic",INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS);class BrowserAnimationBuilder extends AnimationBuilder{constructor(rootRenderer,doc){super(),this._nextAnimationId=0;const typeData={id:"0",encapsulation:core_ViewEncapsulation.None,styles:[],data:{animation:[]}};this._renderer=rootRenderer.createRenderer(doc.body,typeData)}build(animation){const id=this._nextAnimationId.toString();this._nextAnimationId++;const entry=Array.isArray(animation)?sequence(animation):animation;return issueAnimationCommand(this._renderer,null,id,"register",[entry]),new BrowserAnimationFactory(id,this._renderer)}}BrowserAnimationBuilder.\u0275fac=function BrowserAnimationBuilder_Factory(t){return new(t||BrowserAnimationBuilder)(\u0275\u0275inject(RendererFactory2),\u0275\u0275inject(common_DOCUMENT))},BrowserAnimationBuilder.\u0275prov=\u0275\u0275defineInjectable({token:BrowserAnimationBuilder,factory:BrowserAnimationBuilder.\u0275fac}),BrowserAnimationBuilder.ctorParameters=()=>[{type:RendererFactory2},{type:void 0,decorators:[{type:Inject,args:[common_DOCUMENT]}]}];class BrowserAnimationFactory extends class{}{constructor(_id,_renderer){super(),this._id=_id,this._renderer=_renderer}create(element,options){return new RendererAnimationPlayer(this._id,element,options||{},this._renderer)}}

[submarines-and]

Could it be this file maybe:
https://github.com/angular/angular/blob/a92a89b0eb127a59d7e071502b5850e57618ec2d/packages/platform-browser-dynamic/src/platform-browser-dynamic.ts

Search results in main repo for something that looked like angular code:
https://github.com/angular/angular/search?q=INTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS

[alan-agius4]

@submarines-and, thanks a lot for taking a look at this. let \u0275ResourceLoaderImpl_BaseFactory is a perfectly valid variable name however Babel appears to be confusing this with invalid syntax.

https://babeljs.io/repl#?browsers=ie%209&build=&builtIns=false&corejs=3.6&spec=false&loose=false&code_lz=DYUwLgBAOgrgDAJgOwFYBKIDOB7GAnAYxABlsBDAExDwEkBbAB2AH0AhMzEAMTILGzwBPIA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=unambiguous&lineWrap=false&presets=env&prettier=false&targets=&version=7.14.2&externalPlugins=