The data type 'Subscription' cannot be assigned to the type 'Subscription'

Question

The data type 'Subscription' cannot be assigned to the type 'Subscription'

Whenever I try to build my JHipster Angular project, I encounter this error. It occurs right after running the command yarn start

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Subscription } from 'rxjs/Subscription';
import { JhiEventManager, JhiParseLinks, JhiAlertService } from 'ng-jhipster';
import { ITEMS_PER_PAGE, Principal } from '../../shared';
import { Observable } from 'rxjs/Observable';
....
private subscription: Subscription;
    private eventSubscriber: Subscription;
...
 ngOnInit() {
        this.subscription = this.route.params.subscribe((params) => {
            this.load(params['id']);
        });
}


> TS90010: Type 'Subscription' is not assignable to type 'Subscription'.
> Two different types with this name exist, but they are unrelated.

Oddly enough, it worked perfectly fine before without any issues. The reason behind this sudden error eludes me.

angular typescript rxjs yarnpkg

Answer 1

Answer №1

Consider modifying the following code

import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Observable';

with this alternative

import { Subscription, Observable } from 'rxjs';

Answer 2

Consider modifying the following code

import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Observable';

with this alternative

import { Subscription, Observable } from 'rxjs';

Answer 3

Answer №2

Instead of trying to keep track of multiple subscription objects, a better approach is to utilize a single Subject with takeUntil method for managing rxjs subscriptions in Angular.

finalise = new Subject<void>();

this.route.params.subscribe((params) => {
  this.load(params['id']);
}).pipe(takeUntil(this.finalise)); // No need to unsubscribe if finalise emits.

ngOnDestroy() {
  this.finalise.next();
  this.finalise.complete();
}

By implementing this method, you can streamline the management of all subscriptions using just one object within the component.

Answer 4

Instead of trying to keep track of multiple subscription objects, a better approach is to utilize a single Subject with takeUntil method for managing rxjs subscriptions in Angular.

finalise = new Subject<void>();

this.route.params.subscribe((params) => {
  this.load(params['id']);
}).pipe(takeUntil(this.finalise)); // No need to unsubscribe if finalise emits.

ngOnDestroy() {
  this.finalise.next();
  this.finalise.complete();
}

By implementing this method, you can streamline the management of all subscriptions using just one object within the component.

The data type 'Subscription' cannot be assigned to the type 'Subscription'

Answer №1

Answer №2

Similar questions

Timing functions fired with various delays

What could be the reason for ng serve malfunctioning when the project cli version is v9 and the global cli version is v11

Obtain information from a PHP file using AngularJS 2

Ensure that Angular waits for the subscription to be completed before triggering the function to generate an Excel

Enhancing JavaScript with TypeScript: implementing functional mixins

There seems to be an issue with the OpenAPI generator for Angular as it is not generating the multipart form data endpoint correctly. By default

Enhance your Angular Material Table with split headers and sticky header capabilities

Despite passing the same dependency to other services, the dependencies in the constructor of an Angular2 Service are still undefined

Issue with Ionic 2 where headers are not being properly set before making an HTTP request

Creating a factory function through typhography

What could be causing the error message "why can't shows read property

Creating a new model in TypeScript may encounter a declaration issue with getting

"String representation" compared to the method toString()

Should a MEAN stack app require the use of two servers in order to run?

finding corresponding key in ngFor

Downloading videos from WebRTC getDisplayMedia in Angular 8 is not supported

Error: Unable to access 'nativeElement' property from undefined object when trying to read HTML element in Angular with Jasmine testing

What's the best way to verify if a user is already authenticated in Angular Firebase?

React component is not properly updating the state setter value

Refresh causing Angular routing failure due to identical names for Angular route and server route