typescript - adding user to firestore with Angular js - Stack Overflow

admin管理员组

文章数量:1278981

I am trying to create new user when i signup but i get this error

Error adding user to firestore RuntimeError: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with runInInjectionContext. Find more at /errors/NG0203\ at signupponent.ts:28:15

when I look to firebase the email is registered but it doesn't create users collection here you can find my code: signup component.ts

import { Component } from '@angular/core';
import { AuthService } from '../services/auth';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { AngularFirestore } from '@angular/fire/compat/firestore';

@Component({
  selector: 'app-signup',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    AngularFireAuthModule,
    RouterModule,
  ],
  templateUrl: './signupponent.html',
  styleUrls: ['./signupponent.css']
})
export class SignupComponent {

  constructor(private sa: AuthService, private fs: AngularFirestore) {}

  signup(f: any) {
    let data = f.value;
    this.sa.signUp(data.email, data.password).then((user) => {
      this.fs.collection("users").doc(user.user?.uid).set({
        email: data.email,
        name: data.name,
        bio: data.bio,
        uid: user.user?.uid
      }).then(() => {
        console.log("User added to firestore");
      });
    }).catch((error) => {
      console.log("Error adding user to firestore", error);
    });
  }
} 

signup component.html

<div class="uk-section uk-section-muted uk-flex uk-flex-middle uk-animation-fade" uk-height-viewport>
    <div class="uk-width-1-1">
        <div class="uk-container">
            <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid>
                <div class="uk-width-1-1@m">
                    <div
                        class="uk-margin uk-width-large uk-margin-auto uk-card uk-card-default uk-card-body uk-box-shadow-large">
                        <h3 class="uk-card-title uk-text-center">Create an Account</h3>
                        <form (ngSubmit)="signup(f)" #f="ngForm">
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon" uk-icon="icon: user"></span>
                                    <input class="uk-input uk-form-large" type="text" id="name" ngModel #name="ngModel"
                                        name="name" placeholder="Name" required>
                                </div>
                                <!-- Error message for Name -->
                                <div *ngIf="name.invalid && name.touched" class="uk-text-danger">
                                    Name is required.
                                </div>
                                <div class="uk-form-icon uk-form-icon-flip" *ngIf="name.invalid && name.touched">
                                    <span uk-icon="icon: warning"></span>
                                </div>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon" uk-icon="icon: mail"></span>
                                    <input class="uk-input uk-form-large" type="email" id="email" ngModel
                                        #email="ngModel" name="email" placeholder="Email" required email>
                                </div>
                                <div *ngIf="email.errors?.['required'] && email.touched" class="uk-text-danger">
                                    Email is required.
                                </div>
                                <div *ngIf="email.errors?.['email'] && email.touched" class="uk-text-danger">
                                    Insert Valid Email.
                                </div>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon" uk-icon="icon: lock"></span>
                                    <input class="uk-input uk-form-large" type="password" id="password" ngModel
                                        #password="ngModel" name="password" placeholder="Password" required
                                        minlength="6" maxlength="8">
                                </div>
                                <div *ngIf="password.errors?.['required'] && password.touched" class="uk-text-danger">
                                    Password is required.
                                </div>
                                <div *ngIf="password.errors?.['minlength'] && password.touched" class="uk-text-danger">
                                    Password must be at least 6 characters long.
                                </div>
                                <div *ngIf="password.errors?.['maxlength'] && password.touched" class="uk-text-danger">
                                    Password cannot be more than 8 characters long.
                                </div>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <textarea class="uk-textarea uk-form-large" id="bio" ngModel #bio="ngModel"
                                        name="bio" placeholder="Bio" rows="3"></textarea>
                                </div>
                            </div>
                            <div class="uk-margin">
                                <button class="uk-button uk-button-primary uk-button-large uk-width-1-1" type="submit"
                                    [disabled]="f.invalid">Sign Up</button>
                            </div>
                            <div class="uk-text-small uk-text-center">
                                Already have an account? <a [routerLink]="['/signin']">Sign In</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

auth.ts

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Observable } from 'rxjs';
import firebase from 'firebase/compat/app';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  user: Observable<firebase.User | null>;

  constructor(private fa: AngularFireAuth) {
    this.user = this.fa.user;
  }

  signUp(email: string, password: string) {
    return this.fa.createUserWithEmailAndPassword(email, password);
  }

  signIn(email: string, password: string) {
    return this.fa.signInWithEmailAndPassword(email, password);
  }
}

i have been trying and changed a lot but it doesn't works. sorry my English not so good and i am new learning angular

I am trying to create new user when i signup but i get this error

Error adding user to firestore RuntimeError: NG0203: inject() must be called from an injection context such as a constructor, a factory function, a field initializer, or a function used with runInInjectionContext. Find more at https://angular.dev/errors/NG0203\ at signupponent.ts:28:15

when I look to firebase the email is registered but it doesn't create users collection here you can find my code: signup component.ts

import { Component } from '@angular/core';
import { AuthService } from '../services/auth';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { AngularFirestore } from '@angular/fire/compat/firestore';

@Component({
  selector: 'app-signup',
  standalone: true,
  imports: [
    CommonModule,
    FormsModule,
    AngularFireAuthModule,
    RouterModule,
  ],
  templateUrl: './signupponent.html',
  styleUrls: ['./signupponent.css']
})
export class SignupComponent {

  constructor(private sa: AuthService, private fs: AngularFirestore) {}

