Skip to content

Getting errors after installing angular2-jsonapi #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
asmaps opened this issue Oct 13, 2016 · 34 comments
Closed

Getting errors after installing angular2-jsonapi #35

asmaps opened this issue Oct 13, 2016 · 34 comments
Labels

Comments

@asmaps
Copy link

asmaps commented Oct 13, 2016

Hi,

first thx for this library - sounds very promising. Unfortunately I can't get it to run as I get lots of errors after installing. As I'm fairly new to all this npm and JS stuff (only did python and jquery until a few months ago shame ) I don't know what to do with this error - maybe it's an easy fix. Googling didn't help me, so I hope you guys maybe have an idea.

The problem:
I bootstrapped an ng project with angular-cli's ng new ( https://cli.angular.io/ ) this is working perfectly and ng serve runs without problems and gives me the hello world page in the browser. Now I try to install angular2-jsonapi with npm install angular2-jsonapi --save and already get some "UNMET PEER DEPENDENCY" error thing I don't know what to do with.

asmaps@naos ~/git/letsmeet-angular2-ui (master*) $ npm install angular2-jsonapi --save
[email protected] /home/asmaps/git/letsmeet-angular2-ui
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
├── UNMET PEER DEPENDENCY @angular/[email protected]
└─┬ [email protected] 
  ├── @angular/[email protected] 
  ├── @angular/[email protected] 
  ├── @angular/[email protected] 
  ├── @angular/[email protected] 
  ├── @angular/[email protected] 
  ├── @types/[email protected] 
  ├── @types/[email protected] 
  ├── @types/[email protected] 
  ├── [email protected] 
  └── [email protected] 

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN @angular/[email protected] requires a peer of @angular/[email protected] but none was installed.

My resulting package.json:

{
  "name": "letsmeet-angular2-ui",
  "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/platform-browser": "~2.0.0",
    "@angular/platform-browser-dynamic": "~2.0.0",
    "@angular/router": "~3.0.0",
    "angular2-jsonapi": "^3.2.0",
    "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",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.17",
    "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"
  }
}

when I now try to run ng serve I get lots of errors, also when I try to add import { JsonApiModule } from 'angular2-jsonapi'; to my AppModule I only get an import error (not found).

asmaps@naos ~/git/letsmeet-angular2-ui (master*) $ ng serve                           
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
** NG Live Development Server is running on http://localhost:4200. **
4892ms building modules                                                                  
13ms sealing
0ms optimizing 
0ms basic module optimization 
69ms module optimization
1ms advanced module optimization 
7ms basic chunk optimization        
0ms chunk optimization 
1ms advanced chunk optimization 
0ms module and chunk tree optimization 
84ms module reviving
1ms module order optimization 
3ms module id optimization 
3ms chunk reviving 
0ms chunk order optimization 
9ms chunk id optimization 
49ms hashing
0ms module assets processing 
99ms chunk assets processing
2ms additional chunk assets processing 
0ms recording 
0ms additional asset processing 
1304ms chunk asset optimization
1442ms asset optimization
33ms emitting
Hash: 6901610443f768eb66c3
Version: webpack 2.1.0-beta.25
Time: 8031ms
            Asset       Size  Chunks             Chunk Names
   main.bundle.js    2.78 MB    0, 2  [emitted]  main
 styles.bundle.js    10.2 kB    1, 2  [emitted]  styles
        inline.js    5.53 kB       2  [emitted]  inline
         main.map    2.86 MB    0, 2  [emitted]  main
       styles.map    14.1 kB    1, 2  [emitted]  styles
       inline.map    5.59 kB       2  [emitted]  inline
       index.html  481 bytes          [emitted]  
assets/.npmignore    0 bytes          [emitted]  

ERROR in [default] /home/asmaps/git/letsmeet-angular2-ui/node_modules/@types/es6-shim/index.d.ts:6:13 
Duplicate identifier 'PropertyKey'.

ERROR in [default] /home/asmaps/git/letsmeet-angular2-ui/node_modules/@types/es6-shim/index.d.ts:10:4 
All declarations of 'value' must have identical modifiers.

