Unexpected value 'ChartistModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

[ddamko]

I have an Angular 4 / Electron application and I am getting the following error when importing the ChartistMoudule.

Uncaught Error: Unexpected value 'ChartistModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

This seems to be an issue with how dependencies are annotated in the package.json of the library. See the Angular repo thread #15763. Has there been any testing with this module in Angular 4?

[willsoto]

Yeah, I have tests that seem to work. Also, I do have an @NgModule annotation here

[ddamko]

When I install ng-chartist in a new angular-cli 4 app and add the module to the AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ChartistModule } from 'ng-chartist';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ChartistModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ng serve

ERROR in ChartistModule is not an NgModule
webpack: Failed to compile.

[mikerhyssmith]

Hi, I also have an angular 4 app not using the CLI which throws the same error.

[reegodev]

Have the same issue, i forked the module and rebuilt it and now it works.
The dist folder of the npm package is missing a chartist.component.metadata.json file.
Its contents are

[{"__symbolic":"module","version":3,"metadata":{"ChartEvent":{"__symbolic":"interface"},"ChartistComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"x-chartist","template":"<ng-content></ng-content>"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"responsiveOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"events":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"renderChart":[{"__symbolic":"method"}],"update":[{"__symbolic":"method"}],"bindEvents":[{"__symbolic":"method"}]}},"ChartistModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ChartistComponent"}],"exports":[{"__symbolic":"reference","name":"ChartistComponent"}]}]}]}}},{"__symbolic":"module","version":1,"metadata":{"ChartEvent":{"__symbolic":"interface"},"ChartistComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"x-chartist","template":"<ng-content></ng-content>"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"responsiveOptions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"events":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"renderChart":[{"__symbolic":"method"}],"update":[{"__symbolic":"method"}],"bindEvents":[{"__symbolic":"method"}]}},"ChartistModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ChartistComponent"}],"exports":[{"__symbolic":"reference","name":"ChartistComponent"}]}]}]}}}]

[mikerhyssmith]

Would adding a PR to make ng-chartist include AOT metadata files be welcome ?

[willsoto]

That would be fine, but it needs to be reproducible. As of now, I cannot locally generate the metadata. If a PR is made, I'd like to see instructions on how to generate it, or just fix the build if there is an issue with it.

[mikerhyssmith]

Is that a reproduction of the issue or a reproduction of how to generate the metadata ?

[willsoto]

Reproduction on how to generate the metadata.

[mikerhyssmith]

master...mikerhyssmith:master the task build:dist:aot with the changes to the tsconfig produces the metadata.json file along with what is already generated. However, I had to change some dependencies to get this running on windows as git-scripts doesn't support windows and there seemed to be issues with lodash types.

[willsoto]

Those changes seem straightforward enough to me. If you wanna make a PR, I can take a look tonight.