Angular 5 and Wijmo 405

Angular 5 and Wijmo 405

Posted by: andy on 23 January 2018, 8:28 am EST

• 

  andy

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 23 January 2018, 8:28 am EST

  Hey all,
  
  I updated to Angular 5 and Wijmo 405 and I hate to update both, but I did now when I build in production I get “Uncaught ReferenceError: define is not defined”. When I build in dev no errors are produced. Also when I build in production I get a slew of these warnings

  WARNING in ./src/app/components/form.storepoilyprint.component/form.storepoilyprint.component.ts
  
  9:28-50 "export ‘CollectionView’ (imported as ‘wjcCore’) was not found in ‘wijmo/wijmo’
  
  at HarmonyImportSpecifierDependency._getErrors (C:\Enterprise\Enterprise\Development\Integration\OnBoarding\OnBoarding_WEB\node_modules@angular\cli\node_modules\webpack\lib\dependencies\HarmonyImportSpecifierDependency.js:65:15)
  
  at HarmonyImportSpecifierDependency.getWarnings (C:\Enterprise\Enterprise\Development\Integration\OnBoarding\OnBoarding_WEB\node_modules@angular\cli\node_modules\webpack\lib\dependencies\HarmonyImportSpecifierDependency.js:39:15)
  
  at Compilation.reportDependencyErrorsAndWarnings (C:\Enterprise\Enterprise\Development\Integration\OnBoarding\OnBoarding_WEB\node_modules@angular\cli\node_modules\webpack\lib\Compilation.js:703:24)
  
  at Compilation.finish (C:\Enterprise\Enterprise\Development\Integration\OnBoarding\OnBoarding_WEB\node_modules@angular\cli\node_modules\webpack\lib\Compilation.js:561:9)
  
  at applyPluginsParallel.err (C:\Enterprise\Enterprise\Development\Integration\OnBoarding\OnBoarding_WEB\node_modules@angular\cli\node_modules\webpack\lib\Compiler.js:502:17)
  
  at C:\Enterprise\Enterprise\Development\Integration\OnBoarding\OnBoarding_WEB\node_modules\tapable\lib\Tapable.js:289:11
  
  at _addModuleChain (C:\Enterprise\Enterprise\Development\Integration\OnBoarding\OnBoarding_WEB\node_modules@angular\cli\node_modules\webpack\lib\Compilation.js:507:11)
  
  at processModuleDependencies.err (C:\Enterprise\Enterprise\Development\Integration\OnBoarding\OnBoarding_WEB\node_modules@angular\cli\node_modules\webpack\lib\Compilation.js:477:14)
  
  at _combinedTickCallback (internal/process/next_tick.js:131:7)
  
  at process._tickCallback (internal/process/next_tick.js:180:9)
  
  @ ./src/app/components/form.storepoilyprint.component/form.storepoilyprint.component.ts
  
  @ ./src/app/components/form.storepoilyprint.component/form.storepoilyprint.component.ngfactory.js
  
  @ ./src/app/app.module.ngfactory.js
  
  @ ./src/main.ts
  
  @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

  Any help is much appreciated.

• 

  peter.blasco

  • Post Options:
  • Link
    Copy

  Posted 23 January 2018, 8:50 am EST

  We are seeing the same errors using:

  Angular 5.2.1
  
  Angular CLI 1.6.5

  This is blocking us from upgrading to angular 5.

• 

  richard.mccluskey

  • Post Options:
  • Link
    Copy

  Posted 23 January 2018, 12:01 pm EST

  Just wanted to chime in that I am having the same problem.

  I generated an angular app with the latest cli and setup a simple example to show the error. Just follow the steps in the readme to see the error.

  https://github.com/rjmccluskey/wijmo-ng5-error-example

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 23 January 2018, 7:24 pm EST

  Hi All,
  
  We are sorry for the inconvenience.
  
  This is a known issue to us and this issue is with the development team for investigation with tracking id 305651.

  We will let you know as soon as we get any update on this.

  ~Manish

• 

  andy

  • Post Options:
  • Link
    Copy

  Posted 24 January 2018, 5:23 am EST

  What version of Typescript are you all running?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 24 January 2018, 2:29 pm EST

  Hi Andy,
  
  The TS version for project is ~2.5.3.
  
  System TS version: 2.1.6

  ~Manish

• 

  andy

  • Post Options:
  • Link
    Copy

  Posted 25 January 2018, 12:35 am EST

  Manish,
  
  I tried to go back to 380 and got the same error message. I would assume that would be normal since the older version wouldn’t have been compatible with Angular 5.

  Also do we know if this is a bug in core or a certain module? I have co-workers that are working on another project and they did not run into this.

  Andy

• 

  richard.mccluskey

  • Post Options:
  • Link
    Copy

  Posted 25 January 2018, 4:58 am EST

  I know that it is at least a problem if you use CollectionView with grids

• 

  andy

  • Post Options:
  • Link
    Copy

  Posted 25 January 2018, 8:32 am EST

  @feniksreborn

  We are waiting on them to push out a release to fix this.

  Andy

• 

  andy

  • Post Options:
  • Link
    Copy

  Posted 29 January 2018, 3:05 am EST

  Manish,
  
  Do we have a timeline on when the patch will be released?

  Thank You
  
  Andy

• 

  alex.ivanenko

  • Post Options:
  • Link
    Copy

  Posted 29 January 2018, 5:47 am EST

  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.
  
  So please use CommonJS modules instead of AMD.
  
  CommonJS is the most widespread format, better understandable by major bundlers and loaders. The only reason to use AMD format instead of CommonJS is if you use RequireJS loader, which is not the case in the discussing issue.

  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!

  Thanks,
  
  Alex

• 

  alex.ivanenko

  • Post Options:
  • Link
    Copy

  Posted 29 January 2018, 9:27 am EST

  Hello

  It’s difficult to say something without looking at the example app. But errors like this
  
  Type ‘Event’ is not assignable to type ‘Event’.
  
  usually indicate that you have two (or more) files with definitions of the same type (Event in this case) visible to the TS compiler.
  
  For example, the often use case is where you have npm Wijmo installation (in node_modules/wijmo) and also Wijmo .d.ts files somewhere else under the project root (out of the node_modules folder).

  Thanks,
  
  Alex

• 

  andy

  • Post Options:
  • Link
    Copy

  Posted 30 January 2018, 12:30 am EST

  Alex,
  
  That was the resolution for me. Once I have removed the entire folder from node_modules and put in the 405 I had no further issue.

  I will continue using the common-js files from now on.

  Thank You
  
  Andy