1.5.0 : let is a reserved identifier in FF logs

[rbleuse]

Bug Report or Feature Request (mark with an x)

- [ x ] bug report -> please search issues before submitting
- [ ] feature request

Repro steps.

I upgraded my ng project from ng-cli 1.4.9 to 1.5.0 and get the following error message in (at least this version) firefox 36 and dev environement, running ng serve :
SyntaxError: let is a reserved identifier vendor.bundle.js:24:0
This results in a blank page

Switching back to 1.4.9 works fine.
This error seems to happen with webpack as there is no error when testing in other environment than dev

The log given by the failure.

SyntaxError: let is a reserved identifier vendor.bundle.js:24:0

Mention any other details that might be useful.

The last working version is 1.5.0-rc.2.
With the rc3 upgrade, the error happens.

Here is --version using rc3 :

Angular CLI: 1.5.0-rc.3
Node: 6.11.3
OS: win32 x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, tsc-wrapped

@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.5.0-rc.3
@angular/flex-layout: 2.0.0-beta.9
@angular/material: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0-rc.3
@schematics/angular: 0.0.49
typescript: 2.4.2
webpack: 3.8.1

Here is --version using rc2 :

Angular CLI: 1.5.0-rc.2
Node: 6.11.3
OS: win32 x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, tsc-wrapped

@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.5.0-rc.2
@angular/flex-layout: 2.0.0-beta.9
@angular/material: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0-rc.2
@schematics/angular: 0.0.49
typescript: 2.4.2
webpack: 3.7.1

[filipesilva]

That seems to indicate one of you vendor libraries is using es2015 code. Can you try to identify which library that is, or offer a repro so we can investigate please?

[maturecheese]

Exact same problem on a new blank project
ng new testFirefox
cd testFirefox
ng serve

using angular-cli 1.6.0
SyntaxError: let is a reserved identifier vendor.bundle.js:24:0

tried downgrade to 1.5.0-rc.2 ... I'm now getting in console
mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create vendor.bundle 39
TypeError: Object.assign is not a function vendor.bundle 3136

Angular CLI: 1.5.0-rc.2
Node: 6.11.1
OS: darwin x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, tsc-wrapped

angular/cli: 1.5.0-rc.2
angular-devkit/build-optimizer: 0.0.35
angular-devkit/core: 0.0.22
angular-devkit/schematics: 0.0.41
ngtools/json-schema: 1.1.0
ngtools/webpack: 1.8.0-rc.2
schematics/angular: 0.0.49
schematics/schematics: 0.0.10
typescript: 2.3.4
webpack: 3.7.1

Chrome is fine. Something is obviously very wrong on my setup.

[rbleuse]

@filipesilva I can confirm that it happens on a clean project, as @maturecheese described.

Tested with fresh project & FF 36.0.1

$ ng --version

Angular CLI: 1.6.0
Node: 8.7.0
OS: win32 x64
Angular: 5.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.0
@angular-devkit/build-optimizer: 0.0.35
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.41
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0
@schematics/angular: 0.1.10
@schematics/schematics: 0.0.10
typescript: 2.4.2
webpack: 3.10.0

[giacomofc]

FF 42 also affected - with newer CLI

Angular CLI: 1.6.3
Node: 8.9.0
OS: linux x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

@angular/cli: 1.6.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.3
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

[filipesilva]

I tested on Firefox 56 just now and it seems ok.

I think this might be related to the how webpack-dev-server (or dev server) only supports the last two major browser versions (https://github.com/webpack/webpack-dev-server#browser-support). It shouldn't affect non-serve builds.

You should be able to test this by doing ng build and serving the contents of dist with another server.

[giacomofc]

@filipesilva

Browser compatibility for let on Firefox:

1. Prior to Firefox 44, let is only available to code blocks in HTML wrapped in a <script type="application/javascript;version=1.7"> block (or higher version) and has different semantics (e.g. no temporal dead zone).

2. Prior to Firefox 46, a TypeError is thrown on redeclaration instead of a SyntaxError.

3. Firefox 54 adds support of let in workers.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

[kpaxton]

Just ran into this myself. I can also confirm that 1.4.9 works and 1.5.0 does not with firefox 31, 38, and 45. 52+ seems to works just fine for me.

I also see this issue regardless of whether it's the dev-server or not. building for production with or without aot still causes this issue for me.

@filipesilva Any ideas on when we might see a fix? What is blocking it?

Any news on this? I'm working on a project that is required to work on FF 38 and it is currently broken.