Getting errors after installing angular2-jsonapi

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
letsmeet-angular2-ui@0.0.0 /home/asmaps/git/letsmeet-angular2-ui
├── UNMET PEER DEPENDENCY @angular/common@2.0.2
├── UNMET PEER DEPENDENCY @angular/compiler@2.0.2
├── UNMET PEER DEPENDENCY @angular/core@2.0.2
├── UNMET PEER DEPENDENCY @angular/platform-browser@2.0.2
└─┬ angular2-jsonapi@3.2.0 
  ├── @angular/common@2.0.0 
  ├── @angular/compiler@2.0.0 
  ├── @angular/core@2.0.0 
  ├── @angular/http@2.0.0 
  ├── @angular/platform-browser@2.0.0 
  ├── @types/es6-shim@0.31.32 
  ├── @types/lodash@4.14.37 
  ├── @types/reflect-metadata@0.0.4 
  ├── reflect-metadata@0.1.3 
  └── zone.js@0.6.23 

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.14
npm WARN @angular/compiler-cli@0.6.4 requires a peer of @angular/platform-server@2.0.2 but none was installed.
npm WARN @angular/platform-server@2.1.0 requires a peer of @angular/core@2.1.0 but none was installed.
npm WARN @angular/platform-server@2.1.0 requires a peer of @angular/common@2.1.0 but none was installed.
npm WARN @angular/platform-server@2.1.0 requires a peer of @angular/compiler@2.1.0 but none was installed.
npm WARN @angular/platform-server@2.1.0 requires a peer of @angular/platform-browser@2.1.0 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?

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

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.

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.

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.

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.

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

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.

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.

@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

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

@asmaps

@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.

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 :-(

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

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

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

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...

@ghidoz

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.

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

I just tried the new angular-cli@v1.0.0-beta.18 but the error persists :(

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

Make library AOT ready and remove conflicting reflect-metadata import. …

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

Tested with:

angular-cli@1.0.0-beta.22-1
@angular/*@2.2.3

Please, let me know if it actually fixes.

@ghidoz

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

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...

Navigation Menu

Repository navigation

Getting errors after installing angular2-jsonapi #35

11 remaining items

Test 1

Test 2

Test 3

Test 4

Test 5

Test 6

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Getting errors after installing angular2-jsonapi #35

Description

Activity

asmaps commented on Oct 13, 2016

asmaps commented on Oct 13, 2016

asmaps commented on Oct 13, 2016

ghidoz commented on Oct 13, 2016

asmaps commented on Oct 13, 2016

asmaps commented on Oct 13, 2016

ghidoz commented on Oct 13, 2016

Tinostarn commented on Oct 14, 2016

asmaps commented on Oct 14, 2016

ghidoz commented on Oct 14, 2016

11 remaining items

Tinostarn commented on Oct 14, 2016

asmaps commented on Oct 14, 2016

Tinostarn commented on Oct 14, 2016

ghidoz commented on Oct 14, 2016

Tinostarn commented on Oct 14, 2016

ghidoz commented on Oct 14, 2016

Test 1

Test 2

Test 3

Test 4

Test 5

Test 6

Tinostarn commented on Oct 17, 2016

HennerM commented on Oct 19, 2016

ghidoz commented on Oct 23, 2016

asmaps commented on Nov 23, 2016

ghidoz commented on Dec 17, 2016

therealcljohn commented on Dec 19, 2016

ghidoz commented on Dec 19, 2016

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions