How to install Wijmo's FlexGrid in a Angular 2 app generated with angular-cli?

How to install Wijmo's FlexGrid in a Angular 2 app generated with angular-cli?

Posted by: nuno1 on 14 September 2017, 2:44 am EST

• 

  nuno1

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 2:44 am EST

  I want to use Wijmo’s FlexGrid on my Angular 2 project. My project is generated using the angular-cli v1.0.0-beta.11-webpack.8 (it uses webpack 2.1.0-beta.21). I’ve read the other forum posts about Wijmo’s integration using webpack but it did not help, I always end up with errors.

  I would be grateful if someone could provide a step-by-step guide on how to install Wijmo’s FlexGrid in a Angular 2 app generated with the angular-cli.

  To install the cli:

  npm install -g angular-cli@webpack

  
  
  To generated a demo project:

  ng new demo

  Thanks in advance!

• 

  surya

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:44 am EST

  Here’s the steps to reproduce the error:

  1 -

  npm install -g angular-cli@webpack

  2 -

  ng new demo

  3 -

  cd demo

  4 - Create a

  wijmo

  folder inside

  node_modules

  5 - Copy the type definitions (all *.d.ts files) from

  Dist/interop/angular2

  to

  node_modules/wijmo

  6 - Copy the actual modules in AMD format from

  Dist/interop/angular2/AMD

  to

  node_modules/wijmo

  7 - Create a

  wijmo

  folder inside

  node_modules/@types

  8 - Copy the typings from

  Dist/controls

  (all *.d.ts files) to

  node_modules/@types/wijmo

  9 - Create a

  vendor/wijmo

  folders inside the

  src

  folder

  10 - Copy the

  wijmo.grid.min.js

  ,

  wijmo.input.min.js

  and

  wijmo.min.js

  files from

  Dist/controls

  to

  src/vendor/wijmo

  11 - Copy the

  wijmo.min.css

  file from

  Dist/styles

  to

  src/vendor/wijmo

  12 - Open the

  angular-cli.json

  file and add

  vendor/wijmo/wijmo.min.css

  to the

  styles

  array and

  vendor/wijmo/wijmo.min.js

  ,

  vendor/wijmo/wijmo.grid.min.js

  ,

  vendor/wijmo/wijmo.input.min.js

  to the

  scripts

  array.

  13 - Open

  src/app/app.component.ts

  , add references to the typings and import the grid:

  ///<reference path="../../node_modules/@types/wijmo/wijmo.d.ts"/>
  ///<reference path="../../node_modules/@types/wijmo/wijmo.grid.d.ts"/>
  ///<reference path="../../node_modules/@types/wijmo/wijmo.input.d.ts"/>
  
  import * as wjGrid from 'wijmo/wijmo.angular2.grid';

  14 -

  ng serve

  15 - Add the directives:

  directives: [wjGrid.WjFlexGrid]

  (that’s when it fails!)

  After adding the directives I get the error:

  ERROR in ./src/app/app.component.ts
  Module not found: Error: Can't resolve 'wijmo/wijmo.angular2.grid' in '/Users/nunoarruda/Desktop/demo/src/app'
   @ ./src/app/app.component.ts 14:0-52
   @ ./src/app/index.ts
   @ ./src/main.ts
   @ multi main

  I’m using the latest version of Wijmo 5 (v 5.20162.198)

  What’s the issue here or what am I missing?

• 

  c1_alexi

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:44 am EST

  Hello

  Thanks for the detailed explanation.From it I don’t understand why this error occurs, because #5 ought to ensure that TypeScript compiler can successfully resolve the module name. Or this is not a TypeScript error?
  
  My problem is that I can’t try it by myself because so far I was unable to install

  angular-cli@webpack

  , I get some errors during installation and after that any attempt to run

  ng <any_option>

  results in an exception.
  
  I was able to install

  angular-cli

  , but if I got it correctly it creates a Broccoli based application. If you can give me some tips on how to install

  angular-cli@webpack

  then I could try to create a sample by myself.
  
  I used the following description to install

  angular-cli

  :
  
  https://github.com/angular/angular-cli
  
  , and this one for

  angular-cli@webpack

  :
  
  https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md

  And in order to install

  angular-cli@webpack

  I performed the following commands explained in the above link:

  npm uninstall -g angular-cli
  npm cache clean
  npm install -g angular-cli@webpack
  

  I use node v4.5.0 and npm v3.10.6.

  Alex

