Error encountered: TypeScript module 'angularfire2/interfaces' not found in Ionic 3 with angularfire2-offline plugin

Encountering an error while trying to set up angularfire2-offline:

[16:02:08]  typescript: node_modules/angularfire2-offline/database/database.d.ts, line: 2 
            Cannot find module 'angularfire2/interfaces'. 

       L1:  import { AngularFireDatabase } from 'angularfire2/database';
       L2:  import { FirebaseListFactoryOpts, FirebaseObjectFactoryOpts } from 'angularfire2/interfaces';
       L3:  import { AfoListObservable } from './list/afo-list-observable';

[16:02:08]  typescript: node_modules/angularfire2-offline/database/interfaces.d.ts, line: 1 
            Cannot find module 'angularfire2/interfaces'. 

       L1:  import { FirebaseListFactoryOpts } from 'angularfire2/interfaces';

[16:02:08]  typescript: node_modules/angularfire2-offline/database/list/afo-list-observable.d.ts, line: 1 
            Cannot find module 'angularfire2/interfaces'. 

       L1:  import { FirebaseListFactoryOpts } from 'angularfire2/interfaces';
       L2:  import { ReplaySubject } from 'rxjs/ReplaySubject';

[16:02:08]  typescript: node_modules/angularfire2-offline/database/list/emulate-query.d.ts, line: 1 
            Cannot find module 'angularfire2/interfaces'. 

       L1:  import { FirebaseListFactoryOpts } from 'angularfire2/interfaces';
       L2:  export declare class EmulateQuery {

@ngModule in app.module.ts:

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,
    AngularFireOfflineModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Versions:

  • Ionic 3.9.2
  • CLI 3.8
  • angularfire2 4.0.0
  • angularfire2-offline 4.2.4
  • firebase 4.3.0
  • typescript 2.6.0

Followed the tutorials from:

https://github.com/adriancarriger/angularfire2-offline and

The issue appeared suddenly.

Answer №1

There appears to be an issue arising from the latest update of angularfire2.

angularfire2 : 4.0.0-rc.2

I resolved the issue by reverting back to the previous version and now everything is functioning correctly.

npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5c3d323b29303d2e3a352e39">[email protected]</a>

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

Preventing Firebase duplicates leads to the error of not being able to read the property 'apps'

Struggling to incorporate Firebase into a TypeScript/NextJS project, I have encountered difficulties. Despite successfully importing and initializing the app: import * as firebase from "firebase/app"; import { collection, getDocs } from "fir ...

experiencing an excessive amount of rerenders when trying to utilize the

When I call the contacts function from the main return, everything seems fine. However, I encounter an error at this point: const showContacts = React.useCallback( (data: UsersQueryHookResult) => { if (data) { return ( < ...

How do I implement data range filtering in Typescript?

Seeking assistance with filtering data by date range and forwarding the results to the client. The objective is to extract tickets created within specific dates, but I keep encountering a console error which is proving challenging to resolve. var befor ...

What is the reason behind the restriction on using 'this' on the left side of an assignment?

Within the component class, I've been working on this: export class myapp { detail; myarr = ['me', 'myself', 'i']; title = this.myarr[0]; this.detail = this.title ; //error } I'm curious why `this.detail` ...

Discovering the specific type of an object property in TypeScript

I am currently working on implementing a lookup type within an object. Imagine my object structure as follows: class PersonList { persons = { john: 'description of john', bob: 'description of bob' } } I want to create a ge ...

Ways to dynamically update button properties in Angular 2

Customized Template, <div *ngFor="let item of items" class = "col-sm-12 nopadding"> <a class="button buttonaquacss button-mini button-aqua text-right pull-right" [ngClass]="{activec: isActive}" (click)='updateStatus(item)& ...

Creating a constant.ts file to define universal constantsWould you like assistance with anything else

Is there a way to create a constant.ts file or use a command to declare all global constants and export them for easy access? ...

Unable to trigger click or keyup event

After successfully implementing *ngFor to display my data, I encountered an issue where nothing happens when I try to trigger an event upon a change. Below is the snippet of my HTML code: <ion-content padding class="home"> {{ searchString ...

There are critical vulnerabilities in preact-cli, and trying to run npm audit fix leads to a never-ending loop between versions 3.0.5 and 2.2.1

Currently in the process of setting up a preact project using preact-cli: npx --version # 7.4.0 npx preact-cli create typescript frontend Upon completion, the following information is provided: ... added 1947 packages, and audited 1948 packages in 31s 12 ...

What is the best way to transfer user data from the backend to the frontend?

I successfully created a replica of YelpCamp using Node and EJS, but now I am attempting to convert it into a Node-React project. Everything was going smoothly until I encountered an issue while trying to list a specific user in the SHOW route. In order to ...

Retrieving Vue data from parent components in a nested getter/setter context

<template> <div id="app"> {{ foo.bar }} <button @click="meaning++">click</button> <!--not reactive--> <button @click="foo.bar++">click2</button> </div> </templ ...

What is the best way to implement a hover delay for an element in Angular?

Here is an element I'm working with: <div (mouseenter)="enter()" (mouseleave)="leave()">Title</div> In my TypeScript file: onHover = false; enter() { this.onHover = true; // additional functionality... } leav ...

What is the best way to restrict the number of iterations in ngFor within Angular HTML

I want to use ngFor to display a maximum of 4 items, but if the data is less than 4, I need to repeat the loop until there are a total of 4 items. Check out this example <img *ngFor="let item of [1,2,3,4]" src="assets/images/no-image.jpg" styl ...

The logic behind regular expressions

Currently working on building a web application with Angular 6 and I have a query: I'm in the process of developing a custom input component (specifically for text inputs) like so: @Component({ selector: 'input-text', templateUrl: &apos ...

Determining a value that increases to yield a fresh sum

I'm currently developing a character generator that determines your score based on the experience points you allocate to it. The scoring system is such that 1 XP gives you a score of 1, 3 XP gives you a score of 2, 6 XP gives you a score of 3, 10 XP g ...

Error TS2393 in Typescript: Multiple function declarations found within a Node/Express application

In my TypeScript node + express application, I have implemented a function in some API routes that looks like this: function cleanReqBody(req) { req.body.createdBy = req.user; req.body.modifiedBy = req.user; req.body.modified = new Date(); } Howeve ...

A TypeScript Class that Refers to Itself

I need help with representing a JSON object in an Angular2 typescript class. The JSON object contains an array of objects of its own type. Here is what the JSON object looks like: { "data": { "id": 5, "type": "taxons", "attributes": { ...

What is the best way to showcase information retrieved using the getDocs function from Firebase Firestore?

Hello! I am currently exploring the world of Firestore and facing a challenge. My goal is to retrieve a data object from Firestore, set it as state, and then display it on my application: Below are the imports that I have utilized for this task (please ig ...

Is it true that "Conditional types" are not compatible with actual functions?

Checking out https://www.typescriptlang.org/docs/handbook/2/conditional-types.html I'm curious as to why this code is not functioning properly? interface IdLabel { id: number } interface NameLabel { name: string } type NameOrId<T extends num ...

Using Arrow Functions in Angular 2 Typescript with Support for IE11

Are arrow functions in Typescript for Angular2 compatible with IE 11? I have come across information stating that arrow functions in javascript may not be supported in IE 11, but I am uncertain if the same applies to Typescript. ...