Private variable in AppComponent constructor -> NO HTML/View?

Question

Problem:

When adding (Visual Code autocompleted/-added) a variable (private _dataService: DataService) in AppComponent constructor(…) { } (because I used it down below) somehow the whole UI output vanishes. When taken out of it (or moved above), all is fine.

Why?

Project is generated with Angular-CLI (no HTML customisations at this point). View output with ng serve.

import { Component } from '@angular/core';
import { DataService } from './services/DataService'
import { isType } from '@angular/core/src/type';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  constructor(
    private _dataService: DataService
    // private translate: TranslateService
  ) { }

………

Angular CLI: 1.7.4 Node: 9.6.1 OS: darwin x64 Angular: 5.2.9

EDIT Just realised I forgot the DataService to the Component (like I also see you already commented) :P!

-->

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [DataService,Http]
})

But the Problem persists…

Console output:

Error: StaticInjectorError(AppModule)[Http -> ConnectionBackend]: StaticInjectorError(Platform: core)[Http -> ConnectionBackend]: NullInjectorError: No provider for ConnectionBackend!

Any error in console? Do you have that `DataService` in `providers` array in your `AppModule`? — Martin Adámek, Apr 12 '18 at 15:38
You need to add `DataService` in your `AppModule` providers. Check console logs, you'll be getting error details there. — FAISAL, Apr 12 '18 at 15:39
@MartinAdámek & Faidal yup, added it, still breaking (see console output, now) — Tha Brad, Apr 12 '18 at 16:12
As the error states, you are missing another service in providers array: `No provider for ConnectionBackend` — Martin Adámek, Apr 12 '18 at 16:15
@MartinAdámek `ConnectionBackend` is an Abstract class (from which real backends are derived)! So no chance there. — Tha Brad, Apr 12 '18 at 16:38
Ahh sorry, the problem is in `Http` I guess (that is not your service, right?). First of all, you should use `HttpClient` instead, as `Http` is now deprecated. Then you should not provide that, instead import `HttpClientModule` in your `AppModule`. — Martin Adámek, Apr 12 '18 at 16:41

score 2 · Accepted Answer · answered Apr 12 '18 at 16:46

First of all, HttpModule is deprecated, use HttpClientModule instead (see https://angular.io/guide/http).

Then, you do not need to provide HttpClient, instead you need to import HttpClientModule in your AppModule to be able to use (inject) HttpClient.

So in your module:

@NgModule({
  imports: [HttpClientModule],
  providers: [DataService]
})
export class AppModule { }

And in your service:

@Injectable()
export class DataService {

  constructor(private http: HttpClient) { }

  public doSomething() {
    return this.http.get('...');
  }
}

Private variable in AppComponent constructor -> NO HTML/View?

1 Answers1