No provider for ChangeDetectorRef

#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.

#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.