Type \'Observable<{}>\' is not assignable to type in angular 2

MD ABDULLAH AL KAFI

Observable is unable to assigend, my package.json file holds

"angular2": "2.0.0-beta.17",
"systemjs": "0.19.24",
"es6-promise": "^3.0.2",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.6",
"zone.js": "0.6.12"

Problem happens while my terminal start compiling it shows me an errormessage

message:

'\u001b[31mresources/assets/typescript/services/user.service.ts(25,5): \u001b[39merror TS2322: Type \'Observable<{}>\' is not assignable to type \'Observable\'.\n Type \'{}\' is not assignable to type \'User[]\'.\n Property \'length\' is missing in type \'{}\'.' }

in my service component this.loggedUser$ is unable to initialised by new Observable inside the constructor and it breaks the whole thing.

This is my service component

import {Injectable} from 'angular2/core';
import {Http,Response,Headers} from 'angular2/http';

import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
import 'rxjs/add/operator/share';
import 'rxjs/add/operator/map';
import {User} from '../interfaces/interfaces';
export var API_ENDPOINT = 'http://localhost:8080/api';


@Injectable()
export class UserService {

  loggedUser$: Observable<User[]>; 
  private loggedUserObserver: Observer<User[]>;
  private loggedUserInfo:{
        users: User[]
    };

  constructor(private _http: Http) {
    this.loggedUser$ = new Observable(observer => this.loggedUserObserver = observer).share();
    this.loggedUserInfo = { users: [] };
  }


    getLoggedUser(){
      return this._http.get(API_ENDPOINT+'/getLoggedUser')
      .map((res:Response)=>res.json())
      .subscribe(
        data => { 
        this.loggedUserInfo.users = data;
        this.loggedUserObserver.next(this.loggedUserInfo.users);
        },
        err => console.error(err),
        () => console.log(this.loggedUserInfo.users)
      );
    }


}

in my interface I have

export interface User {
    id?: number,    
    name?: string,
    email?:string,
    email2?: string,
    password?: string,
    mobile?: string,
    profilePicture?:string,
    userTimeZone?: string
}

if i place a type in the constructor like

this.loggedUser$ = new Observable<User[]>(observer => this.loggedUserObserver = observer).share();

then it shows me a different error on the app component, the error is not coming in the terminal its coming on the console and it is EXCEPTION: TypeError: _this.loggedUserObserver is undefined

import {Component,OnInit,} from 'angular2/core';
import {Router,ROUTER_DIRECTIVES} from 'angular2/router';
import {RouteConfig, RouteData} from 'angular2/router';

import {MyProfileComponent} from './settings/my-profile.component';
import {MyCompaniesComponent} from './company/my-companies.component';
import {MyTasksComponent} from './tasks/my-tasks.component';
import {UserComponent} from './user/user.component';

import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';
import {UserService} from './services/user.service';
import {User} from './interfaces/interfaces';


@Component({
    selector: 'my-app',
    //templateUrl: 'appView/front.html',
    template:`{{loggedUser.name}}`,
    directives:[ROUTER_DIRECTIVES, MyProfileComponent, MyCompaniesComponent,UserComponent],
    providers: [UserService],


})

export class AppComponent{  
    loggedUser: Observable<User[]>;
    loggedUserInfo:User;
    constructor (private _userService: UserService){    
    }


    ngOnInit(){
        this.loggedUser = this._userService.loggedUser$;
        this._userService.getLoggedUser();
    }
}
MD ABDULLAH AL KAFI

Searched a lot and comments from #majodi also helped. In the service.ts i have initialised my variable like this

loggedUser$: Observable<User[]>;  
loggedUserObserver: Observer<User[]>;
loggedUserInfo:User[]; 

and in the service constructor

constructor(private _http: Http) {
    this.loggedUser$ = new Observable<User[]>(
      observer => {
      this.loggedUserObserver = observer;
    }
    ).share();
}

and in the app.component.ts file i have called my observable this way

ngOnInit(){     
    this._userService.loggedUser$.subscribe(latestData => {
       this.loggedUserInfo1 = latestData;

    });      
    this._userService.getLoggedUser(); 
}

and these solved the issue.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Angular2 : Type 'Subscription' is not assignable to type

From Dev

Observable<{}> not assignable to type Observable<SomeType[]>

From Dev

Type 'Date' is not assignable to type 'Observable<Date>' - Angular 6+

From Dev

Type 'Observable<{} | IProduct[]>' is not assignable to type 'Observable<IProduct[]>'

From Dev

RXJS Observable enum type, Type 'Observable<Type>' is not assignable to type 'Type'

From Dev

IntelliJ and Angular 2 Argument Type Not Assignable Errors

From Dev

Angular 2 and typescript argument of type response is not assignable

From Dev

Angular: error TS2322: Type 'Observable<{}>' is not assignable ... with share() operator

From Dev

Angular 2- Error: Type 'AbstractControl' is not assignable to type 'AbstractControl'

From Dev

angular2 Type 'Subject<{}>' is not assignable to type '() => Subject<number>'

From Dev

angular2 Type 'Subject<{}>' is not assignable to type '() => Subject<number>'

