Cannot find module 'chartist' still an issue? #37

jensstruemper · 2016-09-17T16:59:52Z

Hi there,
I'd like to use angular2-chartist in an Ionic 2 app but I get a Typescript error when running the example code:

TypeScript error: /Users/jens/Development/Ionic/chartist-demo/node_modules/angular2-chartist/dist/chartist.component.d.ts(2,27): Error TS2307: Cannot find module 'chartist'.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ChartistComponent } from 'angular2-chartist';

@Component({
  selector: 'demo-app',
  directives: [ChartistComponent],
  template: `
    <x-chartist
      [data]="data"
      [type]="type"
      [options]="options"
      [responsiveOptions]="responsiveOptions">
    </x-chartist>
  `
})

export class DemoApp {
  constructor(public navCtrl: NavController) {
  }
}

There was a similar issue reported twice and was fixed in version 0.6.0. Any idea why I still get this error?

Thanks,
Jens

The text was updated successfully, but these errors were encountered:

willsoto · 2016-09-17T23:58:45Z

This looks like an issue with the typings, I have been having the same issue. I just set typescript to still emit on error.

I have been wanting to check on the typings to figure out the issue, but haven't had a chance.

jensstruemper · 2016-09-18T08:49:53Z

I had a look at the compiler options www.typescriptlang.org but couldn't find a suitable option. --noEmitOnError comes close but is set to "false" already. Which would be the right option?

