Ionic2 using @swimlane/ngx-datatable and @swimlane/ngx-charts

Does anyone test ngx-charts and ngx-datatable with ionic2.

This are in my opinion the best datatable and chart lib for angular, but there are several problems using this libs in ionic2, but there are no problems to use them in basic angular2.

Fox example on including the NgxChartsModule in my ionic2 app and load the ngx-charts-line-chart I got the error
Can't bind to 'view' since it isn't a known property of 'ngx-charts-line-chart'

See here an issue on swimlane I posted also my problem:

There are also some other problems on building ngx-datable for ionic2 using ionic android emulator

Does someone have a solution for this or does someone have experience with ionic2 and swimlane cmponents?

1 Like

If youā€™re right about it needing Angular 2.4.5, mods can stop reading now.

OK, if the mods arenā€™t looking, remember that this is not officially supported, may cause blindness, sterility, or your computer to explode. That being said, the only fatal blocker I was aware of has been fixed in app-scripts >= 1.0.1, so if you are willing to deal with npm warnings about conflicting peer dependencies, you can try upgrading angular versions in your app. I have gotten one of mine to build (and apparently run) with 4.0.0-beta.5.

@rapropos Iā€™m able to use last angular with last app-script also if there is a bug on run it on device, Iā€™ll wait until official ionic release before open a bug.

Now Iā€™m able to using the @swimlane/ngx-datable which looks gut but I have two problems using the needed styles for it.

They have their own styles and raccomand to import them in the custom scss file, like this
@import ā€˜/node_modules/@swimlane/ngx-datatable/release/index.cssā€™;
@import ā€˜/node_modules/@swimlane/ngx-datatable/release/material.cssā€™;
@import ā€˜/node_modules/@swimlane/ngx-datatable/release/assets/icons.cssā€™;

The problem is Iā€™m not able to import a css from node_modules and If it is possible I would omit to copy them under a /www/assets folder, because I have to maintain the css manually which is not so beautiful.

Is there a possibility to import from component scss file a css file under node_module folder?

I tried also to load them from component by styleUrls doing this
import indexStyle from ā€˜ā€¦/ā€¦/ā€¦/node_modules/@swimlane/ngx-datatable/release/index.cssā€™;
styleUrls: [ indexStyle ]

But there is no loader for load css files and Iā€™m donā€™t find the configuration file for configure loaders!
Error: Module parse failed: /home/michi/software/workspace/web-client-ionic/node_modules/@swimlane/ngx-datatable/release/index.css Unexpected token (6:0)
You may need an appropriate loader to handle this file type.
| * Licensed under MIT
| */
| .ngx-datatable {
| display: block;
| overflow: hidden;
at d (http://localhost:8100/build/polyfills.js:3:6360)
at Object. (http://localhost:8100/build/main.js:195897:7)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:93591:113)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:134540:105)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:117117:70)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object. (http://localhost:8100/build/main.js:195887:70)
at webpack_require (http://localhost:8100/build/main.js:20:30)
at Object.defineProperty.value (http://localhost:8100/build/main.js:66:18)
at http://localhost:8100/build/main.js:69:10

The other problem is, if I include the 3rd part icons, the standard ionicons from ionic doesnā€™t work anymore.

So my two questions are:
a) Which is the best way to load 3rd part css files and omit to copy them locale?
b) How can I include 3rd part icons only for a specific component without overwriting the default one?

Yes, but it requires using a custom SASS config file. Instructions for doing that are in here. Youā€™ll want to add the path to the files you want to include under ā€œincludePathsā€.