From Dev

Angular 2- Error: Type 'AbstractControl' is not assignable to type 'AbstractControl'

From Dev

Angular2 Error: Type 'number' is not assignable to type 'NumberConstructor'

From Dev

Argument of type 'number' is not assignable to parameter of type 'string' in angular2.

From Dev

When using an Angular route Guard: 'Observable<true | undefined>' is not assignable to type > 'Observable<boolean>'

From Dev

TS2322: Type 'Observable<{}>' is not assignable to type 'Observable<Hero>'

From Java

NgRX effects - Type 'Observable<unknown>' is not assignable to type 'Observable<Action>'

From Dev

rxjs - [ts] Type 'Observable<{} | T>' is not assignable to type 'Observable<T>'

From Dev

Type Observable<boolean> is not assignable to type Observable<HttpResponse<boolean>>

From Dev

Angular2 Error 'Argument of type '{}' is not assignable...'

From Dev

Angular 2 bootstrap function gives error "Argument type AppComponent is not assignable to parameter type Type"

From Dev

ionic 2 "Type '{}' is not assignable to type 'any[]"

From Dev

Type 'Observable<any>' is not assignable to type 'StoresSummaryResults'. Property 'Data' is missing in type 'Observable<any>'

From Dev

Angular2 and TypeScript: error TS2322: Type 'Response' is not assignable to type 'UserStatus'

From Dev

Angular2 authentication - Type 'AsyncSubject<{}>' is not assignable to type 'AsyncSubject<boolean> - observables and typescript

From Dev

Angular 2 RC-4 forms, Type 'FormGroup' is not assignable to type 'typeof FormGroup'

From Dev

Angular 2 RC-4 forms, Type 'FormGroup' is not assignable to type 'typeof FormGroup'

From Dev

Angular2 - Argument of type 'QueryList<ElementRef>' is not assignable to parameter of type 'string'

From Java

Angular - Response is not assignable to type 'request?: HttpRequest<any>

Related Related

  1. 1

    Angular2 : Type 'Subscription' is not assignable to type

  2. 2

    Observable<{}> not assignable to type Observable<SomeType[]>

  3. 3

    Type 'Date' is not assignable to type 'Observable<Date>' - Angular 6+

  4. 4

    Type 'Observable<{} | IProduct[]>' is not assignable to type 'Observable<IProduct[]>'

  5. 5

    RXJS Observable enum type, Type 'Observable<Type>' is not assignable to type 'Type'

  6. 6

    IntelliJ and Angular 2 Argument Type Not Assignable Errors

  7. 7

    Angular 2 and typescript argument of type response is not assignable

  8. 8

    Angular: error TS2322: Type 'Observable<{}>' is not assignable ... with share() operator

  9. 9

    Angular 2- Error: Type 'AbstractControl' is not assignable to type 'AbstractControl'

  10. 10

    angular2 Type 'Subject<{}>' is not assignable to type '() => Subject<number>'

  11. 11

    angular2 Type 'Subject<{}>' is not assignable to type '() => Subject<number>'

  12. 12

    Angular 2- Error: Type 'AbstractControl' is not assignable to type 'AbstractControl'

  13. 13

    Angular2 Error: Type 'number' is not assignable to type 'NumberConstructor'

  14. 14

    Argument of type 'number' is not assignable to parameter of type 'string' in angular2.

  15. 15

    When using an Angular route Guard: 'Observable<true | undefined>' is not assignable to type > 'Observable<boolean>'

  16. 16

    TS2322: Type 'Observable<{}>' is not assignable to type 'Observable<Hero>'

  17. 17

    NgRX effects - Type 'Observable<unknown>' is not assignable to type 'Observable<Action>'

  18. 18

    rxjs - [ts] Type 'Observable<{} | T>' is not assignable to type 'Observable<T>'

  19. 19

    Type Observable<boolean> is not assignable to type Observable<HttpResponse<boolean>>

  20. 20

    Angular2 Error 'Argument of type '{}' is not assignable...'

  21. 21

    Angular 2 bootstrap function gives error "Argument type AppComponent is not assignable to parameter type Type"

  22. 22

    ionic 2 "Type '{}' is not assignable to type 'any[]"

  23. 23

    Type 'Observable<any>' is not assignable to type 'StoresSummaryResults'. Property 'Data' is missing in type 'Observable<any>'

  24. 24

    Angular2 and TypeScript: error TS2322: Type 'Response' is not assignable to type 'UserStatus'

  25. 25

    Angular2 authentication - Type 'AsyncSubject<{}>' is not assignable to type 'AsyncSubject<boolean> - observables and typescript

  26. 26

    Angular 2 RC-4 forms, Type 'FormGroup' is not assignable to type 'typeof FormGroup'

  27. 27

    Angular 2 RC-4 forms, Type 'FormGroup' is not assignable to type 'typeof FormGroup'

  28. 28

    Angular2 - Argument of type 'QueryList<ElementRef>' is not assignable to parameter of type 'string'

  29. 29

    Angular - Response is not assignable to type 'request?: HttpRequest<any>

HotTag

Archive