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

What is the best way to reduce the size of TypeScript source code in an Electron application with the help of Electron Forge and Electron Packager

resolved: I was able to solve this issue using electron-builder, which utilizes webpack in the background to handle all problems efficiently. Initially, I faced this challenge while using electron-forge and electron-packager. Despite researching extensivel ...

Using TypeScript to extract types from properties with specific types

My current challenge involves working with a filter object derived from an OpenAPI spec. The structure of this object is illustrated below: export interface Filters { field1: string[] field2: string[] field3: boolean field4: number } My goal is to ...

Exploring the Benefits of Utilizing the tslint.json Configuration File in an Angular 6 Project

https://i.stack.imgur.com/j5TCX.png Can you explain the importance of having two tslint.json files, one inside the src folder and one inside the project folder? What sets them apart from each other? ...

Utilizing Node.js and Jasmine: Preventing the invocation of a Promise function to avoid executing the actual code results in DEFAULT_TIMEOUT_INTERVAL

There is a function below that returns a promise. public async getAverageHeadCount(queryParams: Params, childNode: any, careerTrackId: string): Promise<Metric> { const queryId = this.hierarchyServiceApiUrl + "rolling-forecast/ahc/" + q ...

Struggling to incorporate infinite scroll feature into JSON script that is already functioning smoothly

After developing a phonegap application, I created a page called photos.html to fetch photos from my server using JSON. However, despite successfully retrieving all the photos stored in my MySQL database on the server with JSON, I struggled to integrate In ...

Creating a structured state declaration in NGXS for optimal organization

Currently, I'm delving into the world of NGXS alongside the Emitters plugin within Angular, and I find myself struggling to grasp how to organize my state files effectively. So far, I've managed to define a basic .state file in the following man ...

Issue encountered during installation of Less using Command Prompt

C:\Users\Elbarody>npm install -g less npm ERR! code ETIMEDOUT npm ERR! errno ETIMEDOUT npm ERR! network request to http://registry.npmjs.org/less failed, reason: connect ETIMEDOUT 74.122.238.10:8080 npm ERR! network This issue is related to n ...

What is the recommended approach in Angular for unassigned @Input() variables when using TypeScript strict mode?

Issue at Hand After upgrading my Angular version from 10 to 13, I encountered a problem with the new TypeScript strict compiler mode. The upgrade required me to assign values to all declared variables upon initialization, causing issues with properties de ...

The incorrect type is being assigned to an array of enum values in Typescript

Here's some code that I've been working on: enum AnimalId { Dog = 2, Cat = 3 } const animalIds: AnimalId[] = [AnimalId.Dog, 4]; I'm curious as to why TypeScript isn't flagging the assignment of 4 to type AnimalId[]. Shouldn't ...

Establish a connection between a variable and the selected value of Mat-select using a form

Within my TypeScript code, there exists a variable named type whose value is provided by its parent component. This type value is essentially a string that has the possibility of being empty upon being received from the parent component. Additionally, in t ...

Strange occurrences observed while looping through an enum in TypeScript

Just now, I came across this issue while attempting to loop through an enum. Imagine you have the following: enum Gender { Male = 1, Female = 2 } If you write: for (let gender in Gender) { console.log(gender) } You will notice that it iter ...

Open new tab for Angular OAuth2 OIDC login process

Currently, I am incorporating the authorization code flow using angular-oauth2-oidc in my Angular application. It is a fairly straightforward process. However, I would like to have the ability for the login flow to open in a new tab when the login button ...

An error message 'module.js:557 throw err' appeared while executing npm command in the terminal

Every time I try to run npm in the terminal, I encounter this error message and it prevents me from using any npm commands. This issue is also affecting my ability to install programs that rely on nodejs. $ npm module.js:557 throw err; ^ Error: Cannot ...

Unable to construct with cPanel or SSH due to Laravel and Vue integration

Working on my cPanel server with ssh access, I downloaded new changes/files using Git and then executed npm run build. To my surprise, an error popped up. https://i.stack.imgur.com/JaUDG.png Any ideas on how to resolve this error? I double-checked the f ...

Animation on React child component disappears when re-rendered

My React application utilizes Material UI with a component (let's call it DateSelector) as shown below, slightly altered for demonstration purposes. Material UI provides animations for clicks and interactions within its components. An interesting obs ...

several parameters for the `ts-node -r` options

Can I include multiple require statements in the package.json script before running with ts-node -r? "scripts": { "start": "ts-node -r dotenv/config newrelic src/index.ts", } I'm having trouble adding both "dotenv/config" and "newrelic" si ...

Issue with IntelliJ: TypeScript Reference Paths Are Not Relative

I am currently using IntelliJ as my IDE, but I am facing an issue with configuring gulp-typescript to compile my typescript code. The problem arises from the fact that IntelliJ does not treat my reference paths relatively, instead it references them from m ...

Unveiling typescript property guards for the unknown data type

Is there a way to type guard an unknown type in TypeScript? const foo = (obj: unknown) => { if (typeof obj === 'object' && obj) { if ('foo' in obj && typeof obj.foo === 'string') { r ...

Having trouble with npm - receiving an error message "read ECONNRESET" while trying to install hdwallet-provider

When I run: npm install @truffle/hdwallet-provider I encounter the ECONNRESET error while it is stuck on rollbackFailedOptional. I have already attempted the initial two solutions found here. Additionally, re-running npm install did not produce any issu ...

Error: The start script is missing in the react.js project

Despite hours of searching and attempts, I have been unable to solve this issue. When entering npm create-react-app into the terminal and navigating to the correct directory, I encounter the following error: 'npm ERR! missing script: start' Bel ...