[@angular/fire] Firebaseを9系にアップデートする
Firebase9系がリリースされ、tree-shakingに対応しました。
参考：
それに伴って、tree-shakingできるように記法の破壊的変更がありました。網羅してご紹介するのは難しいですが、 Firebase Authenticationの利用範囲でどのようにアップデートすればいいかをご紹介します。
何も考えないアップデート
ng update @angular/fire firebase
一応はこれでアップデートできます。ただ、どのように変わったかを確認すれば、import文の呼び出し元が @angular/fire/** から @angular/fire/compat に変わってることが確認できるかと思います。 「compat」は「互換性」という意味ですが、後方互換のための呼び出し元を用意してるだけなので、これだと パッケージのバージョンはあがりますが、tree-shakingに対応できません。 ついでにいうと、compatがいつまでも用意されるわけではないので、延命処理だと思ってください。
ちゃんとアップデートする
tree-shakingに対応するためには記法を変更する必要があります。
Moduleへのインストール
+ import { getApp, provideFirebaseApp, initializeApp } from '@angular/fire/app';
+ import {
+ getAuth,
+ provideAuth,
+ } from '@angular/fire/auth';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
- AngularFireAuthModule,
+ provideFirebaseApp(() => initializeApp(environment.firebase)),
+ provideAuth(() => getAuth()),
...
],
まず、「AngularFireAuthModule」という大きなModuleは廃止になって、Firebaseのアカウントをインストールするための provideFirebaseApp と、Authまわりの provideAuth を分けて書くようになりました。
ただ、このままだと、Capacitor iOSでAuthまわりの不具合が起こります：
なので、そのCapacitorでネイティブで利用する場合はその分岐を用意します。Capacitorの isNativePlatform() でプラットフォームを判定できるので、以下のようにします。
import { getApp, provideFirebaseApp, initializeApp } from '@angular/fire/app';
import {
getAuth,
indexedDBLocalPersistence,
initializeAuth,
provideAuth,
} from '@angular/fire/auth';
...
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => {
if (Capacitor.isNativePlatform()) {
return initializeAuth(getApp(), {
persistence: indexedDBLocalPersistence,
});
} else {
return getAuth();
}
}),
ネイティブプラットフォームの場合は、 indexedDBLocalPersistence を persistence にセットしてインストールします。
ログインまわりのコードの書き方
まず、 AngularFireAuth をDIしていたものが、 @angular/fire/auth からの Auth をDIするようにします。
- import { AngularFireAuth } from '@angular/fire/compat/auth';
+ import { Auth } from '@angular/fire/auth';
constructor(
- private afAuth: AngularFireAuth,
+ private afAuth: Auth,
重要な点はそこだけで、あとは AngularFireAuth 以下に生えていたメソッドを直接呼び出して、第一引数に Auth をセットして使うのが原則になります。
例えば、 authState だと以下のようになります。
+ import { authState } from '@angular/fire/auth';
...
- this.afAuth.authState.pipe(...
+ authState(this.afAuth).pipe(...
this.afAuth に生えてたメソッド authState から、 authState を直接呼び出すようにします。そして、第一引数に this.afAuth を入れる形ですね。1割もないぐらい例外となるメソッドはなくはないですが、9割以上はほぼこのように修正できます。
以下、いくつかの修正例をご紹介します：
- return this.afAuth.authState;
+ return authState(this.afAuth);
- await this.afAuth.createUserWithEmailAndPassword(email, password)
+ await createUserWithEmailAndPassword(this.afAuth, email, password).catch(
- await this.afAuth.signInWithEmailAndPassword(email, password)
- .catch(async (error) => {
+ await signInWithEmailAndPassword(this.afAuth, email, password).catch(
- await this.afAuth.sendPasswordResetEmail(email).catch(async (error) => {
+ await sendPasswordResetEmail(this.afAuth, email).catch(async (error) => {
- await this.afAuth.sendPasswordResetEmail(email);
+ await sendPasswordResetEmail(this.afAuth, email);
- await user.sendEmailVerification().catch(async (error) => {
+ await sendEmailVerification(user).catch(async (error) => {
簡単ですよね。それではまた。
Author And Source
この問題について([@angular/fire] Firebaseを9系にアップデートする), 我々は、より多くの情報をここで見つけました https://zenn.dev/rdlabo/articles/f91d7a65d2772c著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol