Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Syntax error in @angular/upgrade package due to differential loading

See original GitHub issue

🐞 bug report

Affected Package

The issue is caused by package @angular/....

@angular.upgrade@8.0.0-beta.13

Is this a regression?

Yes.

Yes, the previous version in which this bug was not present was: ....

Description

Due to differential loading. My app uses setAngularJSGlobal from @angular/upgrade/static. That code is now loaded in the browser as ES2015 code. That results in this line: https://github.com/angular/angular/blob/master/packages/upgrade/src/common/src/angular1.ts#L299 throwing a “Syntax Error”:

Uncaught SyntaxError: Identifier 'module' has already been declared

When i look at the source, module is already defined by webpack:

/***/ "../../node_modules/@angular/upgrade/fesm5/static.js":
/*!************************************************************************************************************************!*\
  !*** /.../node_modules/@angular/upgrade/fesm5/static.js ***!
  \************************************************************************************************************************/
/*! exports provided: ɵangular_packages_upgrade_static_static_e, ɵangular_packages_upgrade_static_static_c, ɵangular_packages_upgrade_static_static_a, ɵangular_packages_upgrade_static_static_d, ɵangular_packages_upgrade_static_static_b, getAngularJSGlobal, getAngularLib, setAngularJSGlobal, setAngularLib, downgradeComponent, downgradeInjectable, VERSION, downgradeModule, UpgradeComponent, UpgradeModule */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

A clear and concise description of the problem...

🔬 Minimal Reproduction

https://stackblitz.com/...

🔥 Exception or Error




Uncaught SyntaxError: Identifier 'module' has already been declared

🌍 Your Environment

Angular Version:




Angular CLI: 8.0.0-beta.16
Node: 10.15.2
OS: darwin x64
Angular: 8.0.0-beta.13
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, upgrade

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.0-beta.16
@angular-devkit/build-angular     0.800.0-beta.16
@angular-devkit/build-optimizer   0.800.0-beta.16
@angular-devkit/build-webpack     0.800.0-beta.16
@angular-devkit/core              8.0.0-beta.16
@angular-devkit/schematics        8.0.0-beta.16
@angular/cli                      8.0.0-beta.16
@ngtools/webpack                  8.0.0-beta.16
@schematics/angular               8.0.0-beta.16
@schematics/update                0.800.0-beta.16
rxjs                              6.5.1
typescript                        3.4.4
webpack                           4.30.0

Anything else relevant?

Issue Analytics

State:
Created 4 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

2reactions

filipesilvacommented, Apr 23, 2019

As far as I can tell, this is a webpack bug: https://github.com/webpack/webpack/issues/7369

0reactions

angular-automatic-lock-bot[bot]commented, Sep 15, 2019

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.}

Top Results From Across the Web

upgrade @angular/material get SyntaxError - Stack Overflow

We currently need to upgrade this project's angular version from 7.2.1 to latest version. as we need to add new feature in this...

A Guide to Angular 8's Differential Loading Feature - Auth0

In a nutshell, differential loading means to send newer, flashier code to newer browsers and stable legacy code to legacy browsers. This ...

Angular 8: Upgrading & Summary of New Features

With differential loading, two bundles are created when building for production: a bundle for modern browsers that support ES2015+ and a bundle ......

Angular < 13: How to support IE11 - DEV Community ‍ ‍

EDIT: FROM ANGULAR V13, IE11 CAN NO LONGER BE SUPPORTED. IF YOU NEED TO SUPPORT IE11, PLEASE USE A VERSION OF ANGULAR <13 ......

A Guide to Angular 8's Differential Loading | by Auth0 | Medium

This generally translates into two things: modern syntax and polyfills. On a newer browser that supports recent syntax changes in JavaScript (such as...