Error after try in first Component

[christophschoeni]

I use ionic in version 5.2.3. i installed your package angular-spotify and included it in modules as described in the manual.

Install angular2-spotify via npm. Use the --save property to save into your package.json file.

npm install angular2-spotify --save

import {Component} from '@angular2/core';
import {SpotifyService} from 'angular2-spotify/angular2-spotify';

@Component({
    providers: [
        SpotifyService,{ 
        provide: "SpotifyConfig" , 
            useValue: {
                clientId: '<CLIENT_ID>',
                redirectUri: '<CALLBACK_URI>',
                scope: '<SCOPE>',
                // If you already have an auth token
                authToken: '<AUTH_TOKEN>'
            }
        }
    ]  
})
export class AppComponent {...}

After that I embedded the code in my Tab1 component:

import { Component } from '@angular/core';
import SpotifyService from 'angular2-spotify';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})

export class Tab1Page {
  constructor(private spotifyService: SpotifyService) {}

  getAlbum() {
    this.spotifyService.getAlbum('0sNOF9WDwhWunNAHPD3Baj').subscribe(data => {
      console.log(data);
    } );
  }
}

Wenn ich nun versuche die App zu starten, erhalte ich folgende Fehler:

[ng] ERROR in ./node_modules/angular2/src/facade/async.js
[ng] Module not found: Error: Can't resolve 'rxjs/Observable' in '/Users/christoph/Projects/Development/ionic/musicQuiz/node_modules/angular2/src/facade'
[ng] ERROR in ./node_modules/angular2/src/http/backends/xhr_backend.js
[ng] Module not found: Error: Can't resolve 'rxjs/Observable' in '/Users/christoph/Projects/Development/ionic/musicQuiz/node_modules/angular2/src/http/backends'
[ng] ERROR in ./node_modules/angular2/src/http/backends/jsonp_backend.js
[ng] Module not found: Error: Can't resolve 'rxjs/Observable' in '/Users/christoph/Projects/Development/ionic/musicQuiz/node_modules/angular2/src/http/backends'
[ng] ERROR in ./node_modules/angular2-spotify/angular2-spotify.js
[ng] Module not found: Error: Can't resolve 'rxjs/Rx' in '/Users/christoph/Projects/Development/ionic/musicQuiz/node_modules/angular2-spotify'
[ng] ERROR in ./node_modules/angular2/src/facade/async.js
[ng] Module not found: Error: Can't resolve 'rxjs/Subject' in '/Users/christoph/Projects/Development/ionic/musicQuiz/node_modules/angular2/src/facade'
[ng] ERROR in ./node_modules/angular2/src/facade/async.js
[ng] Module not found: Error: Can't resolve 'rxjs/observable/PromiseObservable' in '/Users/christoph/Projects/Development/ionic/musicQuiz/node_modules/angular2/src/facade'
[ng] ERROR in ./node_modules/angular2/src/facade/async.js
[ng] Module not found: Error: Can't resolve 'rxjs/operator/toPromise' in '/Users/christoph/Projects/Development/ionic/musicQuiz/node_modules/angular2/src/facade'
[ng] ℹ ｢wdm｣: Failed to compile.
[ng]     
[ng]     ERROR in node_modules/angular2-spotify/node_modules/rxjs/CoreOperators.d.ts(1,28): error TS1149: File name '/Users/christoph/Projects/Development/ionic/musicQuiz/node_modules/angular2-spotify/node_modules/rxjs/Observable.d.ts' differs from already included file name '/Users/christoph/Projects/Development/ionic/musicQuiz/node_modules/angular2-spotify/node_modules/rxjs/observable.d.ts' only in casing.
[ng]     node_modules/angular2-spotify/node_modules/rxjs/observable.d.ts(95,5): error TS2416: Property 'concatAll' in type 'Observable<T>' is not assignable to the same property in base type 'CoreOperators<T>'.
[ng]       Type '() => Observable<any>' is not assignable to type '() => Observable<T>'.
[ng]         Type 'Observable<any>' is not assignable to type 'Observable<T>'.
[ng]           Types of property 'buffer' are incompatible.
[ng]             Type '(closingNotifier: Observable<any>) => Observable<any[]>' is not assignable to type '(closingNotifier: Observable<any>) => Observable<T[]>'.
[ng]               Type 'Observable<any[]>' is not assignable to type 'Observable<T[]>'.
[ng]                 Types of property 'buffer' are incompatible.
[ng]                   Type '(closingNotifier: Observable<any>) => Observable<any[][]>' is not assignable to type '(closingNotifier: Observable<any>) => Observable<T[][]>'.
[ng]                     Type 'Observable<any[][]>' is not assignable to type 'Observable<T[][]>'.
[ng]                       Types of property 'defaultIfEmpty' are incompatible.
[ng]                         Type '<R>(defaultValue?: any[][] | R) => Observable<any[][]> | Observable<R>' is not assignable to type '<R>(defaultValue?: T[][] | R) => Observable<T[][]> | Observable<R>'.
[ng]                           Type 'Observable<any[][]> | Observable<R | T[][]>' is not assignable to type 'Observable<R> | Observable<T[][]>'.
[ng]                             Type 'Observable<any[][]>' is not assignable to type 'Observable<R> | Observable<T[][]>'.
[ng]     node_modules/angular2-spotify/node_modules/rxjs/observable.d.ts(122,5): error TS2416: Property 'mergeAll' in type 'Observable<T>' is not assignable to the same property in base type 'CoreOperators<T>'.
[ng]       Type '(concurrent?: any) => Observable<any>' is not assignable to type '(concurrent?: number) => Observable<T>'.
[ng]         Type 'Observable<any>' is not assignable to type 'Observable<T>'.
[ng]     node_modules/angular2/src/http/backends/jsonp_backend.d.ts(7,10): error TS2305: Module '"../../../../rxjs/Observable"' has no exported member 'Observable'.
[ng]     node_modules/angular2/src/http/backends/xhr_backend.d.ts(7,10): error TS2305: Module '"../../../../rxjs/Observable"' has no exported member 'Observable'.
[ng]     node_modules/angular2/src/http/http.d.ts(5,10): error TS2305: Module '"../../../rxjs/Observable"' has no exported member 'Observable'.
[ng]     node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
[ng]     
[ng]     
[ng]     ERROR in node_modules/angular2-spotify/node_modules/rxjs/CoreOperators.d.ts(1,28): error TS1149: File name '/Users/christoph/Projects/Development/ionic/musicQuiz/node_modules/angular2-spotify/node_modules/rxjs/Observable.d.ts' differs from already included file name '/Users/christoph/Projects/Development/ionic/musicQuiz/node_modules/angular2-spotify/node_modules/rxjs/observable.d.ts' only in casing.
[ng]     node_modules/angular2-spotify/node_modules/rxjs/observable.d.ts(95,5): error TS2416: Property 'concatAll' in type 'Observable<T>' is not assignable to the same property in base type 'CoreOperators<T>'.
[ng]       Type '() => Observable<any>' is not assignable to type '() => Observable<T>'.
[ng]         Type 'Observable<any>' is not assignable to type 'Observable<T>'.
[ng]           Types of property 'buffer' are incompatible.
[ng]             Type '(closingNotifier: Observable<any>) => Observable<any[]>' is not assignable to type '(closingNotifier: Observable<any>) => Observable<T[]>'.
[ng]               Type 'Observable<any[]>' is not assignable to type 'Observable<T[]>'.
[ng]                 Types of property 'buffer' are incompatible.
[ng]                   Type '(closingNotifier: Observable<any>) => Observable<any[][]>' is not assignable to type '(closingNotifier: Observable<any>) => Observable<T[][]>'.
[ng]                     Type 'Observable<any[][]>' is not assignable to type 'Observable<T[][]>'.
[ng]                       Types of property 'defaultIfEmpty' are incompatible.
[ng]                         Type '<R>(defaultValue?: any[][] | R) => Observable<any[][]> | Observable<R>' is not assignable to type '<R>(defaultValue?: T[][] | R) => Observable<T[][]> | Observable<R>'.
[ng]                           Type 'Observable<any[][]> | Observable<R | T[][]>' is not assignable to type 'Observable<R> | Observable<T[][]>'.
[ng]                             Type 'Observable<any[][]>' is not assignable to type 'Observable<R> | Observable<T[][]>'.
[ng]     node_modules/angular2-spotify/node_modules/rxjs/observable.d.ts(122,5): error TS2416: Property 'mergeAll' in type 'Observable<T>' is not assignable to the same property in base type 'CoreOperators<T>'.
[ng]       Type '(concurrent?: any) => Observable<any>' is not assignable to type '(concurrent?: number) => Observable<T>'.
[ng]         Type 'Observable<any>' is not assignable to type 'Observable<T>'.
[ng]     node_modules/angular2/src/http/backends/jsonp_backend.d.ts(7,10): error TS2305: Module '"../../../../rxjs/Observable"' has no exported member 'Observable'.
[ng]     node_modules/angular2/src/http/backends/xhr_backend.d.ts(7,10): error TS2305: Module '"../../../../rxjs/Observable"' has no exported member 'Observable'.
[ng]     node_modules/angular2/src/http/http.d.ts(5,10): error TS2305: Module '"../../../rxjs/Observable"' has no exported member 'Observable'.
[ng]     node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
[ng]     

It seems to me your package has a problem with the Observable. What do you think?

If you want to see my code, I can share my app with you on Github.

Thanks a lot and greetings Christoph

[sensodejay]

It is best to use the typescript file instead of Npm. There are some changes necessary that the Api (changes from Spotify) works some you can find on my Pulle request. There is also Chance in HTTPclient on angular > 6 witch I have made but not pushed yet

[sensodejay]

You can use my Fork contains the change:

• HttpClient for Angular after version 4.3
• RxJS Update to version 6
• Update to changes of Spotify API