Getting errors after installing angular2-jsonapi

[asmaps]

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?

[asmaps]

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]

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]

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.

[ghidoz]

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.

[asmaps]

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]

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

[ghidoz]

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]

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]

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

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