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

[conde2]

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

[MuhAssar]

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)

[netsesame2]

The same issue here.

[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>

[MuhAssar]

This is not mentioned in the changelog

As it contains no breaking changes.

في خميس، 11 يونيو، 2020 في 4:10 ص، كتب Zhipeng Zeng <
[email protected]>:

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:

Init


Using

to:

Init


Using

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/ionic-team/ionic/issues/21489#issuecomment-642362552,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAPNVMLZIWOIKI4GRJNKZK3RWA4HPANCNFSM4N2ZUOMA
.

[bleuscyther]

Omg! it feels so good to finally see a way to fix the error! @ZhipengZeng
adding ng model to anything that could pass as a form element fixed the issue 😱. Looks like it is the kind of change that you have to do on all the project.

I remember facing a similar problem in my directives when trying to use NgModel . there was a special way to do the injection for NgModel, NGControl in order to default to null values and allow ngModel to not be set.

At first glance, this is one of the changes i could find that could be responsible for the issue:
https://github.com/ionic-team/ionic/commit/e95b481a53191582bca635f322ad07eadbd62d64
This change is a very good one but if i am not mistaking there is way yo not enforce the use of ngModel and still use value as a less powerfull fallback.

i may be wrong but this would cascade on all other directives that are using this one . It should be easy to fix with a PR.

[netsesame2]

I have a ion-toggle component added in app.component.html.

It will raise above errors whatever I add ngModal or not.
Downgrade to 5.1.1, expect to be resolved.

[KillerCodeMonkey]

I have a ion-toggle component added in app.component.html.

It will raise above errors whatever I add ngModal or not.
Downgrade to 5.1.1, expect to be resolved.

because it is ngModel and not ngModal @netsesame2

[netsesame2]

I have a ion-toggle component added in app.component.html.

It will raise above errors whatever I add ngModal or not.
Downgrade to 5.1.1, expect to be resolved.

because it is ngModel and not ngModal @netsesame2

Sorry for my mistake, change to ngModel, and still raise error.

[ionic4themes]

After migrating from v4 to v5, I have a similar issue with ion-input. I get a "white screen" and the following console error (with ng serve):

core.js:4117 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(SigninPageModule)[NgControl -> NgControl -> NgControl -> NgControl]: NullInjectorError: No provider for NgControl! NullInjectorError: R3InjectorError(SigninPageModule)[NgControl -> NgControl -> NgControl -> NgControl]: NullInjectorError: No provider for NgControl!

The HTML code:

<ion-item> <ion-label>Default Label</ion-label> <ion-input></ion-input> </ion-item>

my Ionic Info:

`Ionic:

Ionic CLI : 5.4.16 (C:\Users\jose_AppData\Roamingnvm\v10.16.2node_modules\ionic)
Ionic Framework : @ionic/angular 5.2.0
@angular-devkit/build-angular : 0.901.8
@angular-devkit/schematics : 9.1.8
@angular/cli : 9.1.8
@ionic/angular-toolkit : 2.0.0

Cordova:

Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : not available
Cordova Plugins : not available

Utility:

cordova-res (update available: 0.9.0) : 0.8.1
native-run (update available: 0.3.0) : 0.2.9

System:

NodeJS : v10.16.2 (C:\Program Filesnodejsnode.exe)
npm : 6.9.0
OS : Windows 10`

and package.json content:

"@angular/common": "~9.1.11", "@angular/compiler": "~9.1.11", "@angular/core": "~9.1.11", "@angular/forms": "~9.1.11", "@angular/platform-browser": "~9.1.11", "@angular/platform-browser-dynamic": "~9.1.11", "@angular/router": "~9.1.11", "@ionic-native/core": "^5.26.0", "@ionic-native/splash-screen": "^5.26.0", "@ionic-native/status-bar": "^5.26.0", "@ionic/angular": "^5.2.0", "cordova-android": "7.1.4", "core-js": "^2.5.4", "rxjs": "~6.5.5", "tslib": "^1.10.0", "zone.js": "~0.10.2"

[UTSOURCE]

需要添加 [(ngModel)]="对象"

[copaste]

I came here to report this as well, the solution is to use [ngModel], it is really strange that that's not mentioned in the changelog as it obviously is a breaking change.

[ionic4themes]

Solved by adding [ngModel], the point is that we are using the component as a simple "preview component" with no backend, so we had to add a var into .ts and add [ngModel], as @copaste said, this is a breaking change, actually the official documentation is wrong, examples would not work:

[MuhAssar]

@ionic4themes I believe this is an unintended change.

[liamdebeasi]

Thanks for the issue. We are looking into this.

[liamdebeasi]

Can everyone try the following dev build, and let me know if it resolves the issue?

npm i @ionic/[email protected]

This was an unintended bug in the latest 5.2.0 release. Once the fix is verified, we will get a patch release out.

[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!

[KillerCodeMonkey]

nice and thanks for the fast fix :). I wanted to create a PR this evening, but you were faster :D.

[MuhAssar]

wow that was fast, thanks @liamdebeasi

[gersonbarbosa7]

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>

It's truth! It works! Thank so much @ZhipengZeng

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.