search

emn178 / angular2-chartjs

Chart.js component for Angular2
MIT License
95 stars 21 forks source link

metadata_resolver.js Uncaught Error: Unexpected value 'ChartModule' imported by the module 'AppModule' #1

Closed codegastudio closed 7 years ago

codegastudio commented 8 years ago

Can't load ChartModule

emn178 commented 8 years ago

Hi, what's version you used? And how do you use?

codegastudio commented 8 years ago

Use angular-cli with from scratch projet

  1. ng new project
  2. cd project
  3. npm install to configure project
  4. ng serve to test and project run fine
  5. follow you installation doc (not too hard) npm install --save angular2-chartjs and configure app.module.ts
  6. ng serve without write any code using chartjs

-> browser console error

package.json (very simple)

{
  "name": "project",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/material": "^2.0.0-alpha.9-3",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "angular2-chartjs": "^0.1.3",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "angular-cli": "1.0.0-beta.16",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.9",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2"
  }
}
emn178 commented 8 years ago

Hi, it should be fixed in v0.1.4. please try it again. thanks

numerized commented 7 years ago

Hi there, I've got same problem with Ionic2,

It works well on the browser but during the build process for ios it fails with this message.

Error: Unexpected value 'ChartModule' imported by the module 'AppModule'

numerized commented 7 years ago

This post might help 👍 https://github.com/gevgeny/angular2-highcharts/issues/75

emn178 commented 7 years ago

@numerized could you give an example project so that I can try it?

chron0 commented 7 years ago

Hi, thanks for sharing, I'm currently running tests to move away from ng2-charts towards angular2-chartjs and I ran into the same issue with an ionic2 project.

Development with ionic serve is working fine, but building breaks (ngc issue as it seems):

> ionic-app-scripts build

[09:31:28]  ionic-app-scripts 0.0.39 
[09:31:28]  build prod started ... 
[09:31:28]  clean started ... 
[09:31:28]  clean finished in 10 ms 
[09:31:28]  copy started ... 
[09:31:28]  ngc started ... 
[09:31:28]  copy finished in 117 ms 
[09:31:28]  lint started ... 
[09:31:32]  Error: Unexpected value 'ChartModule' imported by the module 'AppModule' 
[09:31:32]  ngc failed 
[09:31:32]  ionic-app-script task: "build" 
[09:31:32]  Error: Error

As far as the thread in https://github.com/gevgeny/angular2-highcharts/issues/75 tells, metadata.json is missing. This is the PR that seems to have fixed it for angular2-highcharts:

https://github.com/gevgeny/angular2-highcharts/pull/76/commits/90ccc01d339589761cc8a3a967696bb3818c3747

Codebase to test/verify: https://github.com/apollo-ng/governess/tree/master/governess-app

numerized commented 7 years ago

Thanks @chron0 !

numerized commented 7 years ago

For now you can bypass the AOT during the build process with this script option in package.json

"scripts": {
    "ionic:build": "ionic-app-scripts build --dev",
    "ionic:serve": "ionic-app-scripts serve"
  },
chron0 commented 7 years ago

duh, I should have thought of that quick-fix :) Thanks - that'll do for development and on-device testing until angular2-chartjs will provide a better solution.

numerized commented 7 years ago

yes I'm doing that as well. Expecting two fixes. The update is not working correctly neither.

emn178 commented 7 years ago

Changing compiler to ngc and test by building governess-app. It will not show this error anymore.

Error: Unexpected value 'ChartModule' imported by the module 'AppModule'

It shows

[08:55:46]  Error: Cannot determine the module for component TimeformatSelector!
[08:55:46]  ngc failed
[08:55:46]  ionic-app-script task: "build"
[08:55:46]  Error: Error

I think this is caused by other libraries, so this issue should be fixed.

numerized commented 7 years ago

@emn178 I have no errors with the --dev parameter.

chron0 commented 7 years ago

I've removed the TimeformatSelector component, problem still reproduces, could you pull again and try to reproduce?

[19:10:33]  Error: Unexpected value 'ChartModule' imported by the module 'AppModule' 
[19:10:33]  ngc failed 
[19:10:33]  ionic-app-script task: "build" 
[19:10:33]  Error: Error

