Construtor-Param leads to error -> Which error?

Question

EDIT 2: See my comment for the solution.

Always when I remove private _service:AppService then my page renders.

import {AppService} from '../app.service'
export class PaketeComponent {
  /*...*/

  constructor( private _service:AppService){      console.log('ABCconstructorPaket');}
  /*...*/
}

app.service.ts

import {Injectable} from '@angular/core';
import { Cookie } from 'ng2-cookies';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

export class Foo {
  constructor(
    public id: number,
    public name: string) { console.log('ABCfoo');}
} 

@Injectable()
export class AppService {
   public clientId = 'fooClientIdPassword';
   public redirectUri = 'http://localhost:4200/';

  constructor(
    private _http: HttpClient){console.log('ABCcon');}

  retrieveToken(code){
    console.log('ABCretrieveToken');
    let params = new URLSearchParams();   
    params.append('grant_type','authorization_code');
    params.append('client_id', this.clientId);
    params.append('redirect_uri', this.redirectUri);
    params.append('code',code);

    let headers = new HttpHeaders({'Content-type': 'application/x-www-form-urlencoded; charset=utf-8', 'Authorization': 'Basic '+btoa(this.clientId+":secret")});
     this._http.post('http://localhost:8081/spring-security-oauth-server/oauth/token', params.toString(), { headers: headers })
    .subscribe(
      data => this.saveToken(data),
      err => alert('Invalid Credentials')
    ); 
  }

  saveToken(token){
    console.log('ABCsaveToken');
    var expireDate = new Date().getTime() + (1000 * token.expires_in);
    Cookie.set("access_token", token.access_token, expireDate);
    console.log('Obtained Access token');
    window.location.href = 'http://localhost:4200';
  }

  getResource(resourceUrl) : Observable<any>{
    console.log('ABCgetResource');
    var headers = new HttpHeaders({'Content-type': 'application/x-www-form-urlencoded; charset=utf-8', 'Authorization': 'Bearer '+Cookie.get('access_token')});
    return this._http.get(resourceUrl, { headers: headers })
                   .catch((error:any) => Observable.throw(error.json().error || 'Server error'));
  }

  checkCredentials(){
    console.log('ABCcheckCredentials');
    return Cookie.check('access_token');
  } 

  logout() {
    console.log('ABCel');
    Cookie.delete('access_token');
    window.location.reload();
  }
}

No logs are written and also ng serve works without errors or logs. I also tried to remove all code from the methods (except from the getResource). How can I figure out what the error is?

EDIT:

The firefox console shows:

ERROR Error: "Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[AppService -> HttpClient]: 
  StaticInjectorError(Platform: core)[AppService -> HttpClient]: 
    NullInjectorError: No provider for HttpClient!
