building error in Heroku: error TS2307: Cannot find module 'rxjs/subscription'

Question

I am trying to run an angular applicaiton in Heroku. The applicaiton builds perfectly and runs localy in my laptop. npm install and npm start does build without any issues.

however, when I upload the code to heroku. I get the following:

remote: ERROR in src/app/navigation/header/header.component.ts(2,30): error TS2307: Cannot find module 'rxjs/subscription'. remote: src/app/navigation/sidenav-list/sidenav-list.component.ts(2,30): error TS2307: Cannot find module 'rxjs/subscription'.

Could anyone help with steps to trouble-shoot this problem? I have already tried " https://devcenter.heroku.com/articles/troubleshooting-node-deploys#keep-reading " with not much success.

https://devcenter.heroku.com/articles/troubleshooting-node-deploys#keep-reading

the content of the package.jason is

{
  "name": "kca",
  "version": "0.0.0",
  "engines": {
    "node": "10.13.0",
    "npm": "6.4.1"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@agm/snazzy-info-window": "^1.0.0-beta.3",
    "@angular/animations": "^6.1.10",
    "@angular/cdk": "^7.2.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/flex-layout": "^6.0.0-beta.18",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^7.2.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@ngrx/store": "^7.2.0",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.4",
    "cors": "^2.8.4",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.3.1",
    "ngx-papaparse": "^2.1.3",
    "papaparse": "^4.4.0",
    "rxjs": "^6.3.2",
    "rxjs-compat": "^6.2.0",
    "snazzy-info-window": "^1.1.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.3",
    "@angular/cli": "^6.2.2",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.0.2",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "angular-ide": "^0.9.41",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "^2.9.2"
  }
}

Answer 1

import { Component, OnInit, OnDestroy, EventEmitter, Output} from '@angular/core';
import { Subscription } from 'rxjs/subscription';
import { Router } from '@angular/router';

import { AuthService } from '../../auth/auth.service';
import { TokenStorageService } from '../../auth/token-storage.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  @Output () sidenavToggle = new EventEmitter<void>();
  isAuth = false;
  // if we are subscribing to an observable we need to un-subscribe once we finish using it
  // this will eliminate memory leak problems. authSubscription will help on that.
  authSubscription: Subscription;

  constructor(private authService: AuthService, private tokenStorage: TokenStorageService, private router: Router ) { 
  }

  ngOnInit() {
      // subscribe to changes in authorisation and ensure we store the subscriptions to eliminate it later
      this.authSubscription = this.authService.authChange.subscribe(authStatus => {
          this.isAuth = authStatus;
      })
  }

  onLogout() {
      this.authService.logout();
      this.tokenStorage.signOut();
      this.router.navigate(['login'])
  }

  ngOnDestroy () {
      // un-subscribe from all subscriptions when destroying this component. 
      this.authSubscription.unsubscribe();
  }

  // Create an event that we will listen to in the main app.component.html
  // This will help us toggle and untoggle the sidenav pannel
  // sidenaToggle is our event emitter and making output we make it listenable
  // from outside the component. NOTE this pattern is used quite commongly
  onToggleSidenav () {
    this.sidenavToggle.emit();
  }

}

Answer 2

I found the solution. As part of the angular 7 upgrade, rxjs needed upgrade as well and along with that the includes on various components of the application using rxjs/subscription.

from import { Subscription } from 'rxjs/subscription'; to import { Subscription } from 'rxjs'; //eliminate the subscription