mpro
mpro

Reputation: 15050

Public property X of exported class has or is using name 'Observable' from external module "/rxjs/internal/Observable" but cannot be named

I've implemented service for sharing the data between compoments:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private dataSource = new BehaviorSubject(Object);
  public currentData = this.dataSource.asObservable();

  constructor() {}

  changeData(data) {
    this.dataSource.next(data);
  }
}

Everything was working fine, until I've tried to build the project. Then I've got this error:

error TS4029: Public property 'currentData' of exported class has or is using name 'Observable' from external module "/rxjs/internal/Observable" but cannot be named.

Upvotes: 1

Views: 3447

Answers (3)

nawlbergs
nawlbergs

Reputation: 3010

in my case, I had the following in a file:

interface IRecentUser {
  email: string,
  displayName: string
}

export interface IMyInterface {
  // ...
  recentUsers: IRecentUser[];
}

and in my controller i was trying to access the nested interface

recentUsers: IMyInterface['recentUsers'] = [];

which is a reference to the IRecentUser interface.. and was throwing the error.... Typescript cant seem to pull that IRecentUser since it was not exported (even tho it was through its parent)... so adding the export fixes it:

export interface IRecentUser {
...

Upvotes: 0

Gaalvarez
Gaalvarez

Reputation: 163

In my case the error was for Ionify library in angular and the bellow code causes error in angular library compilation:

import icSettings from '@iconify/icons-ic/twotone-settings';
...
@Component({
   ....
})
export class ConfigPanelToggleComponent implements OnInit {

  icSettings = icSettings; // This causes error

}

Solution is use any type since the @iconify library do not export the type needed.

import icSettings from '@iconify/icons-ic/twotone-settings';
...
@Component({
   ....
})
export class ConfigPanelToggleComponent implements OnInit {

  icSettings: any = icSettings; // No error

}

Upvotes: 1

mpro
mpro

Reputation: 15050

After some investigation I've realized that I'm using property which refers to the Observable, but it cannot be found. To fix it I need to simply add missing Observable import and typing into the currentData variable:

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private dataSource = new BehaviorSubject(Object);
  public currentData: Observable<Object> = this.dataSource.asObservable();

  constructor() {}

  changeData(data) {
    this.dataSource.next(data);
  }
}

However error only appeared when I've converted the project into the lib.

Upvotes: 2

Related Questions