Is it possible to swap out the Firestore module `doc` with the `document` module

I enjoy using the Firebase version 9 modules, however, I find that doc is not to my liking. It would be better if it were document, similar to how collection is not shortened to col.

The following code does not function as expected:

import { doc, collection, deleteDoc } from '@angular/fire/firestore';

this.querySnapshot.forEach((doc) => {
  deleteDoc(doc(this.firestore, 'users', doc.id));
});

To make it work properly, I have to modify it like this:

import { doc, collection, deleteDoc } from '@angular/fire/firestore';

this.querySnapshot.forEach((docElement) => {
  deleteDoc(doc(this.firestore, 'users', docElement.id));
});

Alternatively, I prefer changing it to:

import { document, collection, deleteDocument } from '@angular/fire/firestore';

this.querySnapshot.forEach((doc) => {
  deleteDocument(document(this.firestore, 'users', doc.id));
});

I have two inquiries. Firstly, how can I address this issue with the Firebase team? And secondly, is it possible to create an alias for the doc module? I attempted to do so without success.

import { doc, collection, deleteDoc } from '@angular/fire/firestore';

export class AppComponent {

  document: Function = doc;

  this.querySnapshot.forEach((doc) => {
    deleteDoc(document(this.firestore, 'users', doc.id));
  });
}

Unfortunately, that attempt was unsuccessful. :-)

Answer №1

When bringing in a module, you have the option to assign it an alias:

import { document as fireDocument } from '@angular/fire/firestore';

this.querySnapshot.forEach((doc) => {
  // utilize fireDocument() in this section 
  deleteDocument(fireDocument(this.firestore, 'users', doc.id));
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with destructuring in function parameter in TSLint code analysis

I'm trying to resolve the tslint error that occurs in the object destructuring parameter of this code snippet: export function renameProperty( oldProp: string, newProp: string, {[oldProp]: old, ...others} ): any { return { [ne ...

The absence of the function crypto.createPrivateKey is causing issues in a next.js application

For my next.js application, I am utilizing the createPrivateKey function from the crypto module in node.js. However, I encountered an issue as discussed in this thread: TypeError: crypto.createPrivateKey is not a function. It seems that this function was a ...

The specified dependency, * core-js/fn/symbol, could not be located

I am in the process of developing a Vue.js application with Vuex and have encountered some errors during the build. I attempted to resolve the issue by installing npm install --save core-js/fn/symbol, but unfortunately, it did not work as expected. https:/ ...

What steps can I take to resolve a dependency update causing issues in my code?

My program stopped working after updating one of the dependencies and kept throwing the same error. Usually, when I run 'ng serve' in my project everything works fine, but after updating Chartist, I encountered this error: An unhandled exception ...

Exporting Arrays in Ionic Angular with Typescript is an essential feature

When trying to access an exported component in Typescript, there may be issues with importing the module correctly into another component. An error message is displayed when calling the AddToArray method: Cannot read property 'push' of undefi ...

The correct procedure for refreshing a page in Angular 8

Note: I found some code snippets online but, after testing them out, I have doubts about their reliability due to inconsistencies. In my script, I have developed two utility functions - one for moving to the parent node and another for reloading the curre ...

Is it possible to create an observable with RXJS that emits only when the number of items currently emitted by the source observables matches?

I am dealing with two observables, obs1 and obs2, that continuously emit items without completing. I anticipate that both of them will emit the same number of items over time, but I cannot predict which one will emit first. I am in need of an observable th ...

Exploring TypeScript: Understanding how to define Object types with variable properties names

Having an issue with a React + TypeScript challenge that isn't causing my app to crash, but I still want to resolve this lingering doubt! It's more of a query than a problem! My goal is to set the property names of an object dynamically using va ...

The command '. .' is not valid for running npm install with firebaseUI

I am facing an issue while trying to install npm packages on my firebaseUI demo application. After cloning the master branch from Github, I attempted to run "npm install" but encountered an error that is new to me with Node Package Manager. The error messa ...

Can you explain the significance of using curly braces in an import statement?

The TypeScript handbook has a section on Shorthand Ambient Modules, where an import statement is shown as: import x, {y} from "hot-new-module"; It doesn't explain why y is in curly braces in the above statement. If both x and y were inside the brace ...

Angular 8 is throwing an error stating that the property 'token' is not recognized on the 'Object' data type

As a newcomer to Angular, I have been following the MEAN Stack - Mean Auth App Tutorial in Angular 2. However, since I am using Angular 8, some of the code is deprecated due to recent updates. I have encountered an issue with the code bel ...

Leveraging the power of React's callback ref in conjunction with a

I'm currently working on updating our Checkbox react component to support the indeterminate state while also making sure it properly forwards refs. The existing checkbox component already uses a callback ref internally to handle the indeterminate prop ...

Guide to accessing and showcasing an embedded Firestore entity using Angular?

I'm looking to showcase a Firestore model with profile names and hashtags using Angular 6. As I delve into Firestore, I've discovered that the proper way to model it is like this: enter image description here members { id: xyz ...

React: Avoid unnecessary re-rendering of child components caused by a bloated tree structure

I am dealing with a tree/directory structured data containing approximately 14k nodes. The issue I am facing is that every time a node is expanded or minimized by clicking a button, causing it to be added to an 'expanded' Set in the Redux state, ...

Edge Runtime does not permit the use of Dynamic Code Evaluation functions such as 'eval', 'new Function', and 'WebAssembly.compile'

My project involves the implementation of NextUI components. I incorporated the Select component from NextUI, and during development mode, everything functioned flawlessly. However, upon completion of development and attempting to build the project, I enc ...

Tips for fixing the error "Module cannot be found" when testing Typescript in a Github Action

Whenever I use the Github Actions Typescript template to create a new repo and then check it out locally, I face a recurring issue: While I can work on the source code in VS Code without any problems and follow the steps mentioned in the template's re ...

What is the best way to incorporate a TypeScript function within a JQuery function?

I'm facing an issue with installing the Angular Instascan library, so I am using it without installing and only importing the script. In order to make it work, I have to use JQuery in my TypeScript file within the component. Is there a way to call a T ...

Higher order components enhance generic components

I'm facing an issue where I want to assign a generic type to my React component props, but the type information gets lost when I wrap it in a higher order component (material-ui). How can I ensure that the required information is passed along? type P ...

Angular 15 is unfortunately not compatible with my current data consumption capabilities

I'm currently facing an issue with Angular 15 where I am trying to access the "content" element within a JSON data. However, when attempting to retrieve the variable content, I am unable to view the elements it contains. import { Component, OnInit } ...

Convert data into a tree view in JavaScript, with two levels of nesting and the lowest level represented as an array

Here is an example of a JSON object: [ { "venueId": "10001", "items": [ { "venueId": "10001", "locationId": "14", "itemCode": "1604", "itemDescription": "Chef Instruction", "categoryCode": "28", ...