Using Angular 2 with the firebase-admin sdk

Whenever I attempt to integrate the firebase-admin SDK into my Angular2 project, an error occurs:

ERROR in ./~/firebase-admin/lib/auth/token-generator.js
Module not found: Error: Can't resolve 'jsonwebtoken' in '/home/koucky/git_projects/zlepsito-web/node_modules/firebase-admin/lib/auth'
 @ ./~/firebase-admin/lib/auth/token-generator.js 7:10-33
 @ ./~/firebase-admin/lib/auth/auth.js
 @ ./~/firebase-admin/lib/auth/register-auth.js
 @ ./~/firebase-admin/lib/index.js
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

I have installed firebase-admin using npm and attempted two ways of importing it in my app.module.ts: import 'firebase-admin' or

var admin = require("firebase-admin");
. Unfortunately, both methods lead to the same error.

I have followed the guidelines provided at: https://firebase.google.com/docs/admin/setup

Here is a snippet from my app.module.ts:

var admin = require("firebase-admin");

var serviceAccount = require('./serviceAccountKey.json');

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "https://myapp-99f41.firebaseio.com"
}); 

If anyone knows how to resolve this issue or has a sample code snippet on integrating the firebase-admin SDK with an Angular2 project, please share. Thanks in advance!

Answer №1

Encountering a similar issue here. Managed to progress one step ahead, but the solution still eludes me.

Performed the following command:

npm install jsonwebtoken --save

This action resolved the jsonwebtoken error. However, I then encountered an issue with 'dns', which was remedied by executing:

npm install dns --save

Despite these fixes, a new error emerged stating 'Invalid left-hand side in assignment'.

I opted for the approach of calling initializeApp instead of using key.json.

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

Convert the Date FR and Date US formats to ISO date format

There is a function in my code that accepts dates in different formats. It can handle two formats: 2022-06-04 or 04/06/2022 I want all dates to be in the format: 2022-06-04 For instance: public getMaxduration(data: object[]): number { data.forEach((l ...

Setting default property values in a React component using Typescript

   Is there a way to define default property values in React components when using Typescript? I came across a post on SE suggesting the use of a static class variable called defaultProps with key-value pairs for properties. However, this method didn&a ...

Unlock the power of Angular ViewChildren to access and manipulate SVG elements efficiently

I have an SVG file loaded as an object: <object data="assets/img/states.svg" type="image/svg+xml" id="map"></object> This SVG includes a large PNG map along with several rect and text elements. <rect y="224.72084" x="644.87109" ...

What is the proper way to implement jest.mock in a describe or it block?

Using typescript and jest, I am faced with a scenario involving two files: users.service.ts, which imports producer.ts. In an attempt to mock a function in producer.ts, I successfully implement it. import { sendUserData } from "./users.service"; const pro ...

The comparison of Booleans in Typescript sometimes produces inaccurate results

There is a strange issue I encountered in one of my classes involving a readonly boolean property. Whenever I try to check this property, the results are not as expected. Here is an example of the code: // vorgang is a reference to the class, isEK is the ...

What is the method for adding local images to FormData in Expo version 48 and above?

When working with Expo v47 and its corresponding React Native and TypeScript versions, FormData.append had the following typing: FormData.append(name: string, value: any): void An example of appending images using this code could be: const image = { uri ...

Display a custom error message containing a string in an Angular error alert

How can I extract a specific string from an error message? I'm trying to retrieve the phrase "Bad Request" from this particular error message "400 - Bad Request URL: put: Message: Http failure response for : 400 Bad Request Details: "Bad Request ...

Delay the Ngrx effect by 2 seconds before initiating the redirect

I have an ngrx effect that involves calling an HTTP method and then waiting for 2 seconds before redirecting to another page. However, the current behavior is that it redirects immediately without waiting. confirmRegistration$ = createEffect(() => { ...

Utilizing geolocation within a promise in Ionic 2

Our implementation of the geolocation call is done within a promise in Ionic 2. It functions properly on iOS and older Android versions. In our app.js file, we are executing the geolocation call and resolving it in the initial view. On Android Marshmallo ...

Error in JavaScript: A surprise anonymous System.register call occurred

Within Visual Studio 2015, there exists a TypeScript project featuring two distinct TypeScript files: foo.ts export class Foo { bar(): string { return "hello"; } } app.ts /// <reference path="foo.ts"/> import {Foo} from './f ...

How can you utilize Angular 2 Services for sharing global variables?

Within our NG starter boilerplate, the file app.component.ts contains the following code: export class AppComponent {title = "Website Title"} The title variable will be displayed in the appropriate app.component.html as shown below: <p>{{title}}&l ...

Filter the Observable array to extract a single output

Currently, I am developing a web application using Angular 6 and angularfire2. Within my service, there is an Observable array that I need to filter in order to retrieve just one specific result. Each document contains a map named moderatorAssigned which i ...

Displaying nested web service array data in Angular 4

I created a project that retrieves data from a web service API. However, the API contains nested arrays that also need to be displayed. How can I access the data from these nested JSON arrays? What is the correct way to extract this data within the HTML co ...

Changing a table cell's value when a button is clicked using Angular

I'm working with a bootstrap table that includes a button and a textbox above it. After entering a number in the textbox and clicking the generate button, I need to update the "Bill Amount" column for each row with the value from the textbox. How can ...

The authService is facing dependency resolution issues with the jwtService, causing a roadblock in the application's functionality

I'm puzzled by the error message I received: [Nest] 1276 - 25/04/2024 19:39:31 ERROR [ExceptionHandler] Nest can't resolve dependencies of the AuthService (?, JwtService). Please make sure that the argument UsersService at index [0] is availab ...

Incorporating the Vidyard embedded player within an Angular application

The Vidyard Portal provides an embed code that looks like this: <!-- The script tag should be placed in the head of your page if possible --> <script src="https://play.vidyard.com/embed/v4.js" type="text/javascript" async>&l ...

Creating a custom event handler for form input changes using React hooks

A unique React hook was created specifically for managing form elements. This hook provides access to the current state of form fields and a factory for generating change handlers. While it works seamlessly with text inputs, there is a need to modify the c ...

Leveraging Angular Observables for seamless data sharing across components

As I embark on developing my very first Angular app, I have encountered a challenge with filtering a list of book objects based on their gender attribute. The issue lies in sharing data between components – specifically the filteredData variable and the ...

The resolve.alias feature in webpack is not working properly for third-party modules

Currently, I am facing an issue trying to integrate npm's ng2-prism with angular2-seed. The problem arises when importing angular2/http, which has recently been moved under @angular. Even though I expected webpack's configuration aliases to hand ...

"Angular: Issue with Mat-stepper next button requiring double click when placed inside a table

Trying to use table rows as steppers for a mat-stepper, but experiencing an issue where buttons require a double-click to be selected. Sharing the code below: <mat-stepper linear #stepper> <mat-step [completed]="firstStep"> < ...