get@http://localhost:4200/vendor.js:38925:27
resolveToken@http://localhost:4200/vendor.js:39252:24
tryResolveToken@http://localhost:4200/vendor.js:39178:16
get@http://localhost:4200/vendor.js:39041:20
resolveToken@http://localhost:4200/vendor.js:39252:24
tryResolveToken@http://localhost:4200/vendor.js:39178:16
get@http://localhost:4200/vendor.js:39041:20
resolveNgModuleDep@http://localhost:4200/vendor.js:60689:29
get@http://localhost:4200/vendor.js:61777:16
resolveDep@http://localhost:4200/vendor.js:62307:45
createClass@http://localhost:4200/vendor.js:62151:29
_createProviderInstance$1@http://localhost:4200/vendor.js:62127:20
createProviderInstance@http://localhost:4200/vendor.js:61940:12
createViewNodes@http://localhost:4200/vendor.js:72562:38
createRootView@http://localhost:4200/vendor.js:72449:5
callWithDebugContext@http://localhost:4200/vendor.js:73978:27
debugCreateRootView@http://localhost:4200/vendor.js:73215:12
create@http://localhost:4200/vendor.js:61113:31
create@http://localhost:4200/vendor.js:57120:29
createComponent@http://localhost:4200/vendor.js:61269:47
activateWith@http://localhost:4200/vendor.js:86384:40
activateRoutes@http://localhost:4200/vendor.js:82301:40
activateChildRoutes/<@http://localhost:4200/vendor.js:82238:18
activateChildRoutes@http://localhost:4200/vendor.js:82233:29
activate@http://localhost:4200/vendor.js:82096:14
activateRoutes/<@http://localhost:4200/vendor.js:82069:10
_next@http://localhost:4200/vendor.js:98591:35
next@http://localhost:4200/vendor.js:93868:18
_next@http://localhost:4200/vendor.js:100971:26
next@http://localhost:4200/vendor.js:93868:18
_next@http://localhost:4200/vendor.js:98597:26
next@http://localhost:4200/vendor.js:93868:18
notifyNext@http://localhost:4200/vendor.js:100647:26
_next@http://localhost:4200/vendor.js:93163:21
next@http://localhost:4200/vendor.js:93868:18
_next@http://localhost:4200/vendor.js:98597:26
next@http://localhost:4200/vendor.js:93868:18
scalar/result<@http://localhost:4200/vendor.js:95839:20
_trySubscribe@http://localhost:4200/vendor.js:93324:25
subscribe@http://localhost:4200/vendor.js:93310:22
call@http://localhost:4200/vendor.js:98578:23
subscribe@http://localhost:4200/vendor.js:93305:31
subscribeTo/<@http://localhost:4200/vendor.js:103220:31
subscribeToResult@http://localhost:4200/vendor.js:103376:84
_innerSub@http://localhost:4200/vendor.js:100626:115
_next@http://localhost:4200/vendor.js:100616:14
next@http://localhost:4200/vendor.js:93868:18
notifyNext@http://localhost:4200/vendor.js:100647:26
_next@http://localhost:4200/vendor.js:93163:21
next@http://localhost:4200/vendor.js:93868:18
_next@http://localhost:4200/vendor.js:98597:26
next@http://localhost:4200/vendor.js:93868:18
_next@http://localhost:4200/vendor.js:100971:26
next@http://localhost:4200/vendor.js:93868:18
notifyNext@http://localhost:4200/vendor.js:98833:26
_next@http://localhost:4200/vendor.js:93163:21
next@http://localhost:4200/vendor.js:93868:18
_next@http://localhost:4200/vendor.js:98597:26
next@http://localhost:4200/vendor.js:93868:18
_complete@http://localhost:4200/vendor.js:100796:29
complete@http://localhost:4200/vendor.js:93880:18
_complete@http://localhost:4200/vendor.js:93898:26
complete@http://localhost:4200/vendor.js:93880:18
_complete@http://localhost:4200/vendor.js:98828:30
complete@http://localhost:4200/vendor.js:93880:18
subscribeToArray/<@http://localhost:4200/vendor.js:103262:20
_trySubscribe@http://localhost:4200/vendor.js:93324:25
subscribe@http://localhost:4200/vendor.js:93310:22
call@http://localhost:4200/vendor.js:98785:23
subscribe@http://localhost:4200/vendor.js:93305:31
call@http://localhost:4200/vendor.js:99937:23
subscribe@http://localhost:4200/vendor.js:93305:31
call@http://localhost:4200/vendor.js:100766:23
subscribe@http://localhost:4200/vendor.js:93305:31
call@http://localhost:4200/vendor.js:98578:23
subscribe@http://localhost:4200/vendor.js:93305:31
subscribeTo/<@http://localhost:4200/vendor.js:103220:31
subscribeToResult@http://localhost:4200/vendor.js:103376:84
_innerSub@http://localhost:4200/vendor.js:98823:90
_tryNext@http://localhost:4200/vendor.js:98817:14
_next@http://localhost:4200/vendor.js:98800:18
next@http://localhost:4200/vendor.js:93868:18
_next@http://localhost:4200/vendor.js:100971:26
next@http://localhost:4200/vendor.js:93868:18
scalar/result<@http://localhost:4200/vendor.js:95839:20
_trySubscribe@http://localhost:4200/vendor.js:93324:25
subscribe@http://localhost:4200/vendor.js:93310:22
call@http://localhost:4200/vendor.js:100941:23
subscribe@http://localhost:4200/vendor.js:93305:31
call@http://localhost:4200/vendor.js:98785:23
subscribe@http://localhost:4200/vendor.js:93305:31
call@http://localhost:4200/vendor.js:100941:23
subscribe@http://localhost:4200/vendor.js:93305:31
call@http://localhost:4200/vendor.js:98578:23
subscribe@http://localhost:4200/vendor.js:93305:31
subscribeTo/<@http://localhost:4200/vendor.js:103220:31
subscribeToResult@http://localhost:4200/vendor.js:103376:84
_innerSub@http://localhost:4200/vendor.js:100626:115
_next@http://localhost:4200/vendor.js:100616:14
next@http://localhost:4200/vendor.js:93868:18
_next@http://localhost:4200/vendor.js:98110:30
next@http://localhost:4200/vendor.js:93868:18
_next@http://localhost:4200/vendor.js:100971:26
next@http://localhost:4200/vendor.js:93868:18
_next@http://localhost:4200/vendor.js:100971:26
next@http://localhost:4200/vendor.js:93868:18
notifyNext@http://localhost:4200/vendor.js:98833:26
_next@http://localhost:4200/vendor.js:93163:21
next@http://localhost:4200/vendor.js:93868:18
_next@http://localhost:4200/vendor.js:98597:26
next@http://localhost:4200/vendor.js:93868:18
notifyNext@http://localhost:4200/vendor.js:98833:26
_next@http://localhost:4200/vendor.js:93163:21
next@http://localhost:4200/vendor.js:93868:18
_complete@http://localhost:4200/vendor.js:97239:30
complete@http://localhost:4200/vendor.js:93880:18
_complete@http://localhost:4200/vendor.js:93898:26
complete@http://localhost:4200/vendor.js:93880:18
_complete@http://localhost:4200/vendor.js:93898:26
complete@http://localhost:4200/vendor.js:93880:18
_complete@http://localhost:4200/vendor.js:98828:30
complete@http://localhost:4200/vendor.js:93880:18
subscribeToArray/<@http://localhost:4200/vendor.js:103262:20
_trySubscribe@http://localhost:4200/vendor.js:93324:25
subscribe@http://localhost:4200/vendor.js:93310:22
call@http://localhost:4200/vendor.js:98785:23
subscribe@http://localhost:4200/vendor.js:93305:31
"
    Angular 11