ERROR in [default] /home/asmaps/git/letsmeet-angular2-ui/node_modules/@types/es6-shim/index.d.ts:248:4 
All declarations of 'EPSILON' must have identical modifiers.

ERROR in [default] /home/asmaps/git/letsmeet-angular2-ui/node_modules/@types/es6-shim/index.d.ts:283:4 
All declarations of 'MAX_SAFE_INTEGER' must have identical modifiers.

ERROR in [default] /home/asmaps/git/letsmeet-angular2-ui/node_modules/@types/es6-shim/index.d.ts:290:4 
All declarations of 'MIN_SAFE_INTEGER' must have identical modifiers.

ERROR in [default] /home/asmaps/git/letsmeet-angular2-ui/node_modules/@types/es6-shim/index.d.ts:346:4 
All declarations of 'flags' must have identical modifiers.

ERROR in [default] /home/asmaps/git/letsmeet-angular2-ui/node_modules/@types/es6-shim/index.d.ts:498:4 
All declarations of 'prototype' must have identical modifiers.

ERROR in [default] /home/asmaps/git/letsmeet-angular2-ui/node_modules/@types/es6-shim/index.d.ts:561:4 
All declarations of 'size' must have identical modifiers.

ERROR in [default] /home/asmaps/git/letsmeet-angular2-ui/node_modules/@types/es6-shim/index.d.ts:570:4 
All declarations of 'prototype' must have identical modifiers.

ERROR in [default] /home/asmaps/git/letsmeet-angular2-ui/node_modules/@types/es6-shim/index.d.ts:581:4 
All declarations of 'size' must have identical modifiers.

ERROR in [default] /home/asmaps/git/letsmeet-angular2-ui/node_modules/@types/es6-shim/index.d.ts:591:4 
All declarations of 'prototype' must have identical modifiers.

ERROR in [default] /home/asmaps/git/letsmeet-angular2-ui/node_modules/@types/es6-shim/index.d.ts:606:4 
All declarations of 'prototype' must have identical modifiers.

ERROR in [default] /home/asmaps/git/letsmeet-angular2-ui/node_modules/@types/es6-shim/index.d.ts:620:4 
All declarations of 'prototype' must have identical modifiers.

ERROR in [default] /home/asmaps/git/letsmeet-angular2-ui/node_modules/typescript/lib/lib.es2015.core.d.ts:17:13 
Duplicate identifier 'PropertyKey'.
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.81 kB       0       
webpack: bundle is now VALID.

Can you point me somewhere how I can fix this?

Thx in advance

PS: Do you have an IRC channel or similar?

@asmaps
Copy link
Author

asmaps commented Oct 13, 2016

I tried to install other versions of the @angular stuff, but except that the error messages changed (other packages, other versions missing) nothing changed :-(

@asmaps
Copy link
Author

asmaps commented Oct 13, 2016

I used https://github.com/AngularClass/angular2-webpack-starter now as project template. Seems to work until now. Let's see if it stays that way.

@asmaps asmaps closed this as completed Oct 13, 2016
@asmaps
Copy link
Author

asmaps commented Oct 13, 2016

As I didn't quite like that template when I looked closer at it I returned to angular-cli and debugged more. I think it may be something with core-js (used by angular-cli) vs. es6-shim (used by angular2-jsonapi), but my knowledge on that stuff is not deep enough to say if it's that or not. I will continue debugging, but hope somebody can give me a hint.

@asmaps asmaps reopened this Oct 13, 2016
@ghidoz
Copy link
Owner

ghidoz commented Oct 13, 2016

I am working on this right now :)
Moving @types/es6-shim to devDependencies solve the first problem.
Then there is a second problem: webpack is not understanding that it needs to get the library from the dist folder.
The simply workaroud is doing this:
import {...} from 'angular2-jsonapi/dist';

but it sucks. So I think I'm going to create an index.js file in the main folder.

@ghidoz ghidoz added the bug label Oct 13, 2016
@ghidoz ghidoz closed this as completed in b20df04 Oct 13, 2016
@asmaps
Copy link
Author

asmaps commented Oct 13, 2016

