We are in need of a provider for the Ionic Network native plugin

I have encountered an issue while trying to use Ionics native plugin "Network" as it fails due to a missing provider. To prevent any errors, I performed a fresh installation of Ionic along with the necessary dependencies:

ionic cordova plugin add cordova-plugin-network-information
npm install @ionic-native/network

After that, I included the dependency in the constructor of the home component:

import { Component } from '@angular/core';
import { Network } from '@ionic-native/network/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(private network: Network) {
      // do nothing ...
  }
}

However, upon running ionic serve, I encountered the following error message:

ERROR Error: Uncaught (in promise): 
Error: StaticInjectorError(AppModule)[HomePage -> Network]: 
  StaticInjectorError(Platform: core)[HomePage -> Network]: 
    NullInjectorError: No provider for Network!
Error: StaticInjectorError(AppModule)[HomePage -> Network]: 
  StaticInjectorError(Platform: core)[HomePage -> Network]: 
    NullInjectorError: No provider for Network!

Here is some system information:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/Users/samnowakowski/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.4.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   cordova (Cordova CLI) : 9.0.0 (<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="52313d20363d24337f3e3b30126b7c627c63">[email protected]</a>)
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (1 plugins total)

System:

   Android SDK Tools : 26.1.1 (/Users/admin/Library/Android/sdk)
   NodeJS            : v10.15.3 (/usr/local/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

Answer №1

Access the app module (app.module.ts) and insert the following code:

import { Network } from '@ionic-native/network/ngx';

@NgModule(
   ...
   providers: [
      Network
   ]
); 

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

Encountering a unique webpack error while attempting to upgrade Angular from version 11 to version

Struggling to upgrade my Angular version from 11.1.1 to 12.1.1 and encountering a build error. "CustomWebpackDevServerSchema" schema is using the keyword "id" which its support is deprecated. Use "$id" for schema ID. "BuildCustomWebpackBrowserSchema" sche ...

Unraveling nested elements with the array map() method in Angular2 and Typescript: Fixing the issue of undefined property reference while mapping

Hey there! I'm currently working with Angular 4 and I have a piece of code that parses data from an API into a TypeScript array of rows. It's important to note that the code functions properly if elements like 'item.tceCampRun' and &apo ...

Is there a missing .fillGeometry in the Figma plugin VectorNode?

The documentation for VectorNode mentions a property called fillGeometry. Contrary to this, TypeScript indicates that "property 'fillGeometry' does not exist on type 'VectorNode'". https://i.sstatic.net/ICfdw.png I seem to be missing ...

Resolve functionality in UI Router fails to function properly when utilizing component-based states

Issue: In a project I am currently involved in, there is a component that is utilized in two different scenarios. One instance involves calling it from the Material Design system's bottomSheet, while the other requires direct usage through the ui-ro ...

Guide to importing a JavaScript module as any type without using a declaration file (d.ts)

Looking to bring a js module into my ts app. Is there a way to achieve this without creating a d.ts file? If not, how can it be declared as any in the d.ts file? Currently using //@ts-ignore to ignore the error. Appreciate any help! ...

Version 1.0 and higher of Ionic do not display the side menu when using tabs

I have developed an app using Ionic that includes a side menu with tabs feature. The side menu displays correctly when using Ionic version 0.9.27, but it does not show up when the version is 1.0 or higher. What could be causing this issue? HTML Layout & ...

TS1261: The file name 'xxx' that is already included is different from the file name 'xxx' only in terms of casing

In my project, there is a file located at /app/client/modules/activity/pages/New/hooks.ts. The folder name is New, with the first letter capitalized. During the webpack build process, I encountered the following error: ERROR in /root/app/client/modules/ac ...

Generating and setting an object property in TypeScript at runtime

In my code, I have defined an interface as follows: export interface OurHistory { ourHistory?: object; step1?:object; step2?:object; } Within the HistoryComponent class, I am doing the following: export class HistoryComponent implements OnInit, On ...

Why is it necessary to update npm each time I add a new library to my project?

It seems like every time I install a new library using npm, I encounter the same update message: Update available 5.6.0 → 5.8.0 Run npm i -g npm to update After updating as prompted, the cycle repeats itself with each new library installation. ...

Having trouble with the sx selector not functioning properly with the Material UI DateTimePicker component

I'm currently working with a DateTimePicker component and I want to customize the color of all the days in the calendar to match the theme color: <DateTimePicker sx={{ "input": { color: "primary.main&quo ...

Injecting a service into a parent class in Angular 6 without the need to pass it through the constructor

Can anyone provide guidance on how to incorporate a service with multiple dependencies into an abstract class that will be inherited by several classes, in a more streamlined manner than passing it through all constructors? I attempted to utilize static m ...

Utilizing GroupBy in RxJs for an Observable of Objects数组

I am working with entries of type Observable<Event[]>, and they are structured as follows: [{ "_id": 1, "_title": "Test Event 1", "_startDate": "2019-05-29T07:20:00.000Z", "_endDate": "2019-05-29T08:00:00.000Z", "_isAllDay": false }, ...

IntelliJ IDEA does not support the recognition of HTML tags and directives

I seem to have lost the ability to switch between my HTML and TS files in Intellij IDEA; the tags, directives, and autocompletion in HTML are no longer working. Additionally, I'm receiving some warnings: https://i.stack.imgur.com/QjmNk.png Is there ...

Error encountered while transitioning to Angular 6: "Declining to remove"..."lies beyond"..."and lacks a hyperlink"

As a newbie developer, I am currently working on my first app. Initially, I used Angular 5.2 to build it and now I'm attempting to upgrade to Angular 6. Following the guidelines provided at https://update.angular.io/, I executed the following command ...

Ways to stop npm install <package> --save-dev from rearranging devDependencies

Context Encountering issues with a Windows build system encountering the file path length error due to lengthy paths within the node modules folder. A potential solution we've found is adding a deeply nested dependency at the top of the devDependen ...

Joining the Parent Route String with a Variable using Angular Routerlink

How can I incorporate string interpolation or concatenation into the router link below in order to navigate to the parent route and include a variable link? <a routerLink="../account-information/{{item.productId}}"> ...

Leveraging a returned value from a function in Typescript within a React component

I am currently facing a challenge where I need to extract values from a Typescript function and use them to dynamically render a React page. Specifically, the two values I am working with are the outputs of getIcon() and getSpaces(). This is how I attempt ...

The function d3.geoStitch has not been defined

I am currently working on implementing this example that visualizes a TIFF file using d3 as a node script. Everything seems to be functioning well, except when it comes to d3.geoStitch where my script throws an error stating d3.geoStitch is undefined. The ...

What is the best way to verify a template-driven form within a table that contains various fields?

I am facing an issue in my Ionic-Angular application with Template driven forms. Despite submitting the form without touching the input fields, the error message does not display as expected. Instructions on how to validate this form are welcome. Page.ht ...

Encountering a React Native error with socketcluster-client library

I encountered an error while running my Android emulator with the command npm run android. The command prompt displayed the following error: 10:54:45 AM: Warning: 'react-native-vector-icons' peer dependency missing. To view the full warning, na ...