【エラー解決】error TS2339: Property 'map' does not exist on type 'Observable<User>'【canActivate/Rxjs/Udemy】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
背景
UdemyのAngular講座で勉強中です。
ページ遷移の時のGuard機能を追加しようとしたところでエラーが発生しました。
原因はすぐに分かってRxjs6の仕様変更によるものでした。
今回はこのエラーを解決していきます。
解決方法
エラー内容
コード
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
return this.afAuth.authState.map(user => {
if (!user) {
return true;
} else {
this.router.navigate(['/']);
return false;
}
});
}
エラー構文
error TS2339: Property 'map' does not exist on type 'Observable<User>'.
(直訳)
エラーTS2339：プロパティ'map'はタイプ 'Observable<User>'に存在しません。
参考サイト
エラー文にRxjsを付け加えて検索すると色々と出てきました。
FN1806004 | RxJS 6入門 06: Observableをつくる関数とオペレータ | HTML5 : テクニカルノート
解決コード
import { map } from 'rxjs/operators';
・・・・・・
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
return this.afAuth.authState.pipe(map(user => {
if (!user) {
return true;
} else {
this.router.navigate(['/']);
return false;
}
}));
}
解説
Rxjs6になってから一部のオペレータの仕様が変わりました。
mapなどのオペレータはインポートする場所が変わり、さらに呼び出し方も変わりました。mapなどのオペレータは今まではobservableのメソッドとして使用できていましたが、Rxjs6以降はpipeの引数に渡すことになっています。
参考
素晴らしい記事に感謝いたします。
'Observable<User>' - Stack Overflow
FN1806004 | RxJS 6入門 06: Observableをつくる関数とオペレータ | HTML5 : テクニカルノート
