bug: core.js:6228 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError

Bug Report

Ionic version:

[x] 5.2

Current behavior:
Whenever entering a page with some components like

  • ion-radio-group
  • ion-range
  • ion-searchbar

I got this error:

Captura de tela de 2020-06-10 18-42-55

Expected behavior:
Not have any error.

Steps to reproduce:
Just update to latest ionic and angular and insert this snippet anywhere

Related code:

<ion-content >
  <ion-radio-group></ion-radio-group>
</ion-content>

Other information:
After updating to new ionic and angular I started getting this error.

Captura de tela de 2020-06-10 18-52-51

Ionic info:

Ionic:

   Ionic CLI                     : 6.9.2 (/usr/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.2.0
   @angular-devkit/build-angular : 0.901.7
   @angular-devkit/schematics    : 9.1.7
   @angular/cli                  : 9.1.7
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.2.0
   @capacitor/core : 2.2.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v14.2.0 (/usr/bin/node)
   npm    : 6.14.5
   OS     : Linux 5.6

5 thoughts on “bug: core.js:6228 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError

  1. I came here to report this as well.

    I just updated to @ionic/angular: 5.2.0

    and this error appears:

    ERROR NullInjectorError: R3InjectorError(ReadPageModule)[NgControl -> NgControl -> NgControl -> NgControl]: NullInjectorError: No provider for NgControl! at NullInjector.get (http://localhost:8100/vendor.js:24111:27) at R3Injector.get (http://localhost:8100/vendor.js:38151:33) at R3Injector.get (http://localhost:8100/vendor.js:38151:33) at R3Injector.get (http://localhost:8100/vendor.js:38151:33) at NgModuleRef$1.get (http://localhost:8100/vendor.js:55443:33) at R3Injector.get (http://localhost:8100/vendor.js:38151:33) at NgModuleRef$1.get (http://localhost:8100/vendor.js:55443:33) at Object.get (http://localhost:8100/vendor.js:53178:35) at getOrCreateInjectable (http://localhost:8100/vendor.js:27945:39) at NodeInjector.get (http://localhost:8100/vendor.js:28193:16)

  2. I have the same issue with ion-segment in the page.
    Turns out in ionic 5.2 it requires [(ngModel)] present.

    in my case:
    from:

    <ion-segment (ionChange)="segmentChanged($event)" value="init">
      <ion-segment-button value="init">
        <ion-label>Init</ion-label>
      </ion-segment-button>
      <ion-segment-button value="using">
        <ion-label>Using</ion-label>
      </ion-segment-button>
    </ion-segment>
    

    to:

    <ion-segment (ionChange)="segmentChanged($event)" [(ngModel)]="currentValue">
      <ion-segment-button value="init">
        <ion-label>Init</ion-label>
      </ion-segment-button>
      <ion-segment-button value="using">
        <ion-label>Using</ion-label>
      </ion-segment-button>
    </ion-segment>
    
  3. Thanks for the issue. This has been resolved via #21504, and a fix is now available as part of the Ionic Framework 5.2.1 release. Please update to v5.2.1 in order to receive this bug fix:

    npm install @ionic/angular@latest
    

    This bug was caused by e95b481. When attempting to get an NgControl on a component, Angular threw an error for components that were not part of a form/did not have ngModel.

    The fix for this involves checking to see if the component in question is part of a form/has an ngModel to avoid this error.

    Apologies for any inconvenience this may have caused. For any additional bugs, please open a new issue. Thanks for using Ionic!