0

I just upgraded from Angular 4.3.3 to Angular 5.2.1. With doing so now when I build in dev (ng build --dev) the project build just fine. But when building in prod (ng build --prod) and the application loads in the console I get "Uncaught ReferenceError: define is not defined". I have verified that I have updated all the depreciated syntax in my project.

Does anyone else have any other ideas.

I am using a third party package called Wijmo, but I have already updated that to their latest stable release.

Gunner1714
  • 1
  • 1

1 Answers1

1

Please find the answer here:

The build started working for me after I replaced Wijmo AMD modules (from the NpmImages\wijmo-amd-min folder) with CommonJS modules (from the NpmImages\wijmo-commonjs-min folder). This looks like not a problem with Wijmo AMD, the details below.

Below are the details of the investigation. The problem is caused by the Build Optimizer process, controlled by the “--build-optimizer” flag, true by default for “—prod” builds with Angular 5 (false for Angular 4).

The build works without problems if to use non-minified Wijmo AMD modules from the NpmImages\wijmo-amd-src folder.

I checked the minified wijmo.js module and it’s absolutely correct (details below), which means that Build Optimizer just contains a bug that doesn’t allow it to correctly parse a minified AMD module.

Below are some details about how CollectionView class is exported from the wijmo.js module.

A. Non-minified wijmo.js: A.1) Here’s the AMD ‘define’ function declaration:

define(["require", "exports", "wijmo/wijmo"], function (require, exports, wjcSelf) {

A.2) Here’s the beginning of the CollectionView class definition:

var CollectionView = (function () {
    function CollectionView(sourceCollection, options) {
        var _this = this;
        this._idx = -1;
        this._srtDsc = new ObservableArray();
        this._grpDesc = new ObservableArray();

A.3) Here the CollectionView export statement: exports.CollectionView = CollectionView;

Note that it uses ‘exports’ parameter passed to the ‘define’ callback function in #1 (bolded).

B. Now let’s check how this stuff looks in the minified wijmo.js module:B.1) AMD define:

define(["require","exports","wijmo/wijmo"],function(t,e,n)

Note that ‘exports’ parameter from A.1 is renamed to ‘e’. B.2) Beginning of the CollectionView class definition:

Mt=function(){function t(t,e){var n=this;this._idx=-1,this._srtDsc=new xt,this._grpDesc=new xt,

“var CollectionView” from A.1 is renamed to Mt here. B.3) Export statement

e.CollectionView=Mt;

‘e’ is the ‘e’ parameter from the ‘define’ callback function from B.1, which is a minified version of the ‘export’ parameter from A.1.

I.e. the minified wijmo.js module exports CollectionView absolutely correctly, and it seems that the problem is in the Build Optimizer. We can do nothing here. So the workaround could be to use non-minified Wijmo AMD modules. But as I said before – the right way is to use CommonJS format, this will save from problems like this!

~Manish

Manish Gupta
  • 276
  • 2
  • 5