This is my tsconfig.json. Is it correct that "node_modules" is excluded? Removed it but it didn't make a difference though.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "filesGlob": [
    "**/*.ts",
    "!node_modules/**/*"
  ],
  "exclude": [
    "node_modules",
    "typings/global",
    "typings/global.d.ts"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

willsoto · 2016-09-18T11:34:23Z

What version of typescript?
On Sun, Sep 18, 2016 at 4:49 AM Jens Strümper notifications@github.com
wrote:

I had a look at the compiler options www.typescriptlang.org
https://www.typescriptlang.org/docs/handbook/compiler-options.html but
couldn't find a suitable option. --noEmitOnError comes close but is set
to "false" already. Which would be the right option?

This is my tsconfig.json. Is it correct that "node_modules" is excluded?
Remove it but it didn't make a difference though.

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"emitDecoratorMetadata": true,
"experimentalDecorators": true
},
"filesGlob": [
"/*.ts",
"!node_modules//*"
],
"exclude": [
"node_modules",
"typings/global",
"typings/global.d.ts"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
#37 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACqZMmQdqtR6Q_3DVd0t3pvPck5Fgr5Nks5qrPsxgaJpZM4J_pd0
.

jensstruemper · 2016-09-18T11:48:09Z

./node_modules/typescript/bin/tsc --version Version 1.8.10

willsoto · 2016-09-18T15:07:42Z

I still get this error and I am on 2.0.2. I think this is an issue better filed against the typings for Chartist personally. Something about the way they are being exported isn't right.

jensstruemper · 2016-09-18T21:09:59Z

Do you want me ro open an issue on the chartist github? You mentioned a workaround to set tsc omitting on error. Do you have the compiler option at hand?

willsoto · 2016-09-18T21:32:49Z

I would probably file it against https://github.com/DefinitelyTyped/DefinitelyTyped

jensstruemper · 2016-09-19T07:11:16Z

Ah, don't think I can do that. Not able to draw the right conclusions here.

jensstruemper · 2016-09-19T08:24:29Z

Ok, a bit of progress. I installed the chartist typings (wasn't aware that I had to do that) typings install dt~chartist --save --global. Now I don't see the Error TS2307: Cannot find module 'chartist' anymore but instead I get a EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'apply' of undefined.

willsoto · 2016-09-19T12:37:34Z

Ah well, yes. I guess I assumed the typings had been installed.

In order to trace down that error, I'm gonna need a plunkr or fiddle so I can see the code.

jensstruemper · 2016-09-19T18:12:16Z

Uh, spent the entire afternoon to figure out how I could replicate my environment in plunker. But I don't see how I could create a complete new Ionic plunk (or use an existing Ionic 2 plunk ) and install, chartist, angular2-chartist + typings. Any alternative for trouble shooting?

ritz078 · 2016-09-20T09:07:11Z

I just installed it and tried to use it with angular-cli. getting the same error cannot find module 'chartist'.

jensstruemper · 2016-09-20T09:09:57Z

Did you install the relevant typings? typings install dt~chartist --save --global

willsoto · 2016-09-20T11:32:21Z

I will probably add a section to the README about typings, I think I had
just assumed it previously.

If either of you are also willing to add to the README, I'll be happy to
accept a PR. Probably an extra block under "Installation
https://github.com/paradox41/angular2-chartist#installation" with how to
install Typings (for TS 2.0+ and TS <= 1.8) would be good

On Tue, Sep 20, 2016 at 5:09 AM Jens Strümper notifications@github.com
wrote:

Did you install the relevant typings? typings install dt~chartist --save
--global.

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
#37 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACqZMmfA3DdTMNhZSD4rktgq2M7Hfhigks5qr6LmgaJpZM4J_pd0
.

jensstruemper · 2016-09-20T11:44:47Z

Happy to do so. Don't see a difference for installing them between TS 2.0 and TS 1.8 though. In both cases I would do:

npm install -g typings --save
typings install -g dt~chartist --save

willsoto · 2016-09-20T11:49:14Z

There actually is a difference in 2.0

So it would actually be npm install @types/chartist --save-dev

jensstruemper · 2016-09-21T08:06:50Z

Tried to progress on plunker. I though uploading the content from the build directory and adjusting the script links in the index html would be the best way forward but I could not even save the 4.5 mb app.bundle.js. Any advise or links you can share?

jensstruemper · 2016-09-21T09:16:46Z

Ok, getting a bit desperate on the plunker thing. Created a repository and uploaded my Ionic chartist-test www directory. Changed the script links to match the github raw links but no success.

https://plnkr.co/edit/7d6xVjhp39hRXfFbkAlr?p=info

willsoto · 2016-09-21T13:06:50Z

@struempelix alright, lets try and keep it simple then. Are there any code snippets you can paste me? Ideally I'd like to see:

component in HTML
the data from the class

Is this possible?

jensstruemper · 2016-09-21T13:37:19Z

Yes. It's a simple setup. Ionic 2 latest beta with chartist, angular2-chartist & typings installed. Your example code incorporated into the vanilla Ionic2 template.

app.ts: (no changes here)

import { Component } from '@angular/core';
import { ionicBootstrap, Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

import { HomePage } from './pages/home/home';


@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(public platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

ionicBootstrap(MyApp);

home.ts (incorporated the example code)

import { Component } from '@angular/core';
import { ChartistComponent } from 'angular2-chartist';
import { NavController } from 'ionic-angular';

@Component({
//  selector: 'demo-app',
  directives: [ChartistComponent],
  template: `
    <x-chartist
      [data]="data"
      [type]="type"
      [options]="options"
      [responsiveOptions]="responsiveOptions">
    </x-chartist>
  `
})
export class HomePage {
  constructor(public navCtrl: NavController) {

  }
}

No additional HTML or TS files.

This is the console log:

willsoto · 2016-09-21T21:46:04Z

It seems like you are missing data in home.ts. x-chartist expects data, type, options and responsiveOptions, but I don't them defined anywhere.

Is that defined elsewhere?

jensstruemper · 2016-09-22T09:23:36Z

I don't know what I expected to see. An empty chart maybe? So yes, I didn't specify any data. I updated the example with some data and it is working! For reference, this is my updated code:

import { Component } from '@angular/core';
import { ChartistComponent } from 'angular2-chartist';
import { NavController } from 'ionic-angular';

@Component({
//  selector: 'demo-app',
  directives: [ChartistComponent],
  template: `
    <x-chartist
      [data]="data"
      [type]="type"
      [options]="options"
      [responsiveOptions]="responsiveOptions">
    </x-chartist>
  `
})
export class HomePage {
  private data:any;
  private options:any;
  private responsiveOptions:any;
  private type:any;

  static get parameters() {
    return [[NavController]];
  }

  constructor(public navCtrl: NavController) {

  this.type = 'Line';

  this.data = {
    labels: ['1', '2', '3', '4', '5', '6'],
    series: [
              {
                data: [1, 2, 3, 5, 8, 13]
              }
            ]
    };

  this.options = {
    axisX: {
      labelInterpolationFnc: function(value) {
        return 'Calendar Week ' + value;
      }
    }
  };

  this.responsiveOptions = [
    ['screen and (min-width: 300px) and (max-width: 400px)', {
      showPoint: false,
      axisX: {
        labelInterpolationFnc: function(value) {
          return 'Week ' + value;
        }
      }
    }],
    ['screen and (max-width: 400px)', {
      showLine: false,
      axisX: {
        labelInterpolationFnc: function(value) {
          return 'W' + value;
        }
      }
    }]
  ];
  }
}

The chart line is a bit "distorted" but I guess I need to play with the responsive options. Although angular beginners typically don't play a lot with charts I would find it nice to have a complete example in the docs. On the other hand this would make the documentation more verbose. If you like I would propose an update with my example minus the Ionic stuff. Anyway - thanks for your support and patience!

willsoto · 2016-09-22T11:30:18Z

Yeah, the chart won't do anything without at least a type and data. Perhaps I can enhance the component to throw errors if those are missing.

I would find it nice to have a complete example in the docs.

I agree. A copy-pastable example is always good. I can also make that update unless you'd like to. I think just adding some fake data and a type to the existing example would be good.

Glad you were able to resolve it. Not a problem.

willsoto added the answered label Sep 17, 2016

jensstruemper closed this as completed Sep 22, 2016

This was referenced Sep 22, 2016

Throw error if chart does not have data or type #41

Closed

Update example in README #42

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot find module 'chartist' still an issue? #37

Cannot find module 'chartist' still an issue? #37

jensstruemper commented Sep 17, 2016 •

edited

willsoto commented Sep 17, 2016

jensstruemper commented Sep 18, 2016 •

edited

willsoto commented Sep 18, 2016

jensstruemper commented Sep 18, 2016 •

edited

willsoto commented Sep 18, 2016

jensstruemper commented Sep 18, 2016

willsoto commented Sep 18, 2016

jensstruemper commented Sep 19, 2016

jensstruemper commented Sep 19, 2016

willsoto commented Sep 19, 2016

jensstruemper commented Sep 19, 2016

ritz078 commented Sep 20, 2016

jensstruemper commented Sep 20, 2016 •

edited

willsoto commented Sep 20, 2016

jensstruemper commented Sep 20, 2016 •

edited

willsoto commented Sep 20, 2016

jensstruemper commented Sep 21, 2016

jensstruemper commented Sep 21, 2016

willsoto commented Sep 21, 2016

jensstruemper commented Sep 21, 2016

willsoto commented Sep 21, 2016

jensstruemper commented Sep 22, 2016

willsoto commented Sep 22, 2016

Cannot find module 'chartist' still an issue? #37

Cannot find module 'chartist' still an issue? #37

Comments

jensstruemper commented Sep 17, 2016 • edited

willsoto commented Sep 17, 2016

jensstruemper commented Sep 18, 2016 • edited

willsoto commented Sep 18, 2016

jensstruemper commented Sep 18, 2016 • edited

willsoto commented Sep 18, 2016

jensstruemper commented Sep 18, 2016

willsoto commented Sep 18, 2016

jensstruemper commented Sep 19, 2016

jensstruemper commented Sep 19, 2016

willsoto commented Sep 19, 2016

jensstruemper commented Sep 19, 2016

ritz078 commented Sep 20, 2016

jensstruemper commented Sep 20, 2016 • edited

willsoto commented Sep 20, 2016

jensstruemper commented Sep 20, 2016 • edited

willsoto commented Sep 20, 2016

jensstruemper commented Sep 21, 2016

jensstruemper commented Sep 21, 2016

willsoto commented Sep 21, 2016

jensstruemper commented Sep 21, 2016

willsoto commented Sep 21, 2016

jensstruemper commented Sep 22, 2016

willsoto commented Sep 22, 2016

jensstruemper commented Sep 17, 2016 •

edited

jensstruemper commented Sep 18, 2016 •

edited

jensstruemper commented Sep 18, 2016 •

edited

jensstruemper commented Sep 20, 2016 •

edited

jensstruemper commented Sep 20, 2016 •

edited