Thx! Now at least the errors are gone and it compiles without any warning or error. Unfortunately now I get the same like #36 - Uncaught Error: Unexpected value 'JsonApiModule' imported by the module 'AppModule'. I'm on latest version (3.2.1), which includes the typings line in package.json that should be the fix for #36.

@asmaps
Copy link
Author

asmaps commented Oct 13, 2016

Additional note: I also tried import { JsonApiModule } from 'angular2-jsonapi/dist';

@ghidoz
Copy link
Owner

ghidoz commented Oct 13, 2016

Adding typings fixes the error: Cannot find module 'angular2-jsonapi' of #36.
The second error that you are getting is the same of #13. You can possibly get rid of it by moving the import of the library as the first.

@Tinostarn
Copy link

Tinostarn commented Oct 14, 2016

Hi again :)
After seeing you posted a fix, I retried to upgrade to the 3.2.1
And unfortunately, on my side, I still have the error :(

Uncaught Error: Unexpected value 'JsonApiModule' imported by the module 'AppModule'

I also have this message, after the build process of the webpack dev server :

ERROR in ./client/app/shared/datastore.service.ts (20,15): error TS2345: Argument of type 'Http' is not assignable to parameter of type 'Http'. Property '_backend' is protected but type 'Http' is not a class derived from 'Http'.

My datastore.service.ts

import { Http, Headers, RequestOptions }    from '@angular/http';
...
@Injectable()
@JsonApiDatastoreConfig({
.......
})
export class Datastore extends JsonApiDatastore {

    constructor(http: Http) { 
        super(http);
    }

}

I feel unlucky... that blocks the build.

If you need from me more information, don't hesitate.

@asmaps
Copy link
Author

asmaps commented Oct 14, 2016

@supertino7 for the http error check the versions of @angular/http. Compare the note here: https://github.com/ghidoz/angular2-jsonapi#installation

The other problem: Shuffling the imports (at top of the file and the imports array) unfortunately does not help :-( So I also still have that problem

@ghidoz
Copy link
Owner

ghidoz commented Oct 14, 2016

For me it's working :(
I'll do more checks, but it's strange...

@ghidoz ghidoz reopened this Oct 14, 2016
@asmaps
Copy link
Author

asmaps commented Oct 14, 2016

I uploaded the code here: https://github.com/letsmeet-click/letsmeet-angular-ui

but its actually just the ng new template with updated packages and the angular2-jsonapi package

@Tinostarn
Copy link

@asmaps : do your angular-cli is based on Webpack too ?

Thx for pointing me to the doc. I downgraded the @angular2/http from 2.1.0 to 2.0.0 as it's the version used by the package.
But unfortunately once again, the Http error message remains :(

For your information, on my side, angular2-jsonapi worked pretty fine when I was on :
angular2-jsonapi v3.1.0
@angular/core, common, forms.... in v2.0.0
My failed attempts this morning and yesterday include the upgrade of Angular2 to the v2.1.0. I didn't try to stay on v2.0.0

@asmaps
Copy link
Author

asmaps commented Oct 14, 2016

I also tried a completely new project now:

ng new jsonapi-test
npm install angular2-jsonapi --save
ng serve

Install the module as described in the README: https://github.com/ghidoz/angular2-jsonapi#installation

But I still get that error

@asmaps
Copy link
Author

asmaps commented Oct 14, 2016

@supertino7 yes, the current version of angular-cli uses webpack. all versions of angular2-jsonapi before 3.2.1 don't work as there is the issue this issue was opened with

@Tinostarn
Copy link

Tinostarn commented Oct 14, 2016

I'm back with some new stuff
I just tried the following : I reverted my package.json to reset my angular2 stuff to v2.0.0, then installed angular2-jsonapi v3.2.1 manually.
It works. No error message in the build, not in the Chrome console either.

So, this is my current package.json :

"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-data-table": "^0.6.1",
    "angular2-jsonapi": "^3.2.1",
    "angular2-materialize": "^5.1.4",
    "core-js": "^2.4.1",
    "exports-loader": "^0.6.3",
    "hammerjs": "^2.0.8",
    "jquery": "2.2.4",
    "materialize-css": "^0.97.7",
    "primeng": "^1.0.0-beta.16",
    "request": "^2.75.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "^0.6.21"
  },
  "devDependencies": {
    "angular2-template-loader": "^0.4.0",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.15.0",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.0",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.7",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "ts-loader": "^0.8.1",
    "typescript": "^2.0.0",
    "typings": "^1.3.2",
    "webpack": "^1.13.0",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.14.0"
  }

And this is what npm-check-updates proposes me to upgrade :

 @angular/common                            2.0.0  →       2.1.0
 @angular/compiler                          2.0.0  →       2.1.0
 @angular/core                              2.0.0  →       2.1.0
 @angular/forms                             2.0.0  →       2.1.0
 @angular/http                              2.0.0  →       2.1.0
 @angular/platform-browser                  2.0.0  →       2.1.0
 @angular/platform-browser-dynamic          2.0.0  →       2.1.0
 @angular/router                            3.0.0  →       3.1.0
 angular2-data-table                       ^0.6.1  →      ^0.9.3
 jquery                                     2.2.4  →       3.1.1
 rxjs                               5.0.0-beta.12  →  5.0.0-rc.1
 angular2-template-loader                  ^0.4.0  →      ^0.5.0
 css-loader                               ^0.23.1  →     ^0.25.0
 file-loader                               ^0.8.5  →      ^0.9.0
 ts-loader                                 ^0.8.1  →      ^0.9.1

Run ncu with -u to upgrade package.json

I run ncu -u , edit the package.json to keep @angular/http to 2.0.0 and avoid Http error message, also jquery to 2.2.4 (needed by Materialize), then npm install.

And here the app breaks down. I don't have error message in the build, but I have the famous
Uncaught Error: Unexpected value 'JsonApiModule' imported by the module 'AppModule'
in my Chrome console.
Also, I tried to shuffle the position of the import. No result.

So, one of the upgrade above is causing this.
@asmaps : maybe we should look in our package.json which dependencies we have in common

@ghidoz
Copy link
Owner

ghidoz commented Oct 14, 2016

Thanks for debugging! So it's a conflict with the last version of one of your dependecies.. Maybe you can try again, updating just one library at the time, discovering which one causes the issue.

@ghidoz
Copy link
Owner

ghidoz commented Oct 14, 2016

Try this: restore everything as before running ncu -u and just update @angular/* to the last version. Do you still have the error?

@asmaps
Copy link
Author

asmaps commented Oct 14, 2016

That seems strange... I have downgraded all @angular/* stuff to 2.0.0 and don't have the other packages that @supertino7 has or have the version he has before doing the update, but I still have the error in chrome console

@asmaps
Copy link
Author

asmaps commented Oct 14, 2016

So maybe it's a dependency of a dependency that changes with the upgrade of a library that I don't have?

@Tinostarn
Copy link

Try this: restore everything as before running ncu -u and just update @angular/* to the last version. Do you still have the error?

@ghidoz : done it. And the app breaks down :
Uncaught Error: Unexpected value 'JsonApiModule' imported by the module 'AppModule'

I updated the following :

    "@angular/common": "2.1.0",
    "@angular/compiler": "2.1.0",
    "@angular/core": "2.1.0",
    "@angular/forms": "2.1.0",
    "@angular/http": "2.0.0",
    "@angular/material": "^2.0.0-alpha.9-3",
    "@angular/platform-browser": "2.1.0",
    "@angular/platform-browser-dynamic": "2.1.0",
    "@angular/router": "3.1.0",

without touching to http and material

@Tinostarn
Copy link

Ok, I tried to upgrade @angular stuff one by one.

@angular/core : the app doesn't build, some properties are missing, so I guess it can't work alone in v2.1.0.
I added @angular/compiler.
Then @angular/platform-browser.
No more property missing, the app build.

And there I've got my error message :

compiler.umd.js?9df7:13996 Uncaught Error: Unexpected value 'JsonApiModule' imported by the module 'AppModule'

Package.json at this point :

    "@angular/common": "2.0.0",
    "@angular/compiler": "2.1.0",
    "@angular/core": "2.1.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/material": "^2.0.0-alpha.9-3",
    "@angular/platform-browser": "2.1.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",

@Tinostarn
Copy link

@asmaps : Have you rm -rf your node_modules folder before downgrading ?
I had to do this each time

rimraf node_modules
npm install

otherwise a simple edit of the package.json and npm install/update didn't work, it's like some dependencies were not deeply updated by doing like this.

@asmaps
Copy link
Author

asmaps commented Oct 14, 2016

Yes, I did that, but I noticed, that I sometimes had Uncaught Error: Unexpected value 'AppComponent' declared by the module 'AppModule' which I thought is the same error, but different. It seems like this happens when I use @angular/* 2.0.0. But it also disappears if I comment out the JsonApiModule stuff. I don't get it anymore.... All googling and fiddeling around doesn't seem to get me any closer to the solution :-(

@Tinostarn
Copy link

I also had the Uncaught Error: Unexpected value 'AppComponent' declared by the module 'AppModule' at a time, it was on jsonapi v3.1.0 and angular stuff v2.0.0. The shuffling of the imports fixed that as for me :(
Not for you I guess

@ghidoz
Copy link
Owner

ghidoz commented Oct 14, 2016

I am going to test it again with various versions and understand what is the cause

@Tinostarn
Copy link

Good, I'll stay tuned :)
Don't hesitate if you need more information about my configuration, webpack or anything

@ghidoz
Copy link
Owner

ghidoz commented Oct 14, 2016

Ok, so here are my tests with angular2-jsonapi v3.2.1:

Test 1

I already have a project where I test my library:

  • angular-cli: 1.0.0-beta.11-webpack.9-4
  • @angular/*: 2.0.0

Working

Test 2

Then I tried to upgrade:

  • angular-cli: 1.0.0-beta.11-webpack.9-4
  • @angular/*: 2.1.0

Failing
Uncaught Error: Unexpected value 'JsonApiModule' imported by the module 'AppModule'

Test 3

Then I manually upgraded the dependencies in angular2-jsonapi (deleting the node_modules folder inside the angular2-jsonapi folder:

  • @angular/*: 2.1.0

Working

Test 4

Then I did another test with a new project, with the latest angular-cli version:

  • angular-cli: 1.0.0-beta.17
  • @angular/*: ~2.0.0 (resolved to 2.0.2)

Using the original angular2-jsonapi with:

  • @angular/*: 2.0.0

Failing

Test 5

Upgrading manually angular in the library should work as in test 3, right?

  • @angular/*: ~2.0.0 (resolved to 2.0.2)

No, is not :(
Failing

Test 6

I upgraded both the project and the library to the latest angular version:

  • @angular/*: 2.1.0

Failing

So, what the hell is the problem? With the old angular-cli was working, but with the most recent version is not...

Maybe I can try to upgrade the angular version in the library and create a new v.3.2.2. What do you think? Now I'm doing in local, maybe from npm will work...

@Tinostarn
Copy link

Hello @ghidoz
What surprise me is between the 2nd and 3rd test. Why a complete erasing of the node_modules makes the app compiling ? Unless you spoke about upgrading internal angular2-jsonapi dependencies but having main project angular2 already upgraded to the last version.

@HennerM
Copy link
Collaborator

HennerM commented Oct 19, 2016

If you are using angular-cli you have to patch the webpack-config (node_modules/angular-cli/models/webpack-build-common.js) or wait for the next release, this was fixed in angular/angular-cli#2292

@ghidoz
Copy link
Owner

ghidoz commented Oct 23, 2016

I just tried the new [email protected] but the error persists :(

@asmaps
Copy link
Author

asmaps commented Nov 23, 2016

anything new on this one? I still have the error and no idea how to fix :-(

@ghidoz
Copy link
Owner

ghidoz commented Dec 17, 2016

The new v3.4.0 should fix everything! Sorry if it took me so long!

Tested with:

Please, let me know if it actually fixes.

@therealcljohn
Copy link
Contributor

Hi @ghidoz I can confirm that removing the import of reflect-metadata statements solve the problem. Great work!

@ghidoz
Copy link
Owner

ghidoz commented Dec 19, 2016

Awesome! 👍 Actually, only removing the import was not the solution. I also had to compile it for AOT, in order to have it working. Don't know why...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants