Missing css files when including in Ionic3 app

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:

polyfills.js:3 Unhandled Promise rejection: Failed to load tooltip.component.css ; Zone: <root> ; 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/animations@4.1.3 --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:

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]

Es nitido, @luisislas07!