Understanding the "Property 'of' does not exist on type 'typeof Observable'" Error in Angular

• Property 'of': You're trying to use a property named of on something.
• typeof Observable: This refers to the type definition of the Observable class in Angular's reactive programming library, RxJS.

The Issue:

The error indicates that the of property is not a built-in part of the Observable class itself.

Resolving the Error (RxJS Version-Specific):

The of function is actually a static method provided by RxJS to create an Observable that emits a set of values and then completes. The way you access it depends on your RxJS version:

• RxJS 5 and below:

  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/of'; // Import the 'of' operator
  
  const myObservable = Observable.of(1, 2, 3); // Create an Observable
  

• RxJS 6 and above:

  import { of } from 'rxjs'; // Import 'of' directly
  
  const myObservable = of(1, 2, 3); // Create an Observable
  

Explanation:

• In RxJS 5 and below, of was an operator that needed to be imported separately.
• In RxJS 6 and above, of is a static method included in the core rxjs module.

Key Points:

• Always check your RxJS version to determine the correct import method.
• The of function is a convenient way to create Observables that emit a limited set of values.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/of'; // Import the 'of' operator

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  myObservable: Observable<number>;

  constructor() { }

  ngOnInit() {
    // Create an Observable emitting numbers 1, 2, 3
    this.myObservable = Observable.of(1, 2, 3);

    // Subscribe to the Observable and handle emitted values
    this.myObservable.subscribe(value => {
      console.log('Received value:', value);
    });
  }
}

import { Component, OnInit } from '@angular/core';
import { of } from 'rxjs'; // Import 'of' directly

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  myObservable: Observable<number>;

  constructor() { }

  ngOnInit() {
    // Create an Observable emitting numbers 1, 2, 3
    this.myObservable = of(1, 2, 3);

    // Subscribe to the Observable and handle emitted values
    this.myObservable.subscribe(value => {
      console.log('Received value:', value);
    });
  }
}

In both examples:

1. We import necessary modules:
   • Component and OnInit from @angular/core for Angular components.
   • Observable from rxjs/Observable (RxJS 5) or directly from rxjs (RxJS 6) for observable functionality.
2. In RxJS 5, we import the of operator using rxjs/add/operator/of.
3. We define a component with ngOnInit lifecycle hook.
4. Inside ngOnInit, we create an Observable using Observable.of (RxJS 5) or of (RxJS 6) that emits the values 1, 2, and 3.
5. We subscribe to the Observable and log the received values using console.log.

1. Using from (RxJS 5 and above):

   The from function can be used to create Observables from various data sources, including arrays, promises, and iterables. Here's an example:

   import { of, from } from 'rxjs';
   
   const myArray = [1, 2, 3];
   const myObservable = from(myArray);
   
   // Similar to 'of' example, subscribe and handle emitted values
   

   In this case, from will emit each element of the provided array sequentially.

2. The create function provides more control over Observable creation. You pass a function (called an "observer" function) that defines how values are emitted and how the Observable completes or errors out. Here's a basic example:

   import { create } from 'rxjs';
   
   const myObservable = create(observer => {
     observer.next(1); // Emit value 1
     observer.next(2); // Emit value 2
     observer.complete(); // Complete the Observable
   });
   
   // Similar to 'of' example, subscribe and handle emitted values
   

   This example creates an Observable that emits values 1 and 2, then completes. You can customize the observer function to create more complex emission patterns.

3. Subjects are a special type of Observable that also allows you to manually emit values, complete, or error out. They can be useful for scenarios where you want to control the data flow more explicitly. Here's a basic example:

   import { Subject } from 'rxjs';
   
   const mySubject = new Subject<number>();
   
   mySubject.next(1); // Manually emit value 1
   mySubject.next(2); // Manually emit value 2
   mySubject.complete(); // Complete the Observable
   
   const myObservable = mySubject.asObservable(); // Get an Observable from the Subject
   
   // Similar to 'of' example, subscribe and handle emitted values
   

   Here, we create a Subject, emit values manually, and then convert it to a regular Observable using asObservable for subscribing.