Angular 6 issues? Please add a @NgModule annotation.

[olaj]

Unexpected value 'ChartistModule in 'node_modules/ng-chartist/bundles/ng-chartist.umd.js' imported by the module 'DashboardModule in 'dashboard.module.ts'. Please add a @NgModule annotation.

I get this error now when i try to use Chartist in a Angular 6 project. I have tried with the various suggestions in this #94 but i'm not sure how related they are.

I have also had a look at #124 but tbh i don't understand any of it :)

It works when i run locally but the build command fails. It works fine in a previous project that is not running Angular 6.

[willsoto]

Thanks for the report. For the previous project, do you mean one that was running on Angular 5?

[willsoto]

Also, can you try v2.0.0-beta.1 if you aren't on it already?

[olaj]

Yeah, on an older project based on Angular 5.

And i already use the v2.0.0-beta.1, let me know if you want me to do anything else :) Or if you have any fix / workaround.

[willsoto]

I can try testing on Angular 6 and seeing what happens. But I can't get to it until this weekend. If you are interested in debugging and opening a PR, I can review.

[ralf100]

With Angular 6 and CLI, that worked for me:
ng build --prod --aot=false --build-optimizer=false

[olaj]

Nice! That works for me as well.

I saw something about a --build-optimizer somewhere. But i kind of thought that the hole point of doing a production build was to optimize stuff :) But nice to have a workaround.

How much do you loose bu turning these two options off? I mean performance a compression wise and so on?

[seabass223]

I had to declare ChartistComponent in my AppModule, then aot succeeded
https://github.com/willsoto/ng-chartist/blob/master/src/chartist.component.ts

[willsoto]

So is this a documentation problem?

[willsoto]

Let me know if this is a documentation problem or a code problem and I can reopen

[SebastianRuecker]

hey willsoto,

there is actually no chance to create a aot production build...
Unexpected value 'ChartistModule in 'node_modules/ng-chartist/bundles/ng-chartist.umd.js' imported by the module 'SharedModule in 'shared.module.ts'. Please add a @NgModule annotation.

[aburht]

@SebastianRuecker I'm facing with the same issue, did you find any workaround >

[mmahgoub]

Did anyone find a solution for this? --aot is important

[bhvbhushan]

@SebastianRuecker I am facing a same issue while running on Local, can you help me out.
Thanks !!!

[philliphartin]

@willsoto - Fairly sure this is a code issue. Also having the same issue when trying to use chartist in an Ionic 4 (Angular 6) app. Cannot build due to this.

[philliphartin]

I had to declare ChartistComponent in my AppModule, then aot succeeded
https://github.com/willsoto/ng-chartist/blob/master/src/chartist.component.ts

@seabass223 - Any chance you can give us a peak at how you did this? If I declare the Component in my AppModule, I can't seem to use it anywhere else.

[mmahgoub]

I had to declare ChartistComponent in my AppModule, then aot succeeded
https://github.com/willsoto/ng-chartist/blob/master/src/chartist.component.ts

@seabass223 - Any chance you can give us a peak at how you did this? If I declare the Component in my AppModule, I can't seem to use it anywhere else.

I did what @seabass223 suggested:

1. Create a new component in /src/app/chartist.component.ts with original component's code in it
2. Remove module import from app.module.ts
3. Import the chartist.component.ts you've created instead of the original one and BAM you have --aot working now.

I hope that helped

[seabass223]

I still have it working with latest version of angular since I just updated angular this week. I’ll see if I can sandbox in a demo project. Back in a few days.

[philliphartin]

@mmahgoub Thanks mate, that worked for me. I actually just copied the src for both the component and the module into my own project.

[seabass223]

Here are my angular/chartist versions in package.json as of now:

"dependencies": {
    "@angular/cdk": "^6.4.7",
    "@angular/compiler": "^6.1.9",
    "ng-chartist": "^2.0.0-beta.1",
  },
 "devDependencies": {
    "@angular-devkit/build-angular": "^0.8.3",
    "@angular/cli": "^6.2.3",
    "@angular/compiler-cli": "^6.1.9",
    "@types/chartist": "^0.9.40",
  }

app.module.ts

import { ChartistComponent } from './components/charts/chart-base/vendor/chartist.component';
 declarations: [
    ChartistComponent,

where chartist.component.ts looks like this

Usage

html

<x-chartist #chart [data]="dataSource" [type]="type"></x-chartist>

export abstract class ChartBaseComponent implements AfterViewChecked {

  @ViewChild('chart') chartElement: ChartistComponent;
  @Input() dataSource: Chartist.IChartistData;
  @Input() options: ChartOptions;
  @Input() responsiveOptions: Chartist.IResponsiveOptionTuple<any>;
  @Input() onDraw: (draw) => {};
  public type: string;

  private chartWiredUp = false;

  constructor() { super(); }

  ngAfterViewChecked() {
    if (!this.chartWiredUp && this.chartElement && this.chartElement.chart) {
      this.chartWiredUp = true;
      this.OnChartInit();
    }
  }

  protected OnChartInit() {

  }
}

When I build AOT I use the command ng build --prod this builds the project in aot mode. It builds and runs successfully.

I hope this helps.