I'm using angularfire's authentication service to register and login users to my application but when I trigger the register or signin method, I get the following error: Error: inject() must be called from an injection context
I've tried setting preserveSymlinks in my angular.json file to be true, but still no avail.
How is it that my register and signin methods are calling inject(), and why is it not working?
Please find my relevant files below:
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"
],
}
