Ngx-charts: Missing css files when including in Ionic3 app

[glennlawyer]

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

I found a related bug report here:
https://github.com/swimlane/ngx-charts/issues/129,
which is reported as closed on 31 Jan 2017, with the statement "Version 4.0.3 already have fixed that."

I am using ngx-charts 6.0.2, which should include the fix.

Current behavior
I am trying to use ngx-charts in an Ionic V3 project. The project does not load because a number of css files cannot be found. The console shows:
```Failed to load resource: the server responded with a status of 404 (Not Found)
polyfills.js:3 Unhandled Promise rejection: Failed to load tooltip.component.css ; Zone: ; Task: Promise.then ; Value: Failed to load tooltip.component.css undefined
n.onUnhandledError @ polyfills.js:3
polyfills.js:3 Error: Uncaught (in promise): Failed to load tooltip.component.css
at c (polyfills.js:3)
at c (polyfills.js:3)
at polyfills.js:3
at t.invokeTask (polyfills.js:3)
at r.runTask (polyfills.js:3)
at o (polyfills.js:3)
at XMLHttpRequest.invoke (polyfills.js:3)
n.onUnhandledError @ polyfills.js:3

and additonally returns 404's for:

legend.component.css
scale-legend.component.css
timeline.component.css
advanced-legend.component.css
common/base-chart.component.css
force-directed-graph.component.css
advanced-pie-chart.component.css
pie-chart.component.css
pie-grid.component.css
pie-chart/pie-chart.component.css
polar-chart.component.css
card.component.css
tree-map.component.css
linear-gauge.component.css
gauge.component.css

**Expected behavior**
The required css files should be loaded.

**Reproduction of the problem**
I have made a github repo of a blank Ionic project at `https://github.com/glennlawyer/ngxtest`

The steps I took to create this repo were:

ionic start ngxtest
cd ngxtest
npm install @swimlane/ngx-charts --save
npm install d3 --save
npm install @angular/[email protected] --save

Then I added the following lines to the top of src/app/app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxChartsModule } from "@swimlane/ngx-charts/release/ngx-charts.module";

and the following two import statements

    BrowserAnimationsModule,
    NgxChartsModule,

I then run `ionic serve`
The Ionic project does not open, instead the console shows the 404 messages for the missing .css files

If I comment out the NgxChartsModule import in app.module.ts, then the project renders correctly.


**What is the motivation / use case for changing the behavior?**
I cannot use NgxCharts in my Ionic project because it blocks the whole project

**Please tell us about your environment:**
<!-- Operating system, IDE, package manager, HTTP server, ... -->
Ionic Info returns:

cli packages: (/usr/local/lib/node_modules)
@ionic/cli-utils : 1.9.2
ionic (Ionic CLI) : 3.9.2

local packages:
@ionic/app-scripts : 2.1.3
Ionic Framework : ionic-angular 3.6.0

System:
Node : v8.4.0
npm : 5.3.0
OS : macOS Sierra
```

• ngx-charts version: 6.0.2
  
  The package.json file shows "@swimlane/ngx-charts": "^6.0.2",

• Angular version: 4.1.3
  
  I am using Ionic, which ships with angular 4.1.3 I am not sure I can update without breaking Ionic

• Browser: Chrome
  

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[mebibou]

does it change anything if you include the module like this instead:

import { NgxChartsModule } from '@swimlane/ngx-charts';

[glennlawyer]

Yes, that seems to fix it. Thanks!!

[luisislas07]

sorry but where do I put the part of the code that you mentioned

does it change anything if you include the module like this instead:

import { NgxChartsModule } from '@swimlane/ngx-charts';

[glennlawyer]

I put it in

app/app.module.ts

If you are lazy loading, you might also have to include it in the page’s module (or only include it in the page’s module, not including it in the app module)

[luisislas07]

thank you very much also works for me!!!!! sorry my english but my language is spanish

[glennlawyer]

Es nitido, @luisislas07!