In Beta, my bootstrapping code was running smoothly as shown below:
bootstrap(App, [
provide(Http, {
useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, helperService: HelperService, authProvider: AuthProvider) => new CustomHttp(backend, defaultOptions, helperService, authProvider),
deps: [XHRBackend, RequestOptions, HelperService, AuthProvider]
}),
provide(LocationStrategy, { useClass: HashLocationStrategy }),
provide("AppContext", { useValue: appContext }),
provide("ClientService", { useValue: clientService }),
AgendaService,
ConfirmationService,
HelperService
]).then((success: any) => {
console.log("Bootstrap successful");
}, (error: any) => console.error(error));
However, after updating to RC4, I had to make the following changes:
bootstrap(App, [
provide(Http, {
useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, helperService: HelperService, authProvider: AuthProvider) => new CustomHttp(backend, defaultOptions, helperService, authProvider),
deps: [XHRBackend, RequestOptions, HelperService, AuthProvider]
}),
provide(LocationStrategy, { useClass: HashLocationStrategy }),
provide("AppContext", { useValue: appContext }),
provide("ClientService", { useValue: clientService }),
provide("AgendaService", { useClass: AgendaService }),
provide("ConfirmationService", { useClass: ConfirmationService }),
provide("HelperService", { useClass: HelperService })
]).then((success: any) => {
console.log("Bootstrap successful");
}, (error: any) => console.error(error));
This required me to utilize provide() for each service and apply Inject() in the components where these services are used. Otherwise, I encountered a NoProviderError with the message No provider for xxx.service. Is this common or am I making mistakes?
The solution that worked for me is outlined below:
bootstrap(App, [
{ provide: LocationStrategy, useClass: HashLocationStrategy },
{ provide: "AppContext", useValue: appContext },
{ provide: "ClientService", useValue: clientService },
{ provide: "AgendaService" useClass: AgendaService },
{ provide: "ConfirmationService" useClass: ConfirmationService },
{ provide: "HelperService" useClass: HelperService }
]).then((success: any) => {
console.log("Bootstrap successful");
}, (error: any) => console.error(error));
To access these services, @Inject must be used wherever they are needed:
constructor(@Inject("HelperService") private helperService: HelperService){
}Any alternative method resulted in errors similar to those previously experienced.
NOTE: For certain services, I opted for useValue instead of useClass because I instantiate them manually based on specific conditions before Angular boots up, just above the bootstrap().