I created an Angular Application using the Visual Studio Template.
The structure of the application is as follows:
- /Clientapp
- ./app/app.module.shared.ts
- ./app/app.module.client.ts
- ./app/app.module.server.ts
- ./components/*
- ./services/person-data.service.ts
- ./services/auth-http.service.ts
- ./boot-client.ts
- ./boot-server.ts
In the person-data.service.ts file, I want to utilize the auth-http.service.ts.
person-data.service.ts
import { Person } from '../models/person'
import { Configuration } from '../constants/global.constants';
import { Injectable, Inject } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { AuthHttpService } from '../services/auth-http.service';
@Injectable()
export class PersonService {
constructor(private http: Http, @Inject(AuthHttpService)private authHttp: AuthHttpService) {
this.actionUrl = Configuration.API_SERVER + 'api/person/';
this.headers = new Headers();
this.headers.append('Content-Type', 'application/json');
this.headers.append('Accept', 'application/json');
}
public GetAll = (): Observable<Person[]> => {
return this.authHttp.get(this.actionUrl).map((response: Response) => <Person[]>response.json());
}
}
auth-http.service.ts
import { Injectable, Inject } from '@angular/core';
import { Http, Response, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { AuthService } from './auth.service';
@Injectable()
export class AuthHttpService {
constructor(private http: Http, @Inject(AuthService) private authService: AuthService) {
}
get(url: string, options?: RequestOptions): Observable<Response> {
console.log("AuthHttpService Get:" + url);
if (options) {
options = this.authService._setRequestOptions(options);
} else {
options = this.authService._setRequestOptions();
}
return this.http.get(url, options);
}
}
app.module.shared.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { PersonService } from './services/person-data.service'
import { Configuration } from './constants/global.constants'
import { AuthService } from './services/auth.service'
import { AuthHttpService } from './services/auth-http.service'
import { AppComponent } from './components/app/app.component'
export const sharedConfig: NgModule = {
bootstrap: [AppComponent],
declarations: [
AppComponent
],
providers: [
AuthHttpService,
Configuration,
PersonService,
AuthService
],
imports: [
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: '**', redirectTo: 'home' }
])
]
};
app.module.client.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { sharedConfig } from './app.module.shared';
@NgModule({
bootstrap: sharedConfig.bootstrap,
declarations: sharedConfig.declarations,
imports: [
BrowserModule,
FormsModule,
HttpModule,
BrowserAnimationsModule,
...sharedConfig.imports
],
providers: [
{ provide: 'ORIGIN_URL', useValue: location.origin }
]
})
export class AppModule {
}
Upon running the application, I encountered the following error message:
An unhandled exception occurred while processing the request. Exception: Call to Node module failed with error: Error: No provider for AuthHttpService!
What could be causing this issue?