How to create a new document and add data to it in angular?

[Sapython]

I tried this

import { Injectable } from '@angular/core';
import { doc, enableIndexedDbPersistence, getFirestore, provideFirestore } from '@angular/fire/firestore';
import { setDoc } from '@firebase/firestore';

@Injectable({
  providedIn: 'root'
})
export class UserDataService {
  firestore:any;
  constructor() { 
    this.firestore = provideFirestore(() => {
      this.firestore = getFirestore();
      enableIndexedDbPersistence(this.firestore);
      return this.firestore;
    });
  }
  addNewUser(): void {
    console.log('addNewUser',this.firestore);
    const userDoc = doc(this.firestore, 'users/user1');
    console.log(userDoc);
    setDoc(userDoc, {'Alpha':'beta'}).then(() => {
      console.log('Document successfully written!');
    }).catch(() => {
      console.log('Error writing document');
    });
  }
}

but it doesn't work I know angular/fire 7 is new and docs are not ready but I really want to know how it works. I know I am doing something wrong here.
Please provide an easy solution to this.

[hakimio]

1. You have to provide Firestore in app module and then inject it in your service.
2. provideFirestore() returns ModuleWithProviders<FirestoreModule> not Firestore instance. You are misusing it.

[Sapython]

Can you show an example of how to do it?

[hakimio]

I linked to the example in my answer.