I am currently working on the front end of a file uploading service and have encountered a strange issue. When I restart the server using ng serve, it throws an error related to generated components within the app component. The error message can be seen here: https://i.sstatic.net/0wFHJ.png
The workaround I have found is to temporarily remove the injection of my uploader service, save the file, and then re-insert the injection as shown in this image: https://i.sstatic.net/BoVYB.png
To resolve the ng serve error, I must delete the line private service: UploaderService
Do you have any insights into why this behavior is occurring? Could there be an issue with my injection process? My UploaderService is marked as Injectable() and the components utilizing it are under Directives.
Update: Upon further investigation, I discovered that the issue is not directly related to the UploaderService. Even a component without injecting the UploaderService faces a similar problem. The solution remains consistent - removing constructor parameters, saving, and then reintroducing the parameters for successful serving.
Update2: There seems to be an error in the spec file for the generated component upload.component.t, titled upload.component.spec.ts
The error demands parameters as highlighted here: https://i.sstatic.net/EPZPg.png
While my UploadComponent constructor includes a parameter for injecting the UploaderService, the new UploadComponent created in the spec.ts file lacks arguments. It appears to be the root cause of the issue. How can I address this?
Below is the code snippet for my UploaderService:
import { Injectable } from '@angular/core';
import {Http, Response, HTTP_PROVIDERS, Headers, HTTP_BINDINGS, RequestOptions} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
import { ItemEntryComponent } from './item-entry';
import { Query } from './Query';
@Injectable()
export class UploaderService {
public URL: string;
private query: Query;
public filesSelected: Array<ItemEntryComponent> = [];
progress$: any;
progress: any;
progressObserver: any;
//CONSTRUCTOR
constructor(private http: Http) {
//***SET URL***
this.URL = 'http://localhost:7547/api/picker';
//Create Query for url
this.query = new Query(this.URL);
//Create progress attribute
this.progress$ = Observable.create(observer => {
this.progressObserver = observer
}).share();
}
}