Angular 8: ERROR 錯誤: Uncaught (in promise): TypeError: You provided an invalid object where a stream is expected

Question

我有一個最近升級的 Angular 應用程序（Angular v7 => v8），過去一切正常。

但是現在，切換到 8 后，我的登錄功能出現錯誤（如下）。 該錯誤很可能很容易解決，但堆棧跟蹤意義不大。 它沒有顯示類型錯誤實際發生的位置，除了在供應商代碼中。

我試圖在黑暗中修復它，例如解決從this.router.navigate返回的承諾，將訂閱轉換為承諾，將 console.log 添加到 auth 守衛以查看它是否在那里停止（它沒有），最后，我在我的屏幕上添加了一些日志代碼（登錄后的屏幕），但沒有記錄任何內容。

有沒有人遇到過這個？ 我查看了升級說明，沒有看到任何突出的東西。 如果有人有任何提示可以找出發生這種情況的地方，我可以從那里獲取。

登錄代碼：

    this.clearAlerts();
    localStorage.setItem('persistLogin', this.persistLogin.toString());
    this.svc
      .login(this.user).subscribe((res: ApiResponse) => {
        console.log(res);
        this.router.navigate([res.action.href]);
      }, err => {
          console.log(err);
        this.error = err.error.message;
        if (err.error.action) {
          this.links.resolve(err.error);
        }
      }, () => console.log('done'));
  }

錯誤信息：

完成后發生。

    core.js:6014 ERROR Error: Uncaught (in promise): TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
        at subscribeTo (subscribeTo.js:27)
        at from (from.js:9)
        at Observable._subscribe (defer.js:14)
        at Observable._trySubscribe (Observable.js:42)
        at Observable.subscribe (Observable.js:28)
        at TakeOperator.call (take.js:22)
        at Observable.subscribe (Observable.js:23)
        at subscribeToResult (subscribeToResult.js:9)
        at MergeMapSubscriber._innerSub (mergeMap.js:59)
        at MergeMapSubscriber._tryNext (mergeMap.js:53)
        at resolvePromise (zone-evergreen.js:793)
        at resolvePromise (zone-evergreen.js:752)
        at zone-evergreen.js:854
        at ZoneDelegate.invokeTask (zone-evergreen.js:400)
        at Object.onInvokeTask (core.js:39680)
        at ZoneDelegate.invokeTask (zone-evergreen.js:399)
        at Zone.runTask (zone-evergreen.js:168)
        at drainMicroTaskQueue (zone-evergreen.js:570)
        at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:485)
        at invokeTask (zone-evergreen.js:1596)

編輯- 添加了登錄 Svc 代碼。

登錄 Svc 代碼 - 注意，我嘗試刪除它並得到相同的錯誤

login(user: User) {
    return this.http.post(`${environment.api}/account/login`, user).pipe(
      map((res: ApiResponse) => {
        localStorage.setItem('token', res.payload);
        return res;
      }),
      map(
        (res: ApiResponse) => {
          const timer$ = timer(0, REFRESH_INTERVAL);
          this.$isAuthenticated = timer$.pipe(
            switchMap(_ => this.getIsAuthenticated()),
            shareReplay(CACHE_SIZE)
          );
          return res;
        },
        map((res: ApiResponse) => {
          const timer$ = timer(0, REFRESH_INTERVAL);
          this.$user = timer$.pipe(
            switchMap(_ => this.getSelf()),
            shareReplay(CACHE_SIZE)
          );
          return res;
        })
    )
    );
  }

編輯 2添加主頁組件

家庭組件代碼 (M

import { Component, OnInit } from '@angular/core';
import { select, Store } from '@ngrx/store';
import { Subscription } from 'rxjs';
import { User } from '../../models/user.model';
import { AppService } from '../../services/app.service';
import { IState } from '../../store/reducers';
import { selectApp } from '../../store/selectors/app.selectors';
import { IAppState } from './../../store/state/app.state';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  homeContent = [];
  user: User;
  contentSub: Subscription;
  sub: Subscription;
  appState$ = this._store.pipe(select(selectApp));
  state: IAppState;
  constructor(private svc: AppService, private _store: Store<IState>) {}

  ngOnInit() {
    console.log('123');
    this.contentSub = this.svc
      .getHomeContent()
      .subscribe(res => {
        console.log(123451232);
        this.homeContent = res.payload.items;
      });
    this.appState$.subscribe(value => {
      console.log(12345);
      this.user = value.user;
    });
  }
}

選擇器代碼：

import { createSelector } from '@ngrx/store';
import { IState } from '../reducers';
import { IAppState } from '../state/app.state';

const appState = (state: IState) => state.app;

export const selectApp = createSelector(
  appState,
  (state: IAppState) => state.app
);

環境：

Angular CLI: 8.3.20
Node: 10.18.0
OS: win32 x64
Angular: 8.2.14

Answer 1

當我發現我有循環依賴時，我終於解決了這個問題。

我運行了ng build --aot ，它在我的app.module.ts文件中發出了關於循環依賴的警告。

在文件的底部，我注意到我有：

platformBrowserDynamic().bootstrapModule(AppModule); . 本質上是指自身。 我做了一些快速的谷歌搜索，發現該行屬於main.ts 。

移動了線路，問題就消失了。