I can also verify that the temporary hack proposed by @numerized works here.

"ionic:build": "ionic-app-scripts build --dev",

It would be great if we could get this fixed without relying on --dev builds because it becomes hard to tune and optimize your application, when you cannot even determine the baseline difference between running dev code and prod code :)

emn178 commented 7 years ago

hi @chron0, Are you sure that you installed v0.1.6? I retried and got other errors.

[09:02:51]  Error: Error at /home/emn178/github/governess/governess-app/.tmp/app/app.component.ngfactory.ts:303:40
[09:02:51]  Property 'pages' is private and only accessible within class 'GovernessApp'.
[09:02:51]  Error at /home/emn178/github/governess/governess-app/.tmp/pages/about/about.ngfactory.ts:560:42
[09:02:51]  Property 'chart' does not exist on type 'AboutPage'.
[09:02:51]  Error at /home/emn178/github/governess/governess-app/.tmp/pages/about/about.ngfactory.ts:565:42
[09:02:51]  Property 'chart' does not exist on type 'AboutPage'.
[09:02:51]  Error at /home/emn178/github/governess/governess-app/.tmp/pages/tasks/tasks.ngfactory.ts:534:41
[09:02:51]  Property 'shouldShowCancel' does not exist on type 'TasksPage'.
[09:02:51]  ngc failed
[09:02:51]  ionic-app-script task: "build"
[09:02:51]  Error: Error

After fixing these errors, I can build successfully.

emn178@ubuntu:~/github/governess/governess-app$ npm run build

> governess-app@1.0.0 build /home/emn178/github/governess/governess-app
> ionic-app-scripts build

[09:12:03]  ionic-app-scripts 0.0.39
[09:12:03]  build prod started ...
[09:12:03]  clean started ...
[09:12:03]  clean finished in 4 ms
[09:12:03]  copy started ...
[09:12:03]  ngc started ...
[09:12:03]  copy finished in 181 ms
[09:12:03]  lint started ...
[09:12:11]  lint finished in 7.60 s
[09:12:36]  ngc finished in 33.86 s
[09:12:36]  webpack started ...
[09:12:52]  webpack finished in 15.16 s
[09:12:52]  uglifyjs started ...
[09:12:52]  sass started ...
[09:12:55]  sass finished in 2.99 s
[09:12:55]  cleancss started ...
[09:12:57]  cleancss finished in 2.36 s
[09:13:13]  uglifyjs finished in 21.60 s
[09:13:13]  build prod finished in 70.64 s
emn178@ubuntu:~/github/governess/governess-app$
chron0 commented 7 years ago

Ah, sorry, that was tested on 0.1.5 (0b6f5a42f7419c96fd428fe46ced6769c6fb0eba) - as it is work in progress I was going ahead in the meantime and the last commit bumped to 0.1.6 after an npm outdated run and had some other changes that broke things again (also showing no errors in dev).

Thanks, your efforts are very much appreciated, it seems that 0.1.6 does the trick:

 ~src/governess   master *…  governess-app  npm run build                                                                                             23.6s  Thu 17 Nov 2016 05:57:51 AM UTC

> governess-app@1.0.0 build /home/chrono/src/governess/governess-app
> ionic-app-scripts build

[05:59:47]  ionic-app-scripts 0.0.39 
[05:59:47]  build prod started ... 
[05:59:47]  clean started ... 
[05:59:47]  clean finished in 4 ms 
[05:59:47]  copy started ... 
[05:59:47]  ngc started ... 
[05:59:47]  copy finished in 136 ms 
[05:59:47]  lint started ... 
[05:59:51]  lint finished in 4.22 s 
[06:00:25]  ngc finished in 38.60 s 
[06:00:25]  webpack started ... 
[06:00:45]  webpack finished in 19.33 s 
[06:00:45]  uglifyjs started ... 
[06:00:45]  sass started ... 
[06:00:47]  sass finished in 1.76 s 
[06:00:47]  cleancss started ... 
[06:00:49]  cleancss finished in 2.04 s 
[06:01:11]  uglifyjs finished in 26.61 s 
[06:01:11]  build prod finished in 84.56 s
numerized commented 7 years ago

Works well here too ! Thanks !