  signup(f: any) {
    let data = f.value;
    this.sa.signUp(data.email, data.password).then((user) => {
      this.fs.collection("users").doc(user.user?.uid).set({
        email: data.email,
        name: data.name,
        bio: data.bio,
        uid: user.user?.uid
      }).then(() => {
        console.log("User added to firestore");
      });
    }).catch((error) => {
      console.log("Error adding user to firestore", error);
    });
  }
} 

signup component.html

<div class="uk-section uk-section-muted uk-flex uk-flex-middle uk-animation-fade" uk-height-viewport>
    <div class="uk-width-1-1">
        <div class="uk-container">
            <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid>
                <div class="uk-width-1-1@m">
                    <div
                        class="uk-margin uk-width-large uk-margin-auto uk-card uk-card-default uk-card-body uk-box-shadow-large">
                        <h3 class="uk-card-title uk-text-center">Create an Account</h3>
                        <form (ngSubmit)="signup(f)" #f="ngForm">
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon" uk-icon="icon: user"></span>
                                    <input class="uk-input uk-form-large" type="text" id="name" ngModel #name="ngModel"
                                        name="name" placeholder="Name" required>
                                </div>
                                <!-- Error message for Name -->
                                <div *ngIf="name.invalid && name.touched" class="uk-text-danger">
                                    Name is required.
                                </div>
                                <div class="uk-form-icon uk-form-icon-flip" *ngIf="name.invalid && name.touched">
                                    <span uk-icon="icon: warning"></span>
                                </div>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon" uk-icon="icon: mail"></span>
                                    <input class="uk-input uk-form-large" type="email" id="email" ngModel
                                        #email="ngModel" name="email" placeholder="Email" required email>
                                </div>
                                <div *ngIf="email.errors?.['required'] && email.touched" class="uk-text-danger">
                                    Email is required.
                                </div>
                                <div *ngIf="email.errors?.['email'] && email.touched" class="uk-text-danger">
                                    Insert Valid Email.
                                </div>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon" uk-icon="icon: lock"></span>
                                    <input class="uk-input uk-form-large" type="password" id="password" ngModel
                                        #password="ngModel" name="password" placeholder="Password" required
                                        minlength="6" maxlength="8">
                                </div>
                                <div *ngIf="password.errors?.['required'] && password.touched" class="uk-text-danger">
                                    Password is required.
                                </div>
                                <div *ngIf="password.errors?.['minlength'] && password.touched" class="uk-text-danger">
                                    Password must be at least 6 characters long.
                                </div>
                                <div *ngIf="password.errors?.['maxlength'] && password.touched" class="uk-text-danger">
                                    Password cannot be more than 8 characters long.
                                </div>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <textarea class="uk-textarea uk-form-large" id="bio" ngModel #bio="ngModel"
                                        name="bio" placeholder="Bio" rows="3"></textarea>
                                </div>
                            </div>
                            <div class="uk-margin">
                                <button class="uk-button uk-button-primary uk-button-large uk-width-1-1" type="submit"
                                    [disabled]="f.invalid">Sign Up</button>
                            </div>
                            <div class="uk-text-small uk-text-center">
                                Already have an account? <a [routerLink]="['/signin']">Sign In</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

auth.ts

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Observable } from 'rxjs';
import firebase from 'firebase/compat/app';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  user: Observable<firebase.User | null>;

  constructor(private fa: AngularFireAuth) {
    this.user = this.fa.user;
  }

  signUp(email: string, password: string) {
    return this.fa.createUserWithEmailAndPassword(email, password);
  }

  signIn(email: string, password: string) {
    return this.fa.signInWithEmailAndPassword(email, password);
  }
}

i have been trying and changed a lot but it doesn't works. sorry my English not so good and i am new learning angular

• angular
• typescript
• firebase
• dependency-injection
• angularfire

Share Improve this question Follow edited Feb 24 at 15:37 Frank van Puffelen 600k8585 gold badges889889 silver badges859859 bronze badges Recognized by Google Cloud Collective asked Feb 24 at 12:11 isabilleisabille 3355 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Checkout this example from Angular/fire github page

Readme.md

import { Firestore, collectionData, collection } from '@angular/fire/firestore';
...

...
export class AppComponent {
  firestore = inject(Firestore);
  itemCollection = collection(this.firestore, 'items');
  item$ = collectionData<Item>(itemCollection);
}

You also might need to provide firebase like below, also not the same steps need to be done for authentication:

auth.md

import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { provideAuth, getAuth } from '@angular/fire/auth';

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseApp(() => initializeApp({ ... })),
    provideFirestore(() => getFirestore()),
    provideAuth(() => getAuth()),
    ...
  ],
  ...
})

So you code can be modified to:

...
export class SignupComponent {
  firestore = inject(Firestore);
  constructor(private sa: AuthService) {}

  signup(f: any) {
    let data = f.value;
    this.sa.signUp(data.email, data.password).then((user) => {
      collection(this.firestore, "users").doc(user.user?.uid).set({
        email: data.email,
        name: data.name,
        bio: data.bio,
        uid: user.user?.uid
      }).then(() => {
        console.log("User added to firestore");
      });
    }).catch((error) => {
      console.log("Error adding user to firestore", error);
    });
  }
} 

You have to update your auth function to use the below logic:

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Observable } from 'rxjs';
import firebase from 'firebase/compat/app';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  user$: Observable<firebase.User | null> = user(auth);
  fa = inject(Auth);

  signUp(email: string, password: string) {
    return this.fa.createUserWithEmailAndPassword(email, password);
  }

  signIn(email: string, password: string) {
    return this.fa.signInWithEmailAndPassword(email, password);
  }
}

本文标签： typescriptadding user to firestore with Angular jsStack Overflow