Import of a single chart type module does not work correctly

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

Current behavior When importing a single chart type like PieChartModule, the chart common components like tooltips are not working.

Expected behavior <ngx-charts-pie-chart></ngx-charts-pie-chart> should work correctly when importing PieChartModule

Reproduction of the problem https://plnkr.co/edit/5Ct4CiXVId7FRzlg5bG2

[henriquecustodia]

@juarezpaf Hey there, I had to use a workaround.

Import the chart component:

import { LineChartModule } from '@swimlane/ngx-charts/release/line-chart';

@NgModule({
  imports: [
    LineChartModule
  ]
})

Importing only that module will throw some errors on dev mode (I’ve mentioned here), so I’ve created a simple node script to inline external css from ngx-chart.

const ngInline = require('angular2-inline-template-style');
const path = require('path');
const fse = require('fs-extra');
const glob = require('glob');

const baseDir = path.join(process.cwd(), 'node_modules/@swimlane/ngx-charts/release');

const paths = glob.sync('**/*.js', { cwd: baseDir });

paths.forEach(filepath => {

    const fullpath = path.join(baseDir, filepath);

    fse.readFile(fullpath, { encoding: 'utf8' })
        .then(content => {
            const fileDir = path.dirname(fullpath);

            return ngInline(content, { base: fileDir, compress: true })
                .then(content => {
                    return fse.writeFile(fullpath, content);
                });
        })

});

You have to run the script after the npm install

// package.json
 "scripts": {
        "postinstall": "node scripts/inline-ngx-chart-styles.js"
}

the package angular2-inline-template-style will inline all ngx-charts components

I hope it can useful! 😄

[eseliger]

same here, @Luukschoen I think the modules should work on their own as well, shouldn’t they? There are probably a lot applications that don’t need every type of chart and they are all forced to take the much bigger payload as long as it isn’t working with the separate imports