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

Unable to find the locally stored directory in the device's file system using Nativescript file-system

While working on creating an audio file, everything seems to be running smoothly as the recording indicator shows no errors. However, once the app generates the directory, I am unable to locate it in the local storage. The code I am using is: var audioFo ...

I am encountering an issue trying to create a Docker image featuring TypeScript

I am facing an issue while trying to build a docker image using the docker build . command in my next.js app An error is being encountered Error: buildx failed with: error: failed to solve: process "/bin/sh -c yarn run build" did not complete su ...

Verify whether the object is properly implementing the interface

Design: export interface Person { id: number; firstName: string; lastName: string; age: number; } Is there a way to verify that an object returned from the backend aligns with the structure defined in the Person interface? ...

Angular Protectors: Stop unauthorized access to a URL while allowing authorized refresh

I've developed a Protection feature that blocks users from directly accessing a specific URL, and it's functioning correctly. However, the issue arises when I try to refresh the page as the Protection feature ends up redirecting me. Below is th ...

Retrieve the product IDs by selecting the checkboxes, then compile a fresh array consisting of the identified IDs

I am currently delving into the realm of typescript/angular2+ as a fledgling student, and I have taken on the task of creating a website to put my newfound knowledge to the test. The view is up and running, but I'm facing some roadblocks as I work on ...

Tips for Dealing with Empty Rows in Arrays

How can I remove rows from an array in Alasql where all key values are null? Here is the array data: [ 0:{Name:"ABC1",No:5,BalanceDue:5000,Notes1:null,Notes2:null,CurrencyId:"2",Date:"06/01/2018"} 1:{Name:"ABC2",No:6,BalanceDue:6000,Notes1:null,Notes2: ...

Transforming an array of vector3 into JSON format

Can anyone assist me with an issue I'm experiencing while trying to save line render positions to a list of vector3 and then converting it to Json for saving in Firebase? Despite having valid data in the list, my jsondata is always empty when using Js ...

The class constructor in the TSdx package must be invoked with the 'new' keyword

I recently developed a npm package using TSdx to create a small Jest reporter. However, when I try to use this package in another project, an error occurs. Uncaught TypeError: Class constructor BaseReporter cannot be invoked without 'new' at ...

What is the way to obtain loading start/end events while using a loader widget in conjunction with an asynchronous Firebase request (observable)?

I have implemented AngularFire in the following manner: constructor(private afDb: AngularFireDatabase) { allRRs$ = this.afDb.list(`research_reports-published/`).valueChanges(); } The variable allRRs$ is an observable that I am utilizing in my templat ...

"Exploring the process of retrieving URL parameters within an activated link using Angular 7 and executing a REST API call from a service

My aim is to retrieve data by utilizing the id field through Get parameters. Below is the URL code in my HTML that redirects to a specific page without triggering the service to fetch the REST API. <a [routerLink]="['/usedCars/detail', list ...

Converting Typescript library into a standalone global JavaScript file

Currently working on developing a Typescript library that follows this structure: https://i.stack.imgur.com/YyCHk.jpg This includes the following files: restApi.class.ts import { restApiOptions } from '../models/rest.options.model'; import { ...

Error: Trying to modify an immutable property 'title' of object '#<Object>' - React JS and Typescript

Whenever I press the Add button, all input values are stored in a reducer. However, if I append any character to the existing value in the input fields, it triggers the following error: Cannot assign to read only property 'title' of object &apos ...

The concept of 'this' remains undefined when using a TypeScript Property Decorator

I've been delving into TypeScript decorators focusing on properties, and I crafted the following snippet inspired by various examples: decorator.ts export function logProperty(target: any, key: string) { let val = this[key]; const getter = () ...

Customizing Material UI Select for background and focus colors

I am looking to customize the appearance of the select component by changing the background color to "grey", as well as adjusting the label and border colors from blue to a different color when clicking on the select box. Can anyone assist me with this? B ...

Has anyone tried using the JSON1 extension with Angular in an Ionic project?

Looking to extract SQlite information in JSON layout utilizing the JSON1 extension. Yet, upon trying to execute the code, an error message appears. Error {"message":"sqlite3_prepare_v2 failure: no such function: json_object", "co ...

React Native Async Storage: displaying a blank page issue

I am facing an issue while attempting to save my data locally using AsyncStorage, specifically with the getData method. const storeData = async (value: string) => { //storing data to local storage of the device try { await AsyncStorage.setItem(& ...

Tips for dividing by a large number

I am currently attempting the following: const numerator = 268435456; const denominator = 2 ** 64; const decimalFraction = numerator / denominator; In order to achieve this, I have experimented with utilizing the code provided in this link: : const rawVal ...

This TypeScript error occurs when trying to assign a value of type 'null' to a parameter that expects a type of 'Error | PromiseLike<Error | undefined> | undefined'

Currently, I am making use of the Mobx Persist Store plugin which allows me to store MobX Store data locally. Although the documentation does not provide a TypeScript version, I made modifications to 2 lines of code (one in the readStore function and anot ...

The use of async/await within an observable function

I am looking to establish an observable that can send values to my observers. The issue lies in the fact that these values are acquired through a method that returns a promise. Is it possible to use await within the observable for the promise-returning f ...

What is the method for adding a document within an array that is nested within another document?

Apologies if the title seems complex... I struggled to find a better way to describe it. The scenario I am dealing with fits the following Schemes: Collection1: const mongoose = require('mongoose'); const itemSchema = mongoose.Schema({ _id: ...