先暂时尝试运行Angular和Firebase

首先

2021年9月15日時点では,`ng new`コマンドや`ng add @angular/fire@next`コマンドを実行する際にエラーが発生しました。
いくつかの調整を行いましたが,何とか導入できたので,一応メモしておきます。
考えてみると,おそらくNodeのバージョンが16だったことが原因だったのかなと思います。
強引にライブラリを追加するよりも,Angularのバージョンを下げる方が良さそうです。

环境

使用sudo npm ls -g之类的命令可以一次性查看全局的node_modules文件夹。

    • 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-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",
  }

添加 @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 的时候需要在之后添加 /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('ログインできません。');
    });
  }

广告
将在 10 秒后关闭
bannerAds