Log in to start a topic

Wijmo 5 and Angular CLI - Integrating Wijmo Controls?

Posted by: feniksreborn on 22 December 2017, 12:38 am EST

  • feniksreborn

    • Post Options:
    • Link
      Copy

    Posted 22 December 2017, 12:38 am EST

    Hello everyone,

    I am trying to include Wijmo 5 in Angular CLI Template, but no luck.

    I have read a lots articles about this and nothing is working:

    https://www.grapecity.com/en/blogs/integrating-wijmo-controls-module-loaders-bundlers/

    http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/static/angular2Components.html

    https://www.grapecity.com/en/blogs/create-quick-start-application-angular-wijmo

    I am using:

    “@angular/animations”: “^5.0.0”,

    “@angular/common”: “^5.0.0”,

    “@angular/compiler”: “^5.0.0”,

    “@angular/core”: “^5.0.0”,

    “@angular/forms”: “^5.0.0”,

    “@angular/http”: “^5.0.0”,

    “@angular/platform-browser”: “^5.0.0”,

    “@angular/platform-browser-dynamic”: “^5.0.0”,

    “@angular/router”: “^5.0.0”,

    “bootstrap”: “^3.3.7”,

    “core-js”: “^2.4.1”,

    “file-saver”: “^1.3.3”,

    “font-awesome”: “^4.7.0”,

    “jquery”: “^3.2.1”,

    “moment”: “^2.20.1”,

    “ng-alertify”: “^1.0.2”,

    “ng2-pdf-viewer”: “^3.0.2”,

    “ngx-bootstrap”: “^2.0.0-rc.0”,

    “ngx-quill”: “^2.0.4”,

    “rxjs”: “^5.5.2”,

    “save”: “^2.3.2”,

    “wijmo”: “src/assets/NpmImages/wijmo-amd-min”,

    “zone.js”: “^0.8.14”

    When I execute the comand ng serve I get next errors:

    ERROR in node_modules/wijmo/wijmo.react.base.d.ts(1,24): error TS2307: Cannot find module ‘react’.

    node_modules/wijmo/wijmo.react.input.d.ts(2,24): error TS2307: Cannot find module ‘react’.

    Can you please explain how to use Wijmo with Angular CLI, step by step???

    It should not be this confusing to do this.

    Thank you,

    M

  • manish.gupta

    Posted 25 December 2017, 6:32 pm EST

    Hi,

    We are sorry, we are unable to replicate the issue at our end with the following steps with 5.20172.359:

    ng -v

    Angular CLI: 1.5.4

    Create new project ng new wijmo5-ng5

    Add wijmo.min.css file to Src folder

    Update .angular-cli.json file to styles by adding wijmo.min.css entry

    Install wijmo modules to project using npm install --save folder_path_wijmo-amd-min

    Add WjGridModule in app.module.ts

    Add FlexGrid code in app.component.html file

    Please find the attached sample for the same.

    ~Manish

    wijmo-ng5-v359.zip

  • feniksreborn

    Posted 25 December 2017, 8:44 pm EST

    Hello,

    You are using C1Wijmo-Enterprise_5.20172.359 in your example. In my project we use C1Wijmo_5.20172.359. I don’t know if there is the difference between this two packages. Also, the same errors are appearing in C1Wijmo_5.20171.282, plus one more about SVG Elements.

    All errors are in the wijmo.d.ts file.

    Best regards,

    M

  • manish.gupta

    Posted 26 December 2017, 9:11 pm EST

    HI,

    We are sorry, we are unable to replicate the issue with C1Wijmo_5.20172.359 build too.

    There were the issue with 5.20171.282 regarding SVG Elements and have been fixed in the latest versions.

    Please share the demo sample with us and please try with latest build 5.20173.380 too.

    ~Manish

  • marooned

    Posted 11 July 2018, 9:37 pm EST

    Hi

    I have exactly the same issue using 5.20173.409.

    I used this version with webpack project and managed to exclude Wijmo folder from TypeScript lint and it was ok.

    Now I’ve started the new project with Angular-CLI and no options to exclude seems to work. My project fails and can’t compile because of Wijmo issues.

    Wijmo stored in project/src/vendor/wijmo-amd-min

    Added in package.json as dependencies: “wijmo”: “src/vendor/wijmo-amd-min”

    Seems exactly the same as above:

    ERROR in src/vendor/wijmo-amd-min/wijmo.d.ts(421,14): error TS2416: Property 'collectionChanged' in type 'ObservableArray' is not assignable to the same propert
