Unable to import Wijmo5 (Angular + WebPack)

Posted by: kevin3 on 14 September 2017, 11:56 am EST

    • Post Options:
    • Link

    Posted 14 September 2017, 11:56 am EST

    I know there have been a lot of questions about this, I’ve spent days - probably getting close to 10 total working days now - since I bought the enterprise license trying desperately to simply begin using it! I’ve read the blog posts to address this issue, I’ve attempted to replicate the provided examples too, but I always seem to run into an issue or many that will prevent the app from loading. This is a very frustrating process, so I’ll just get right to my current issue and hope someone can help…

    When trying to start my app I see many warnings such as:

    
    WARNING in ./~/wijmo/wijmo.angular2.grid.ts
    755:27-44 "export 'detail' (imported as 'wjcGrid') was not found in 'wijmo/wijmo.grid'
    
    
    Unhandled Promise rejection: Cannot set property culture of #<Object> which has only a getter ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot set property culture of #<Object> which has only a getter
        at Object.<anonymous> (wijmo.ts:107)
        at __webpack_require__ (bootstrap 79541ca…:52)
        at Object.<anonymous> (wijmo.angular2.core.ts:3)
        ....
    
    
    EXCEPTION: Uncaught (in promise): TypeError: Cannot set property culture of #<Object> which has only a getter
    TypeError: Cannot set property culture of #<Object> which has only a getter
    

    These prevent the app from loading.

    Here’s what I’m doing:

    ----Module----

    
    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { routing } from './new.routing';
    import { NewComponent } from './new.component';
    
    import { WjCoreModule } from 'wijmo/wijmo.angular2.core';
    import { WjChartModule } from 'wijmo/wijmo.angular2.chart';
    import { WjGaugeModule } from 'wijmo/wijmo.angular2.gauge';
    import { WjGridModule } from 'wijmo/wijmo.angular2.grid';
    import { WjInputModule } from 'wijmo/wijmo.angular2.input';
    import { WjOlapModule } from 'wijmo/wijmo.angular2.olap';
    import { WjViewerModule } from 'wijmo/wijmo.angular2.viewer';
    
    @NgModule({
      imports: [
        CommonModule,
        routing,
        CoreModule,
        WjCoreModule,
        WjGridModule,
        WjChartModule,
        WjGaugeModule,
        WjInputModule,
        WjOlapModule,
        WjViewerModule
      ]
    {)
    export class NewModule {}
    

    ----Component----

    
    import { Component, OnInit } from '@angular/core';
    import * as wjcCore from 'wijmo/wijmo'; 
    import * as wjcGrid from 'wijmo/wijmo.grid';
    // I've seen examples which instead import "from 'wijmo/wijmo.angular2.<thing>', so I've tried that as well, with no improvement
    @Component({
        selector: 'new',
        templateUrl: './new.component.html',
        styleUrls: ['./new.component.scss']
    })
    export class AuditComponent implements OnInit {
        private auditRecords: Object = JSON.parse(
    {
                    "items": [
                        {
                        "time": 1488272665,
                        "message": "audit message 1",
                        "username": "webdevapi",
                        },
                        {
                        "time": 1488272587,
                        "message": "audit message 2",
                        "username": "webdevapi",
                        },
                        {
                        "time": 1488272586,
                        "message": "audit message 3",
                        "username": "webdevapi",
                        },
                        {
                        "time": 1488272586,
                        "message": "Login Success:",
                        "username": "webdevapi",
                        },
                        {
                        "time": 1488272581,
                        "message": "audit message A",
                        "username": "webdevapi",
                        },
                        {
                        "time": 1488272580,
                        "message": "Login Success:",
                        "username": "webdevapi",
                        },
                        {
                        "time": 1488270930,
                        "message": "Login Success:",
                        "username": "csm_processes",
                        }
                    ],
                    "paging": {
                        "offset": 0,
                        "limit": 7,
                        "count": 7,
                        "pages": 1
                    }
                    }
    );)
        constructor() {}
        ngOnInit() {}
    }
    

    ----HTML----

    <wj-flex-grid [itemsSource]="auditRecords.items">
        <wj-flex-grid-column [header]="'Time'" [binding]="'time'">
        </wj-flex-grid-column>
        <wj-flex-grid-column [header]="'Message Content'" [binding]="'message'">
        </wj-flex-grid-column>
        <wj-flex-grid-column [header]="'Username'" [binding]="'username'">
        </wj-flex-grid-column>
    </wj-flex-grid>

    I have searched exhaustively for a solution to this problem, I have not found one. Hopefully someone here can point me in the right direction.

  • Posted 14 September 2017, 11:56 am EST

    Hi,

    Could you please share which angular version and wijmo builds you are using?

    It seems that you are trying to set culture that throws error. Are we right?

    If possible, please share a sample depicting your issue?

    Thanks ,

    Manish Kumar Gupta

  • Posted 14 September 2017, 11:56 am EST

    Angular: 4.1.1

    Wijmo: ‘5.20171.293’;

    Get the same error even after reference culture file inside of index.html

    Error:

    
    Uncaught TypeError: Cannot set property culture of [object Object] which has only a getter
        at Object.<anonymous> (wijmo.ts:8)
        at __webpack_require__ (bootstrap f41c48a…:52)
        at Object.module.exports (vendor.bundle.js:143159)
        at __webpack_require__ (bootstrap f41c48a…:52)
        at Object.<anonymous> (app.component.ts:17)
        at __webpack_require__ (bootstrap f41c48a…:52)
        at Object.<anonymous> (src async:7)
        at __webpack_require__ (bootstrap f41c48a…:52)
        at Object.<anonymous> (main.bundle.js:16370)
        at __webpack_require__ (bootstrap f41c48a…:52)
    
  • Posted 14 September 2017, 11:56 am EST

    Hello,

    Could you please share a demo sample depicting your issue so that we can debug it and assist you accordingly?

    Thanks,

    Manish Kumar Gupta

  • Posted 14 September 2017, 11:56 am EST

    I was able to resolve this some time ago with some help over the phone from someone on the Wijmo team. I was much worse then at documenting such things so when I started to write this post I could no longer remember nor recover what the ‘fix’ was. Having said that, I’ve just encountered the same issue using Wijmo5 amd-src in an @angular/cli project (webpack) and I can successfully compile by changing line 8 in wijmo/wijmo.ts as described below -

    in addition to this comparatively dirty ‘fix’, I believe I was able to recreate the more graceful approach that support had originally helped me execute. The first, not recommended for use, ‘fix’ is below - and continue down the post to find the final which I believe to address the problem in a more acceptable fashion.

    In node_modules/wijmo/wijmo.ts(starting at line 4):

    
    import * as wjcSelf from 'wijmo/wijmo';
    var _globalCulture = window['wijmo'] && window['wijmo'].culture;
    window['wijmo'] = wjcSelf;
    window['wijmo'].culture = _globalCulture;
    // ^ This causes:
    //      wijmo.ts:8 Uncaught TypeError: Cannot convert undefined or null to object
    //          at Function.assign(<anonymous>)
    //          at Object.ObserversMixin.extend.this$1(wijmo.ts:8)
    //          at __webpack_require__ (bootstrap b784195…:52)
    //          at Object.<anonymous>(vendor.bundle.js:101151)
    //          at __webpack_require__ (bootstrap b784195…:52)
    //          at Object.<anonymous>(vendor.bundle.js:230980)
    //          at __webpack_require__ (bootstrap b784195…:52)
    //          at Object.1093 (socket.browser.ts:24)
    //          at __webpack_require__ (bootstrap b784195…:52)
    //          at Object.168 (main.bundle.js:5622)
    
    Object.assign({}, wjcSelf, _globalCulture);
    // ^ This seems to iron things out, if you comment out the original line 8 referenced by the errror.
    // I don't imagine it matches the developer's original intentions and may cause problems I have yet to see...
    

    I suspect that, since the error is produced from a ts file, my tsconfig has something to do with it. I vaguely remember having to adjust that for the original time I was able to resolve this with the help of support - and I’m certain it was a much more graceful fix which didn’t require manually intervening on the wijmo package files like this one does. My tsconfig.app.json can be found below - I tried to set up a plunker but I’m not all that familiar with the tool and was failing my face off trying to get it working as my local project does.

    tsconfig.app.json:

    
    {
      "compilerOptions": {
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
          "es2016",
          "dom"
        ],
        "outDir": "../out-tsc/app",
        "target": "es5",
        "module": "es2015",
        "baseUrl": "",
        "types": [
          "webpack-env"
        ],
        "paths": {
          "@killbox/soc-api-sdk": [
            "app/shared/sdk"
          ],
          "@killbox/auth": [
            "packages/killbox/auth"
          ],
          "@killbox/layout": [
            "packages/killbox/layout"
          ],
          "@killbox/ui": [
            "packages/killbox/ui"
          ]
        }
      },
      "exclude": [
        "**/*wijmo*",
        "test.ts",
        "**/*.spec.ts"
      ]
    }
    

    When I change my tsconfig to target es6 I see the exact same behavior as with es5… no surprise here - as I noted above the error references a specific line in a ts file and so a target adjustment wouldn’t likely have any benefit. So instead I change “module” to “amd” and I get the following error in console which prevents successful compilation:

    
    wijmo.ts:4375 Uncaught TypeError: Cannot assign to read only property 'prototype' of function 'class ArrayBase {
            /**
             * Initializes a new instance of the @see:ArrayBase class.
             */
      ...<omitted>... }'
        at Object.<anonymous> (wijmo.ts:4375)
        at Object.ObserversMixin.extend.this$1 (wijmo.ts:8355)
        at __webpack_require__ (bootstrap 4f030ad…:52)
        at Object.<anonymous> (vendor.bundle.js:99267)
        at __webpack_require__ (bootstrap 4f030ad…:52)
        at Object.c (vendor.bundle.js:226245)
        at __webpack_require__ (bootstrap 4f030ad…:52)
        at Object.1093 (socket.browser.ts:24)
        at __webpack_require__ (bootstrap 4f030ad…:52)
        at Object.168 (main.bundle.js:5292)
    

    Strange that the other error is no longer there with es6… well, I thought I’d set that back to es5 after having decided that target can’t resolve the problem that exists before transpilation. Once I set that back to ES5 and leave the “module” change to “amd” it works. My application compiles successfully and without even warnings which would otherwise just annoy me but not necessarily prevent compilation.

    All of this would probably make good sense if I knew more about the different variations of ES, as well as the different module code generation options (amd, umd, commonjs, etc). I’d be curious to know whether instead of changing the tsconfig “module” option I should have simply used a different Wijmo NPM image. With my tsconfig “module” set to “es2015” as it was originally, would the wijmo-commonjs-[src/min] package have been successful? It’d be a simple test but between ‘fixing’ this again and typing up this post I’m just chomping at the bit to get back to coding, so hopefully that question can be answered by someone with more experience/knowledge just by reading it.

    I know that this is probably kiddie stuff for a professional dev, but for me it’s been quite difficult and time consuming just to get Wijmo integrated into some different projects. I don’t have to make the amd/systemjs/commonjs distinction when importing Telerik’s Kendo-UI modules, nor with NgPrime, or anything else for that matter… so why must I dance like this order to use Wijmo?

    My final tsconfig.app.json:

    
    {
      "compilerOptions": {
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [
          "es2016",
          "dom"
        ],
        "outDir": "../out-tsc/app",
        "target": "es5",
        "module": "amd",
        "baseUrl": "",
        "types": [
          "webpack-env"
        ],
        "paths": {
          "@killbox/soc-api-sdk": [
            "app/shared/sdk"
          ],
          "@killbox/auth": [
            "packages/webapp-auth"
          ],
          "@killbox/layout": [
            "packages/webapp-layout"
          ],
          "@killbox/ui": [
            "packages/webapp-ui"
          ]
        }
      },
      "exclude": [
        "**/*wijmo*",
        "test.ts",
        "**/*.spec.ts"
      ]
    }
    
  • Posted 14 September 2017, 11:56 am EST

    Hi All,

    We are sorry, we are unable to replicate issue at our end with latest build 5.20171.293 which can be downloaded from here.

    Please refer to the attached sample that implements the same and created for replicating issue.

    Here are the steps for replicating issue at our end:

    • Open Cmd
    • Create project using ng new *Project_name*
    • Install Wijmo Npm images using npm install --save http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-AMD-5.20171.293.tgz
    • Copy wijmo.min.css file in src folder and register in .angular-cli.json file
    • Add WjGridModule in app.module.ts file
    • Add data in app.component.ts file
    • Add FlexGrid in app.component.html file
    • Run project using npm start command

    If issue persits, please modify the attached sample so that we can debug at our end and can assist you accordingly.

    Thanks,

    Manish Kumar Gupta

    2017/05/NG_CLI_V5.20171.293.zip

  • Posted 14 September 2017, 11:56 am EST

    I’m seeing this in C1Wijmo-Enterprise_5.20172.328 as well when using the “wijmo-amd-src” NPM image. If I use the “wijmo-amd-min” image, I don’t get these errors. I’m using

    "module": "es2015"
    .

    For those not familiar with the different JavaScript Module Systems, this article does a good job of explaining things: https://auth0.com/blog/javascript-module-systems-showdown/

    I don’t think having the working example based on an NPM image from http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-AMD-5.20171.293.tgz is very helpful. A lot of the questions are specific to the NPM packages that come in the downloaded ZIP file and not from the package on the web.

    If I use

    "module": "amd"
    , the warnings from Webpack and the exceptions in the app go away.

    Using “wijmo-commonjs-src” and “wijmo-system-src” with

    "module": "es2015"
    also causes the build warnings and application errors.

    Webpack build warnings:

    ./~/wijmo/wijmo.angular2.grid.ts
    1128:36-53 "export 'detail' (imported as 'wjcGrid') was not found in 'wijmo/wijmo.grid'

    It seems as though Wijmo is not compatible with the Angular CLI default tsconfig settings to use “es2015” modules. Don’t try to use “System” as a module choice with Angular CLI (or Webpack) due to

    System.register is not supported by webpack.

    Are there plans to produce a “wijmo-es2015-src” and “wijmo-es2015-min” NPM image in the future?

    If there are already es2015 modules for Wijmo, how do we tell NPM to use those?

    For now, it seems like the best approach for using the Angular CLI is to set your

    src/tsconfig.app.json
    to use
    "module": "amd"
    and then in NPM use something like
    "wijmo": "C1Wijmo-Enterprise_5.20172.328/NpmImages/wijmo-amd-src"
    .

  • Posted 14 September 2017, 11:56 am EST

    Hello Michael,

    We are sorry for the delayed response.

    Thank you for the detailed information. We are able to replicate the issue at our end and it seems a bug. Hence, this issue has been escalated to the concerned team for further investigation with tracking id 275786.

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

    Thanks,

    Manish Kumar Gupta

  • Posted 18 October 2017, 4:10 am EST

    I heard that there is some work being done to address this. It looks like it didn’t make it into the last release? Any idea if this will be part of the next release?

  • Posted 20 January 2018, 7:32 am EST

    Hi,

    We are sorry for the late reply.

    This issue has been fixed in 5.20172.359+ build.

    ~Manish

  • Posted 5 March 2018, 9:25 am EST

    I do not know what you fixed: I have still the same issue with Wijmo Library build 5.20173.409, sorry.

  • Posted 15 March 2018, 1:56 pm EST

    I am having the same problem with 5.20173.409. Where do you have revised instructions?

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels