先暂时尝试运行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('ログインできません。');
});
}