属性“auth"在类型“typeof import(“/home/kartik/Desktop/Ecommerce/ecommerce/node_modules/firebase/index")"上不存在.ts(2339) [英] Property 'auth' does not exist on type 'typeof import("/home/kartik/Desktop/Ecommerce/ecommerce/node_modules/firebase/index")'. ts(2339)

问题描述

我是 FireBase 的初学者，我正在尝试使用 angular 通过 FireBase 实现 Google 登录.我在身份验证时收到上述错误.我在此附上package.json、package.lock.json的login.component.ts和dev依赖.

login.component.ts

import { Component, OnInit } from '@angular/core';从'firebase'导入*作为firebase；导入'firebase/auth'；从angularfire2/auth"导入 {AngularFireAuth}@成分({选择器:'应用程序登录'，templateUrl: './login.component.html',styleUrls: ['./login.component.css']})导出类 LoginComponent 实现 OnInit {构造函数(私有 afAuth:AngularFireAuth){firebase.default.database}ngOnInit(): 无效 {}登录(){this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider())//由于这一行导致的错误.}}

package.json

依赖关系":{@angular/animations":~11.1.0"，@angular/cdk":^11.2.12"，@angular/common":~11.1.0"，@angular/compiler":~11.1.0"，@angular/core":~11.1.0"，@angular/fire":^6.0.4-canary.9a26fbe"，@angular/forms":~11.1.0"，@angular/localize":~11.1.0"，@angular/material":^11.2.12"，@angular/platform-b​​rowser":~11.1.0"，@angular/platform-b​​rowser-dynamic":~11.1.0"，@angular/router":~11.1.0"，@ng-bootstrap/ng-bootstrap":^9.1.1"，angularfire2":^5.4.2"，引导程序":^5.0.1"，firebase":^8.6.2"，firebase-tools":^9.10.2"，g":^2.0.1"，rxjs":~6.6.0"，tslib":^2.0.0"，zone.js":~0.11.3"；},

package-lock.json

<预><代码>...@angular/fire":{版本":6.0.4-canary.9a26fbe"，已解决":https://registry.npmjs.org/@angular/fire/-/fire-6.0.4-canary.9a26fbe.tgz"，完整性":sha512-LVskM344FFLQ34Dyc6ngN6n+c8kZODm3T3Sdzu43P4wmpaoocL06/3HMvXlQiwBdE3bH+F+tdGu2VYxgQZCWCA=="，需要":{tslib":^2.0.0"}},...angularfire2":{版本":5.4.2"，已解决":https://registry.npmjs.org/angularfire2/-/angularfire2-5.4.2.tgz"，完整性":sha512-7brktOHPObHgMnCN+QkakyCBr2mnxMxMSVLlEZ7OF70LjFIQz/RV3t5a7cH1SjystbY+kzR3qYvn/irlWs27/Q=="，需要":{@angular/fire":5.4.2"},依赖关系":{@angular/fire":{版本":5.4.2"，已解决":https://registry.npmjs.org/@angular/fire/-/fire-5.4.2.tgz"，完整性":sha512-QzB5d1wtqr9jxfsVNv2+569MlfK4/QrrpNy0IngOHdxS4FBbXqMOcx37iv1m2mzJv9zlGUddUX44IZP5Xfb3cw=="}}},

解决方案

您的依赖项是旧的.我建议您更新它们并使用新语法:

import { AngularFireAuth } from '@angular/fire/auth';从@angular/fire/firestore"导入 { AngularFirestore }；从'@angular/fire/database' 导入 { AngularFireDatabaseModule };从firebase/app"导入 * 作为 firebase；

使用 firebase@7.24.0

有关于 firebase 身份验证的完整教程，我觉得它非常有用；这是链接

旧的进口是

import { AngularFireAuthModule } from 'angularfire2/auth';

I am a beginner at FireBase and I am trying to implement Google login with FireBase using angular. I am getting the above error at auth. I am hereby attaching login.component.ts and dev depencencies of package.json, package.lock.json.

login.component.ts

import { Component, OnInit } from '@angular/core';
import * as firebase from 'firebase';
import 'firebase/auth';
import {AngularFireAuth} from 'angularfire2/auth'

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private afAuth:AngularFireAuth) {
    firebase.default.database
   }

  ngOnInit(): void {
  }
  Login(){
    this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider()) //error due to this line.
  }

}

package.json

"dependencies": {
    "@angular/animations": "~11.1.0",
    "@angular/cdk": "^11.2.12",
    "@angular/common": "~11.1.0",
    "@angular/compiler": "~11.1.0",
    "@angular/core": "~11.1.0",
    "@angular/fire": "^6.0.4-canary.9a26fbe",
    "@angular/forms": "~11.1.0",
    "@angular/localize": "~11.1.0",
    "@angular/material": "^11.2.12",
    "@angular/platform-browser": "~11.1.0",
    "@angular/platform-browser-dynamic": "~11.1.0",
    "@angular/router": "~11.1.0",
    "@ng-bootstrap/ng-bootstrap": "^9.1.1",
    "angularfire2": "^5.4.2",
    "bootstrap": "^5.0.1",
    "firebase": "^8.6.2",
    "firebase-tools": "^9.10.2",
    "g": "^2.0.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },

package-lock.json

...

"@angular/fire": {
      "version": "6.0.4-canary.9a26fbe",
      "resolved": "https://registry.npmjs.org/@angular/fire/-/fire-6.0.4-canary.9a26fbe.tgz",
      "integrity": "sha512-LVskM344FFLQ34Dyc6ngN6n+c8kZODm3T3Sdzu43P4wmpaoocL06/3HMvXlQiwBdE3bH+F+tdGu2VYxgQZCWCA==",
      "requires": {
        "tslib": "^2.0.0"
      }
    },

...

"angularfire2": {
      "version": "5.4.2",
      "resolved": "https://registry.npmjs.org/angularfire2/-/angularfire2-5.4.2.tgz",
      "integrity": "sha512-7brktOHPObHgMnCN+QkakyCBr2mnxMxMSVLlEZ7OF70LjFIQz/RV3t5a7cH1SjystbY+kzR3qYvn/irlWs27/Q==",
      "requires": {
        "@angular/fire": "5.4.2"
      },
      "dependencies": {
        "@angular/fire": {
          "version": "5.4.2",
          "resolved": "https://registry.npmjs.org/@angular/fire/-/fire-5.4.2.tgz",
          "integrity": "sha512-QzB5d1wtqr9jxfsVNv2+569MlfK4/QrrpNy0IngOHdxS4FBbXqMOcx37iv1m2mzJv9zlGUddUX44IZP5Xfb3cw=="
        }
      }
    },

解决方案

Your dependencies are the old ones. I suggest you to update them and use the new syntax:

import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/database';

import * as firebase from 'firebase/app';

with firebase@7.24.0

There complete tutorial about firebase authentication which I find really useful; here's the link

The old imports are

import { AngularFireAuthModule } from 'angularfire2/auth';

这篇关于属性“auth"在类型“typeof import(“/home/kartik/Desktop/Ecommerce/ecommerce/node_modules/firebase/index")"上不存在.ts(2339)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！