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:

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.

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

[ZhipengZeng]

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>

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/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 https://github.com/ionic-team/ionic/commit/e95b481a53191582bca635f322ad07eadbd62d64. 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!