While working on a program that I am facing an issue with, constructor and its dependency injection from its child class.
constructor(private url: string, private http: Http) { }
constructor(http: Http) {
super('https://jsonplaceholder.typicode.com/posts', http);
}
Before this re-factoring (moving all the common CRUD operation and extending it by child classes) my code was working as expected but AFTER the above changes I am getting the below error:
Date: 2020-03-22T15:26:23.248Z - Hash: 7130497a38c152c58258
5 unchanged chunks
Time: 1859ms
ERROR in src/app/services/data.service.ts:14:23 - error NG2003: No suitable injection token for parameter 'url' of class 'DataService'.
Found string
14 constructor(private url: string, private http: Http) { }
Also, when I remove the url param from Datsource constructor (modify PostService.ts accordingly) the api is working as expected. Not sure why !!!
I am using:
Angular CLI: 9.0.4 Node: 12.16.1 OS: win32 x64
Angular: ... Ivy Workspace:
@angular-devkit/architect 0.900.4
@angular-devkit/core 9.0.4
@angular-devkit/schematics 9.0.4
@schematics/angular 9.0.4
@schematics/update 0.900.4
rxjs 6.5.3
DataService.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { AppError } from '../common/app-error';
import { NotFoundError } from '../common/not-found-error';
import { BadInput } from '../common/bad-input';
@Injectable()
export class DataService {
// private url = 'https://jsonplaceholder.typicode.com/posts';
constructor(private url: string, private http: Http) { }
getAll() {
return this.http.get(this.url).pipe(catchError(this.errorHandle));
}
create(resource) {
return this.http.post(this.url, JSON.stringify(resource))
.pipe(catchError(this.errorHandle));
}
update(resource) {
return this.http.patch(this.url + '/' + resource.id, JSON.stringify({ isRead: true }))
.pipe(catchError(this.errorHandle));
}
delete(resource) {
return this.http.delete(this.url + '/' + resource.id)
.pipe(catchError(this.errorHandle));
}
private errorHandle(error: Response){
if (error.status === 404) {
return throwError(new NotFoundError());
}
if (error.status === 400) {
return throwError(new BadInput(error.json()));
}
return throwError(new AppError(error));
}
}
PostService.ts
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { DataService } from './data.service';
@Injectable()
export class PostService extends DataService {
constructor(http: Http) {
super('https://jsonplaceholder.typicode.com/posts', http);
}
}
remove @Injectable() from DataService.ts
As I encounter with same error myself, with same notation I believe you've watched 'Mosh' angular course which was belong to version 4.
There were several changes since then, one of them is replacing Http with HttpClient, another one was huge changes in rxjs library, needless to say same happened for services .Now instead of putting your services in providers you use @Injectable method which I think is more cleaner and more related to the service itself.
However if you had close attention to implementation you'll notice that DataService is just a base class and it would never be use as a service itself.It's like a manifest.So, it does not need to be injected or provided in app module. If you can recall 'Mosh' never did provide it in App module.The only service that was provided was PostService. That's why you should remove @Injectable decoration from DataService.
In DataService.ts :
Update the Constructor .
//import { Inject } from '@angular/core';
constructor(@Inject(String) private url: string, private http: Http)
UPDATED (Explanation):
According to https://angular-2-training-book.rangle.io/di/angular2/inject_and_injectable ;
@Inject() is a manual mechanism for letting Angular know that a parameter must be injected.
@Inject decorator is only needed for injecting primitives.
The primitive types are number, string, boolean, bigint, symbol, null, undefined .
The other (alternative) way can be used is:
//import { Inject } from '@angular/core';
@Inject('url') private url: string;