core.js:7187:19
    Angular 4
    RxJS 5
    Angular 13

Are you sure there's no error in browser? And have you provided AppService in any module? — Akshay Rana, Jul 26 '19 at 16:25
I added " providers: [AppService]," in the app.module.ts (+ the import) ; see also my edit above — Sarah Smith, Jul 26 '19 at 16:46
I found it: https://stackoverflow.com/questions/47236963/no-provider-for-httpclient — Sarah Smith, Jul 26 '19 at 16:49
And you don't have @Component({}) decorator on your component. — Akshay Rana, Jul 26 '19 at 16:54

bryan60 · Answer 1 · 2019-07-26T16:58:13.987

0

you need to add @Component() decorator:

@Component({... options... })
export class PaketeComponent {
  /*...*/

  constructor( private _service:AppService){      console.log('ABCconstructorPaket');}
  /*...*/
}

and all services need to be provided correctly. @Component() inherits from @Injectable() and really means "things can be injected into this", not "this can be injected into things"

for whoever apparently downvoted and doesn't believe me, behold: https://stackblitz.com/edit/angular-xmlsn9?file=src/app/app.component.ts

based on edits / new error message, issue is also not importing HttpClientModule, but this answer is still true as well if the @Component() decorator wasn't there.

edited Jul 26 '19 at 16:58

answered Jul 26 '19 at 16:42

bryan60

28,215
4
48
65

@Injectable() really means "things can be injected into this", not "this can be injected into things": This statement is completely wrong. And you never add Injectable to Components, @Component does that – Akshay Rana Jul 26 '19 at 16:52
@Akshay Rana you should probably look at mystackblitz before you talk about things you don't know about... injectable isn't needed on components, as Component inherits from Injectable... the way the question was phrased I didn't realize it was component, I thought it was another service without a decorator as the decorator was not included in the question – bryan60 Jul 26 '19 at 16:52

score 0 · Answer 2 · answered Jul 26 '19 at 16:48

0

You dont have HttpClientModule in AppModule, and hence no instance of HttpClient.

Add HttpClientModule to your imports array of AppModule.

@NgModule({
imports: [
    HttpClientModule 
],
...})

answered Jul 26 '19 at 16:48

Akshay Rana

1,455
11
20

Construtor-Param leads to error -> Which error?

2 Answers2