ERROR TS1086: A declaration of an accessor within an ambient context is not allowed. Accessor for firebaseUiConfig(): NativeFirebaseUIAuthConfig

Trying to create a Single Page Application with Angular/CLI 8. Everything was running smoothly locally until I tried to add Firebase authentication to the app. Upon compiling through Visual Studio Code, I encountered the following error message:

ERROR in node_modules/firebaseui-angular/lib/firebaseui-angular-library.component.d.ts:17:9 - error TS1086: An accessor cannot be declared in an ambient context.

17 get firebaseUiConfig(): NativeFirebaseUIAuthConfig; ~~~~~~~~~~~~~~~~

Installed the necessary packages by running:

npm install firebase firebaseui @angular/fire firebaseui-angular --save

Next, tried to compile and view locally using: ng serve which resulted in an error.

Environment details: 
typescript ~3.5.3
firebase ^7.13.2
firebaseui ^4.5.0
firebaseui-angular ^4.1.0
angular/cli ~8.3.25
angular/compiler-cli ~8.2.14
angular-devkit/build-angular ~0.803.25
Running on MacPro Catalina v-10.15.3

Checked similar posts on stackoverflow but couldn't find any that matched my situation exactly. Attempted solutions suggested for related issues like angular-animations and flex-layout, which involved downgrading versions, but none of them worked. Even lowering the version of firebaseui from 4.5.0 to 3.6.0 did not resolve the problem.

Answer №1

made a modification

upgraded firebaseui-angular to version 4.1.0

switched it out for

"firebaseui-angular": "4.0.1"

and that resolved the issue in my package.json file.

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

When interacting with the iframe in an Ionic3 app, it suddenly crashes

Greetings! I have integrated a flipping book URL inside an iframe: <ng-container> <iframe [src]="eUrl" id="flipping_book_iframe" frameborder="0" allowfullscreen="allowfullsc ...

How to automatically scroll to the most recently added element in an *ngFor loop using Angular 2

In my web page, I have a dynamic list rendered using an ngFor loop. Users can add or remove elements from this list by clicking on a button. What I want to achieve is to automatically scroll the browser view to the latest element added when a user clicks o ...

When utilizing a personalized Typescript Declaration File, encountering the error message 'Unable to resolve symbol (...)'

I'm having trouble creating a custom TypeScript declaration file for my JavaScript library. Here is a simplified version of the code: App.ts: /// <reference path="types.d.ts" /> MyMethods.doSomething() // error: Cannot resolve symbol "MyMetho ...

Unexpected outcome in Angular unit testing

I am new to Angular unit testing using Jasmine and Karma. I have created a simple component for testing purposes. Here is my component code: import { Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-input&apos ...

Transforming dynamic class based on state value from React to TypeScript

I'm trying to implement this React function in TypeScript, but I'm encountering errors. const ListItem = ({ text }) => { let [showMore, setShowMore] = useState(false); return ( <div className="item"> ...

Tips on sorting a FileList object selected by a directory picker in JavaScript/TypeScript

I need to filter or eliminate certain files from a FileList object that I obtained from a directory chooser. <input type="file" accept="image/*" webkitdirectory directory multiple> Within my .ts file: public fileChangeListener($event: any) { let ...

The readline interface in Node that echoes each character multiple times

After creating a node readline interface for my project, I encountered an unusual issue. this.io = readline.createInterface({ input: process.stdin, output: process.stdout, completer:(line:string) => { //adapted from Node docs ...

What prevents `console.log` from working within a button click event?

Why is this not functioning correctly? <button (click)="console.log('ok');">Display Details</button> The error message reads: Cannot read property 'log' of undefined However, a console.log statement in the class construc ...

Actions in ASP Core to automatically install necessary tools for Angular2 before and after publishing, followed by the build

Our .NET Core project utilizes Angular2 as the frontend client, housed in a Frontend directory within our solution. The Frontend directory includes package.json and angular-cli.json to keep frontend separate from the rest of the .NET project. When ng buil ...

Tips for accurately typing a "Type Mapping" function

In my code, I have a specific type designed for a function that takes one type I as input and returns another type O as output. Here is how it currently looks: export interface IFunctionalMapping<I, O, K extends keyof O> { [prop: Extract<O[K], ...

Errors occur when attempting to parse Uint8Array in Typescript

I received the following object as a response from calling the AWS Lambda client in NodeJS. { '$metadata': { httpStatusCode: 200, requestId: '1245', extendedRequestId: undefined, cfId: undefined, attempts: 1, tot ...

Experimenting with a VSCode extension that requires the act of launching a folder/workspace

Currently, I am developing a custom VSCode extension that considers the path of the file being opened within the workspace. To create a reproducible test scenario, I want to open the test folder itself in VSCode and then proceed to open the test file with ...

Organize library files into a build directory using yarn workspaces and typescript

When setting up my project, I decided to create a yarn workspace along with typescript. Within this workspace, I have three folders each with their own package.json /api /client /lib The main goal is to facilitate code sharing between the lib folder and b ...

What are some ways I can incorporate PrimeNG components into my Ionic 4 project?

Exploring the integration of PrimeNG components in an Ionic 4 application is my current project. The initial steps I took included creating a blank Ionic 4 app: ionic start myApp blank Afterwards, I proceeded to download PrimeNG into the project: npm ...

My Angular2 application hosted on Heroku is experiencing issues with accessing configuration variables

I am currently developing a web page using Angular2 and I am interested in utilizing configuration variables from Heroku to keep certain sensitive information, such as API URLs, hidden from my script. I have already configured 2 variables on the settings p ...

EventEmitter is failing to refresh the properties bound with [(ngModel)]

I am currently working with the forms module and Google Maps to update the geocode based on the search box provided on the map. The map is a separate component that emits the Geocode using the function geoCodeChange(). This event is handled by another func ...

Accessing and manipulating a intricate JSON structure within an Ionic 3 framework to seamlessly connect it to the user

I'm currently developing an app using Ionic 3. Within my project, I have a JSON object structured like this: { "player": { "username": "thelegend", "platform": "xbox", "stats": { "normal": { "shots ...

Manipulating the DOM within an Angular application

What is the best way to perform DOM manipulation in Angular without using jQuery? Here is an example of code using jQuery: $(".next-step").click(function (e) { var $active = $('.wizard .nav-tabs li.active'); $active.next().removeClass(& ...

Unlock the secrets of recovering deleted data from a text area in Kendo UI Angular

Currently working with Kendo UI for Angular, I need to capture deleted content and remove it from another text area within the same component. My project is using Angular-13. I'm stuck on how to accomplish this task. Any suggestions would be greatly ...

The datepicker in Angular 2 is not displayed properly in Firefox when using the input with the type=date attribute

Everything is functioning properly in the Chrome browser. <div class="form-group"> <label for="date">Date:</label> <input class="form-control " [(ngModel)]="journal.record.date" type="date" required/> </div> <br/& ...