错误：必须从注入上下文调用注入（）但找不到来源

Question

我正在使用 angularfire 的身份验证服务向我的应用程序注册和登录用户，但是当我触发注册或登录方法时，我收到以下错误：错误：必须从注入上下文中调用注入（）

我尝试将 angular.json 文件中的 preserveSymlinks 设置为 true，但仍然无济于事。

我的注册和登录方法怎么会调用inject()，为什么不起作用？

请在下面找到我的相关文件：

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "defaultProject": "app",
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "preserveSymlinks": true,
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            "styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              }
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "ci": {
              "progress": false
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "ci": {
              "progress": false
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "styles": [],
            "scripts": [],
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ]
          },
          "configurations": {
            "ci": {
              "progress": false,
              "watch": false
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "app:serve:production"
            },
            "ci": {
              "devServerTarget": "app:serve:ci"
            }
          }
        },
        "ionic-cordova-build": {
          "builder": "@ionic/angular-toolkit:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/angular-toolkit:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            }
          }
        }
      }
    }
  },
  "cli": {
    "defaultCollection": "@ionic/angular-toolkit"
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    }
  }
}

login.page.ts

import { Component, OnInit } from '@angular/core';
import {AngularFireAuth} from '@angular/fire/auth'
import {auth} from 'firebase/app'
import { Router } from '@angular/router';
import { AngularFirestoreDocument } from '@angular/fire/firestore/public_api';
import { AuthService } from '../services/auth.service';
import { UserService } from '../services/user.model';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
  userEmail: string = ""
  password: string = ""
  constructor(
    public afAuth: AngularFireAuth,
    private router: Router,
    public user: UserService) { }

  ngOnInit() {
  }
  async login() {
    //gives access to user email and password
    const {userEmail, password} = this
    try {
      const result = await this.afAuth.signInWithEmailAndPassword(userEmail, password)
      // if (result.user) {
      //   this.user.setUser({
      //     email: userEmail,
      //     uid: result.user.uid
      //   })
        this.router.navigate(['/tabs'])
      
      
    } catch (error) {
        console.dir(error)
        if (error.code === "auth/user-not-found") {
          console.log("User not found!")
        }
    }
  }

}

register.page.ts

import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app'
import { Router } from '@angular/router';
import { AngularFirestore } from '@angular/fire/firestore'
import { UserService } from '../services/user.model';
@Component({
  selector: 'app-register',
  templateUrl: './register.page.html',
  styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {
  userEmail: string = ""
  password: string = ""
  cpassword: string = ""
  
  firstName: string = ""
  lastName: string = ""
  constructor(
    public afAuth: AngularFireAuth,
    public router: Router,
    public user: UserService,
    private afs: AngularFirestore
    ) { }

  ngOnInit() {
  }

  async register() {
    const { 
      userEmail, 
      password, 
      cpassword, 
      firstName, 
      lastName} = this
    if(password !== cpassword) {
      return console.log("Please reconcile passwords")
    }
    try {
      const result =  await this.afAuth.createUserWithEmailAndPassword(userEmail, password)
      
      // sets user information in firestore
      this.afs.doc('users/${result.user.uid}').set({
        userEmail,
        firstName,
        lastName
      })

      this.user.setUser({
        email: userEmail,
        uid: result.user.uid
      })
      console.log(result)
      this.router.navigate(['/tabs'])
      
      
    } catch(error) {
        console.dir(error)
    }
    
  }
}

user.model.ts

interface User {
    uid ?: string
    firstName ?: string
    lastName ?: string
    email ?: string
    displayName ?: string
}

export class UserService {
    private user: User
    constructor() {

    }
    setUser(user: User) {
        console.log(user.displayName)
        this.user = user
    }
    getUser() {
        return this.user.uid
    }
}

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
    "paths": { 
      "@angular/": 
      [ "../node_modules/@angular/" ] 
    }
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts"
  ],
  "exclude": [
    "src/**/*.spec.ts"
  ],
  
}

Answer 1

将下面的行放在 Angular 应用程序的 tsconfig.app.json 的 compilerOptions 部分中。

"paths": { "@angular/*": [ "../node_modules/@angular/*" ] }