y in base type 'INotifyCollectionChanged'.
  Type 'Event' is not assignable to type 'Event'. Two different types with this name exist, but they are unrelated.
    Types have separate declarations of a private property '_handlers'.
src/vendor/wijmo-amd-min/wijmo.d.ts(475,14): error TS2416: Property 'collectionChanged' in type 'CollectionView' is not assignable to the same property in base
type 'IEditableCollectionView'.
  Type 'Event' is not assignable to type 'Event'. Two different types with this name exist, but they are unrelated.
src/vendor/wijmo-amd-min/wijmo.d.ts(475,14): error TS2416: Property 'collectionChanged' in type 'CollectionView' is not assignable to the same property in base
type 'IPagedCollectionView'.
  Type 'Event' is not assignable to type 'Event'. Two different types with this name exist, but they are unrelated.
src/vendor/wijmo-amd-min/wijmo.d.ts(507,14): error TS2416: Property 'currentChanged' in type 'CollectionView' is not assignable to the same property in base typ
e 'IEditableCollectionView'.
  Type 'Event' is not assignable to type 'Event'. Two different types with this name exist, but they are unrelated.
src/vendor/wijmo-amd-min/wijmo.d.ts(507,14): error TS2416: Property 'currentChanged' in type 'CollectionView' is not assignable to the same property in base typ
e 'IPagedCollectionView'.
  Type 'Event' is not assignable to type 'Event'. Two different types with this name exist, but they are unrelated.
src/vendor/wijmo-amd-min/wijmo.d.ts(509,14): error TS2416: Property 'currentChanging' in type 'CollectionView' is not assignable to the same property in base ty
pe 'IEditableCollectionView'.
  Type 'Event' is not assignable to type 'Event'. Two different types with this name exist, but they are unrelated.
src/vendor/wijmo-amd-min/wijmo.d.ts(509,14): error TS2416: Property 'currentChanging' in type 'CollectionView' is not assignable to the same property in base ty
pe 'IPagedCollectionView'.
  Type 'Event' is not assignable to type 'Event'. Two different types with this name exist, but they are unrelated.
src/vendor/wijmo-amd-min/wijmo.d.ts(547,14): error TS2416: Property 'pageChanged' in type 'CollectionView' is not assignable to the same property in base type '
IPagedCollectionView'.
  Type 'Event' is not assignable to type 'Event'. Two different types with this name exist, but they are unrelated.
src/vendor/wijmo-amd-min/wijmo.d.ts(549,14): error TS2416: Property 'pageChanging' in type 'CollectionView' is not assignable to the same property in base type
'IPagedCollectionView'.
  Type 'Event' is not assignable to type 'Event'. Two different types with this name exist, but they are unrelated.

    Any clue? Thanks in advance.

  • marooned

    Posted 11 July 2018, 10:12 pm EST

    We have working workaround, but still it would be nice to get a solution for root cause.

    Workaround is to pack Wijmo folder to archive and point to it in package.json:

    “wijmo”: “file:src/vendor/wijmo.tgz”

  • manish.gupta

    Posted 12 July 2018, 8:17 pm EST

    Hi,

    This seems to be an issue with type checking. To fix this you may skip type checking of declaration files.

    Please add following line in your tsconfig.json file:-

    {
 
...other-options,
"compilerOptions":{
 
 
...other-options,
"skipLibCheck":true
...other-options
 
 
},
...other-options
 
}

    Official documentation for typescript config options:-

    https://www.typescriptlang.org/docs/handbook/compiler-options.html

    Also please try to use wijmo commonjs build as much as possible.

    ~Manish

  • marooned

    Posted 12 July 2018, 10:27 pm EST

    We’ll stick with archive for now but thanks for the info, might use that later.

  • thuanpv

    Posted 1 May 2019, 8:03 pm EST

    Hi,

    I got the same problem as described here. by following the Manish’s suggestion, i could over come the issue. it works perfectly after that.

    Thank you all,

    Regards,

    thuan.

Need extra support?

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

Learn More

Forum Channels

  • © 2023 MESCIUS inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.