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

Question

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 ^^

Answer 1

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 ^^^

Answer 2

I'm currently using wijmo5 with angular-cli.

• Download the zip from the website and extract this folder NpmImages\wijmo-amd-min.

• Inside package.json add "wijmo": "./vendor/wijmo-334/wijmo-amd-min" (link to where you extract the folder).

• npm install

Then it works nicely!