• 

  surya

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:44 am EST

  Hi Alex,

  Thanks for trying to help. I don’t have more information to share. Meanwhile, me and my team decided to stay away from the angular cli for now. We are now using the angular 2 quickstart as a boilerplate which uses systemjs. Already got Wijmo working now.

  Thanks.

• 

  c1_alexi

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:44 am EST

  Thanks for the update. I think it’s a very wise decision, for me cli looks rather raw now.

  Alex

• 

  w-lohan

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:44 am EST

  Hello,

  I have successfully used wijmo components with webpack but running into the same issue as nunoarruda with angular-cli.

  After getting the following when building…

  ERROR in ./[path]/[component].ts
  Module not found: Error: Can't resolve 'wijmo/wijmo.angular2.grid' in '[path]\[to]\[component]'

  in the browser console you get…

  looking for modules in [path]\[to]\node_modules
          using description file: [path]\[to]\package.json (relative path: ./node_modules)
            Field 'browser' doesn't contain a valid alias configuration
          after using description file: [path]\[to]\package.json (relative path: ./node_modules)
            using description file: [path]\[to]\node_modules\wijmo\package.json (relative path: ./wijmo.angular2.grid)
              as directory
                [path]\[to]\node_modules\wijmo\wijmo.angular2.grid doesn't exist
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                [path]\[to]\node_modules\wijmo\wijmo.angular2.grid doesn't exist
              Field 'browser' doesn't contain a valid alias configuration
              [path]\[to]\node_modules\wijmo\wijmo.angular2.grid doesn't exist
              .ts
                Field 'browser' doesn't contain a valid alias configuration
                [path]\[to]\node_modules\wijmo\wijmo.angular2.grid.ts doesn't exist
              .js
                Field 'browser' doesn't contain a valid alias configuration
                [path]\[to]\node_modules\wijmo\wijmo.angular2.grid.js doesn't exist

  I noticed that it looks for

  wijmo.angular2.grid.js

  and

  wijmo.angular2.grid.ts

  but never

  wijmo.angular2.grid.min.js

  (the actual file).

  In webpack this is solved by adding

  extensions: ['', '.ts', '.js', 'min.js', '.json']

  to webpack.config but I don’t know the equivalent for angular-cli.

  Hopefully this will put someone in the right direction.

• 

  w-lohan

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:44 am EST

  I resolved the error by renaming all the

  wijmo.angular2.[component].min.js

  files to

  wijmo.angular2.[component].js

  in the node_modules\wijmo folder but I don’t know if this is the correct way.

• 

  surya

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:44 am EST

  As of today I can finally and easily use Wijmo (5.20162.229 eval) in a project generated with the angular-cli (1.0.0-beta.19-3):

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

  2. On

     angular-cli.json

     add

     styles/vendor/wijmo.min.css

     to the

     styles

     array
  3. On

     src/app/app.module.ts

     add:

  import { WjCoreModule } from 'wijmo/wijmo.angular2.core';
  import { WjGridModule } from 'wijmo/wijmo.angular2.grid';
  ...
  @NgModule({
    ...
    imports: [
      ...
      WjCoreModule,
      WjGridModule
    ],
    ...
  })

• 

  c1_alexi

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:44 am EST

  Hi Nuno

  Thanks for the testing this and for the notification. Yes, starting with build 228 we ship minified modules in NpmImages without the “.min” suffix in their names, that resolves problems with Wijmo usage in Ng2 CLI and some other frameworks.

  Alex

