AngularとFirebaseをとりあえず動かす

はじめに

2021/9/15時点で ng new コマンドや ng add @angular/fire@next でエラーが起きた。
色々いじってなんとか入れたので、一応メモ。
nodeのバージョンが16なのがいけなかったんじゃないかと今になっては思います。
無理してライブラリ突っ込んだりするよりも、Angularのバージョン下げた方が良さそう。

環境

グローバルのnode_modulesはsudo npm ls -gとか使うと一気にみれる。

• M1チップ
  • インストールできるnodeのバージョンが少ねぇ
• nodebrew 1.0.0
• node 16.0.0
  • Angularは15と16はサポートしてないっぽい(2021/9/15時点)
• npm 7.19.1
• Angular CLI 12.1.4
• Angular 12.1.5
• firebase-tools@9.17.0

以下エラーでたところ

ng new ng-myapp

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: ng-myapp@0.0.0
npm ERR! Found: jasmine-core@3.7.1
npm ERR! node_modules/jasmine-core
npm ERR!   dev jasmine-core@"~3.7.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer jasmine-core@">=3.8" from karma-jasmine-html-reporter@1.7.0
npm ERR! node_modules/karma-jasmine-html-reporter
npm ERR!   dev karma-jasmine-html-reporter@"^1.5.0" from the root project

package.jsonのjasmine-coreを以下のように修正してnpm iを実行

  "devDependencies": {
    "jasmine-core": "3.8.0",
  }

ng add @angular/fire@next

npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: ng-myapp@0.0.0
npm ERR! Found: firebase@9.0.1
npm ERR! node_modules/firebase
npm ERR!   firebase@"^9.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer firebase@"9.0.0-202171919375" from @angular/fire@7.0.0-rc.0
npm ERR! node_modules/@angular/fire
npm ERR!   @angular/fire@"7.0.0-rc.0" from the root project

npm i firebase@"9.0.0-202171919375" --saveを行ってからng add @angular/fireを実行し、プロダクトを選択。

The package @angular/fire@7.0.3 will be installed and executed.
Would you like to proceed? Yes
? Please select a project: ng-myapp (ng-myapp-7e42a)

@angular/fire の後ろに /compat を追加する

パスが変わったみたいなので、 @angular/fire　とつくimportにはその後に /compat　を追加します。

import { AngularFireModule } from '@angular/fire/'; // ダメなパターン
import { AngularFireModule } from '@angular/fire/compat'; // "compat"つける

AngularFireAuth

こちらの通り、auth いらなくなる

  login() {
    //this.afAuth.auth.signInWithEmailAndPassword(this.email, this.password).then(res => {
    this.afAuth.signInWithEmailAndPassword(this.email, this.password).then(res => {
      alert('ログイン成功しました。');
    }).catch(res => {
      alert('ログインできません。');
    });
  }