最近アップグレードされたAngularアプリ(Angular v7 => v8)があり、すべてが正常に機能していました。
しかし今、8に切り替えた後、ログイン機能(下記)でエラーが発生します。エラーはおそらく簡単に解決できますが、スタックトレースはほとんど意味がありません。ベンダーコードを除いて、タイプエラーが実際に発生する場所は表示されません。
から返されたpromiseの解決this.router.navigate
、サブスクライブのpromiseへの変換、authガードにconsole.logを追加してそこで停止するかどうかを確認するなど、暗闇の中でいくつかの問題を解決しようとしました(停止しません)。最後に、画面(ログイン後の画面)にログコードを追加しましたが、何もログに記録されませんでした。
誰かがこれに遭遇しましたか?アップグレードノートを確認しましたが、何も目立ちませんでした。誰かがこれがどこで起こっているのかを理解するためのヒントを持っているなら、私はそこからそれを取ることができます。
ログインコード:
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)
編集-ログインサービスコードが追加されました。
ログインサービスコード-注、これを削除しようとしましたが、同じエラーが発生しました
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
循環依存があることがわかったとき、私はついにこれを解決しました。
ファイルのng build --aot
循環依存に関する警告をスローする実行をapp.module.ts
実行しました。
ファイルの下部で、次のことに気づきました。
platformBrowserDynamic().bootstrapModule(AppModule);
。本質的にはそれ自体を参照します。簡単なグーグルを行ったところ、その行がに属していることがわかりましたmain.ts
。
ラインを移動し、問題は解決しました。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加