Search code examples
angularangular-cliwijmowijgrid

Wijmo 5 with Angular System.register is not supported by webpack

I tried to use FlexGrid of Wijmo modules next when i serve my project I got this Error : (I am using AngularCLI)

WARNING in ./~/wijmo/wijmo.angular2.core.js
System.register is not supported by webpack.
 @ ./src/app/app.module.ts 12:0-57
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

despite the import was working in app.module.ts

import { WjCoreModule } from 'wijmo/wijmo.angular2.core';
import { WjGridModule } from 'wijmo/wijmo.angular2.grid';

 imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    WjCoreModule,
    WjGridModule
  ],

Thanks TEAM ^^

Solution

  • finally if found solution, apparently i got the wrong npm package, then there are three types of JavaScript module systems of npm packages 

    ( CommonJS - AMD - System )
the right package that works with AngularCLI is AMD module system

    C1Wijmo-Enterprise-Eval-AMD-5.20172.328

    Wijmo 5 reply

    GridWijmo5

    How to install Wijimo Grid :

    Take the last version of Wijmo from this url :

    http://prerelease.componentone.com/wijmo5/npm-images

    Required for AngularCLI: AMD version. So you have two choices :

    First 1 :

    Add this dependency in package.json file : section : "dependencies"

    "wijmo": "http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-AMD-5.20172.328.tgz",

    and Redo: npm install

    it's same to do:

    npm --save install http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-AMD-5.20172.328.tgz

    Second 2:

    because yarn is hanging this package name, we ll add it manually in our node_modules/

    wget -P node_modules/wijmo/ http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-AMD-5.20172.328.tgz

    extract the download file.

    and make dependencies to this folder

    "wijmo": "file:node_modules/wijmo",

    Styles Grid

    • Fetch the style file into src/assets/css/ folder

    mkdir src/assets/css/ && curl -O http://cdn.wijmo.com/5.20172.334/styles/wijmo.min.css > src/assets/css/wijmo.min.css

    Add Wijmo.min.css file in the Angular-cli.json file

    "styles": [
            "styles.css",
            "assets/css/wijmo.min.css"
        ],

    Import the WjGridModule in your app.module.ts

    you should to check if the import Module is good.

    import { WjGridModule } from 'wijmo/package/wijmo.angular2.grid'; import { WjCoreModule } from 'wijmo/package/wijmo.angular2.core';

    after Continue to develop ^^^