• 

  koerslight

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:44 am EST

  Hi All

  I’ve followed Nuno’s lead above, but still am receiving a WJCoreModule is not an NgModule error on my transpile step (ng serve). My understanding is that I do not need the systemjs modules to load the wijmo material, so have left that section out…my index.html only has reference to JQuery and Bootstrap. My angular-cli stack:

  angular-cli: 1.0.0-beta.24
  
  node: 7.3.0
  
  os: darwin x64
  
  @angular/common: 2.4.1
  
  @angular/compiler: 2.4.1
  
  @angular/core: 2.4.1
  
  @angular/forms: 2.4.1
  
  @angular/http: 2.4.1
  
  @angular/material: 2.0.0-beta.1
  
  @angular/platform-browser: 2.4.1
  
  @angular/platform-browser-dynamic: 2.4.1
  
  @angular/router: 3.4.1
  
  @angular/compiler-cli: 2.4.1

  Any tips on which way to go?

  Doug

• 

  c1_alexi

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:44 am EST

  Hello

  It’s difficult to say something without having an example. What versions of Wijmo and TypeScript do you use?

  Thanks,
  
  Alex

• 

  koerslight

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:44 am EST

  Hi Alex

  My bad. I’m installing Wijmo5, using tsc 2.0.3. I’ve created a git showing the issue:

  https://github.com/dougboyd/wijmo-test.git

  All node modules are included so you can see exactly what my system is seeing. This repository is nothing more than a blank ng new with Nuno’s steps from above. Running ng serve on it gives me

  ERROR in WjCoreModule is not an NgModule.

  I’m certain I’ve just missed some critical step. Thanks for having a look for me.

  Doug

• 

  koerslight

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:44 am EST

  Finally, an Ah-HA moment…I downgraded my Angular-cli from:

  "angular-cli": "1.0.0-beta.24",
  

  to

  "angular-cli": "1.0.0-beta.19-3",
  

  and managed a successful ng serve. As others have already noted, I’m suspecting that angular-cli is still a little raw. C’est la vie. Now, on to my evaluation of Wijmo. Certainly hope it is worth the effort.

• 

  swetha-vemuri

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:44 am EST

  After downloading the build 229, and following the steps in - http://wijmo.com/topic/how-to-install-wijmos-flexgrid-in-a-angular-2-app-generated-with-angular-cli/#post-80711 , I get the following error:

  WARNING in ./src/services/page.service.ts
  
  404:158 export ‘Routes’ was not found in ‘@angular/router’

  WARNING in ./src/services/page.service.ts
  
  404:184 export ‘Routes’ was not found in ‘@angular/router’

  ERROR in ./src/pipes/appPipes.ts
  
  Module build failed: Error: /Users/Documents/app/src/pipes/appPipes.ts (39,36): Property ‘grid’ does not exist on type ‘typeof wijmo’.)
  
  at _checkDiagnostics (/Users/Documents/app/node_modules/@ngtools/webpack/src/loader.js:116:15)
  
  at /Users/Documents/app/node_modules/@ngtools/webpack/src/loader.js:141:17
  
  at tryCatch (/Users/Documents/app/node_modules/es6-promise/dist/es6-promise.js:410:12)
  
  at invokeCallback (/Users/Documents/app/node_modules/es6-promise/dist/es6-promise.js:425:13)
  
  at publish (/Users/Documents/app/node_modules/es6-promise/dist/es6-promise.js:393:7)
  
  at flush (/Users/Documents/app/node_modules/es6-promise/dist/es6-promise.js:121:5)
  
  at _combinedTickCallback (internal/process/next_tick.js:67:7)
  
  at process._tickCallback (internal/process/next_tick.js:98:9)
  
  @ ./src/app.module.ts 51:0-56
  
  @ ./src/main.ts
  
  @ multi main

  >ng -v

  angular-cli: 1.0.0-beta.24
  
  node: 5.12.0
  
  os: darwin x64
  
  @angular/common: 2.4.2
  
  @angular/compiler: 2.4.2
  
  @angular/core: 2.4.2
  
  @angular/forms: 2.4.2
  
  @angular/http: 2.4.2
  
  @angular/platform-browser: 2.4.2
  
  @angular/platform-browser-dynamic: 2.4.2
  
  @angular/router: 3.4.2
  
  @angular/compiler-cli: 2.4.2

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:44 am EST

  Hi Swetha,
  
  Here is the attached sample with the latest build 5.20163.254 created using angular CLI.
  
  If issue persists, please share your sample depicting your issue so that we can assist you accordingly.

  Thanks ,
  
  Manish Kumar Gupta
  
  2017/01/Routing_in_FlexGrid.zip

