在Heroku中構建錯誤：錯誤TS2307：找不到模塊'rxjs / subscription'

Question

我正試圖在Heroku中運行一個角度應用程序。 應用程序構建完美，並在我的筆記本電腦中運行localy。 npm install和npm start確實沒有任何問題。

但是，當我將代碼上傳到heroku時。 我得到以下內容：

remote：src / app / navigation / header / header.component.ts（2,30）中的錯誤：錯誤TS2307：找不到模塊'rxjs / subscription'。 remote：src / app / navigation / sidenav-list / sidenav-list.component.ts（2,30）：error TS2307：找不到模塊'rxjs / subscription'。

任何人都可以幫忙解決這個問題嗎？ 我已經嘗試了“ https://devcenter.heroku.com/articles/troubleshooting-node-deploys#keep-reading ”並沒有取得多大成功。

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

package.jason的內容是

{
  "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

我找到了解決方案。 作為角度7升級的一部分，rxjs也需要升級，以及使用rxjs / subscription對應用程序的各種組件進行包含。

來自'rxjs / subscription'的import {Subscription}; 從'rxjs'導入{Subscription}; //取消訂閱