No provider for ChangeDetectorRef

Ionic Framework
1

I am migrating an Ionic v3 app to v4 but am coming up against an issue I can’t solve.

I receive the following error from trying to make a network request.

Error: NullInjectorError: No provider for ChangeDetectorRef!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8894) [angular]
    at resolveToken (core.js:9139) [angular]
    at tryResolveToken (core.js:9083) [angular]
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8980) [angular]
    at resolveToken (core.js:9139) [angular]
    at tryResolveToken (core.js:9083) [angular]
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8980) [angular]
    at resolveNgModuleDep (core.js:21120) [angular]
    at _createClass (core.js:21167) [angular]
    at _createProviderInstance (core.js:21137) [angular]
    at resolveNgModuleDep (core.js:21101) [angular]
    at _callFactory (core.js:21192) [angular]
    at _createProviderInstance (core.js:21140) [angular]
    at resolveNgModuleDep (core.js:21101) [angular]

This error happens at the this.http.post(...):

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { IonNav } from '@ionic/angular';
import { SERVER_AUTH_URL } from '../../../environments/environment';

@Injectable({ providedIn: 'root' })
export class AuthenticationService {

constructor(
    private readonly http: HttpClient,
) {}

async login(loginDetails: Login): Promise<boolean> {
  const body = new HttpParams()
    .set('username', loginDetails.username)
    .set('password', loginDetails.password)
    .set('grant_type', 'password');

  const response = await this.http
    .post<AuthResponse>(SERVER_AUTH_URL, body.toString(), { headers })
    .toPromise();
}

...

How do I fix this? I cannot add ChangeDetectorRef to my providers. Some other posts recommend using ApplicationRef’s tick method but this solution doesn’t seem to make sense in my case. No network request is actually made from the browser.

HttpClientModule is in my app.module.ts imports array.

ng --version:

Angular CLI: 7.2.1
Node: 8.14.0
OS: darwin x64
Angular: 7.2.0
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.4
@angular-devkit/build-angular     0.11.4
@angular-devkit/build-optimizer   0.11.4
@angular-devkit/build-webpack     0.11.4
@angular-devkit/core              7.2.1
@angular-devkit/schematics        7.2.1
@angular/cli                      7.2.1
@ngtools/webpack                  7.1.4
@schematics/angular               7.2.1
@schematics/update                0.12.1
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1
1 Like
2

Have you solved this issue i am also facing the same. i’m currently using ionic 4 latest version.

3

I too am experiencing this issue. latest ionic 4. I cant render the template. It will just bomb no matter whats in my template.

1 Like
4

Normaly you don’t need to explicit provide changeDetectorRef.
In my case this Error occured when I provided a wrong Ionic Service.

Maybe show us your AppModule provider array.

5

I am getting this error after updating ionic to 5 and npm i -g native-run

Before everything was fine, after this update getting error like this

ng:///AppModule/AppComponent_Host.ngfactory.js:5 ERROR Error: StaticInjectorError(AppModule)[IonRouterOutlet -> ChangeDetectorRef]:
StaticInjectorError(Platform: core)[IonRouterOutlet -> ChangeDetectorRef]:
NullInjectorError: No provider for ChangeDetectorRef!
at NullInjector.push…/node_modules/@angular/core/fesm5/core.js.NullInjector.get

1 Like
6

Anybody knows how to fix this error ?
I am getting this error after I created a shared module with any components to use in other projects with Ionic 4

Thanks

7

I have this problem too, any one solve it?

8

I got this error when I moved the ChangeDetectorRef injection from my page components into a shared service. Moving the injection back to the page component resolved the error.