• 

  yaron

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:44 am EST

  after installing version 5.20163.259 iget this errors :

  wijmo.angular2.core.js:13Uncaught TypeError: (void 0) is not a function
      at Object.__moduleName (wijmo.angular2.core.js:13)
      at __webpack_require__ (bootstrap faef7c9…:52)
      at Object.886 (app.component.ts:33)
      at __webpack_require__ (bootstrap faef7c9…:52)
      at Object.684 (src async:7)
      at __webpack_require__ (bootstrap faef7c9…:52)
      at Object.1364 (main.bundle.js:182)
      at __webpack_require__ (bootstrap faef7c9…:52)
      at webpackJsonpCallback (bootstrap faef7c9…:23)
      at main.bundle.js:1
  __moduleName @ wijmo.angular2.core.js:13
  __webpack_require__ @ bootstrap faef7c9…:52
  886 @ app.component.ts:33
  __webpack_require__ @ bootstrap faef7c9…:52
  684 @ src async:7
  __webpack_require__ @ bootstrap faef7c9…:52
  1364 @ main.bundle.js:182
  __webpack_require__ @ bootstrap faef7c9…:52
  webpackJsonpCallback @ bootstrap faef7c9…:23
  (anonymous) @ main.bundle.js:1
  zone.js:1960 XHR finished loading: GET "http://localhost:4200/sockjs-node/info?t=1488467401501".
  scheduleTask @ zone.js:1960
  webpackJsonp.1361.ZoneDelegate.scheduleTask @ zone.js:349
  webpackJsonp.1361.Zone.scheduleTask @ zone.js:192
  webpackJsonp.1361.Zone.scheduleMacroTask @ zone.js:206
  (anonymous) @ zone.js:1984
  send @ VM298:3
  AbstractXHRObject._start @ abstract-xhr.js:132
  (anonymous) @ abstract-xhr.js:21
  webpackJsonp.1361.ZoneDelegate.invokeTask @ zone.js:363
  webpackJsonp.1361.Zone.runTask @ zone.js:166
  ZoneTask.invoke @ zone.js:416
  data.args.(anonymous function) @ zone.js:1527
  client?ffdb:40 [WDS] Warnings while compiling.
  client?ffdb:98 ./~/wijmo/wijmo.angular2.core.js
  System.register is not supported by webpack.
   @ ./src/app/app.module.ts 28:0-57
   @ ./src/main.ts
   @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
  warnings @ client?ffdb:98
  sock.onmessage @ socket.js:37
  EventTarget.dispatchEvent @ eventtarget.js:51
  (anonymous) @ main.js:274
  SockJS._transportMessage @ main.js:272
  EventEmitter.emit @ emitter.js:50
  WebSocketTransport.ws.onmessage @ websocket.js:35
  wrapFn @ zone.js:1190
  webpackJsonp.1361.ZoneDelegate.invokeTask @ zone.js:363
  webpackJsonp.1361.Zone.runTask @ zone.js:166
  ZoneTask.invoke @ zone.js:416
  client?ffdb:98 ./~/wijmo/wijmo.angular2.grid.js
  System.register is not supported by webpack.
   @ ./src/app/app.module.ts 29:0-57
   @ ./src/main.ts
   @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 2:44 am EST

  Hi,
  
  We are unable to replicate issue at our end with latest build 5.20163.259. Please refer to the attached sample that depicts the same.
  
  If issue persists, please modify the attached sample depicting your issue so that we can assist you accordingly.

  Thanks ,
  
  Manish Kumar Gupta
  
  2017/03/FlexGrid_CLI_v3.259.zip

• 

  himaja

  • Post Options:
  • Link
    Copy

  Posted 22 November 2017, 8:06 pm EST

  Hi manish,

  Even though i was updated both angular and wijmo versions to latest im still finding circular dependencies for wijmo

  Is there any solutions?

  [b]currently hinding circular dependencies by using

  “build”: {
  
  “showCircularDependencies”: false
  
  }

  in angular-cli.json[/b]