After upgrading my Angular2 project from Beta .21 to beta .25.5, which was functioning smoothly, I resolved all errors for both AOT and non-AOT (e.g. ng serve) functionalities.
However, upon browser loading, I encountered an error affecting multiple services at runtime, displaying:
Can't resolve all parameters for *servicename*: (?)
Initially, I eliminated circular dependencies and removed the barrel I was utilizing. Subsequently, I relocated all services to the Providers array in App.module and verified the presence of @Injectable() in all services.
The sole solution to eliminate the error was employing the Inject() method, like so:
import { Injectable, Optional, SkipSelf, Inject } from '@angular/core';
import { Subject } from 'rxjs/Subject';
export interface SpinnerState {
show: boolean;
}
@Injectable()
export class SpinnerService {
private spinnerSubject = new Subject<SpinnerState>();
spinnerState = this.spinnerSubject.asObservable();
constructor( @Optional() @SkipSelf() @Inject(SpinnerService) prior: SpinnerService) {
Although this step fixed the initial errors, a subsequent error surfaced regarding a 3rd party library. How can I effectively troubleshoot to pinpoint the root cause?
Regards
"
nativeError : Error: Can't resolve all parameters for Logger: (?). at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:134335:27) [<rThis represents the structure of my App.Module:
providers: [
{
provide: AuthHttp,
useFactory: authHttpServiceFactory,
deps: [Http, RequestOptions],
},
[Logger],
LoggerService,
SpinnerService,
DataBreezeService,
ProfileService,
AuthService,
AuthGuardService,
CanDeactivateGuardService,
Additionally, the following configurations are also in place:
{
"emitDecoratorMetadata": true,
"experimentalDecorators": true
}
(It's worth mentioning that my project was fully operational before the upgrade, with no apparent issues noted in the release notes).
UPDATE As I continued troubleshooting by commenting out problematic services and eliminating constructor parameters, the error persisted in moving to the next service - indicating a higher-level issue. Furthermore, I started encountering 404 errors on components, for example:
https://i.sstatic.net/SOwiA.png
Despite numerous attempts to rectify the situation, including the addition of "moduleId: 'module.id', ", the 404 error on the Subscribe component remained:
import { Component } from '@angular/core';
@Component({
selector: 'app-subscribe',
templateUrl: './subscribe.component.html',
styleUrls: ['./subscribe.component.scss']
})
export class SubscribeComponent {
constructor() { }
}
GET http://localhost:4200/subscribe.component.html 404 (Not Found)