After running ng serve, I encountered an error that has me stumped. Everything was working fine with the new service I created until suddenly it all crashed :( I tried troubleshooting everything possible but to no avail. Even Google didn't provide any solutions :(
WARNING in ./src/app/Booking.service.ts
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* C:\Users\Bonge\Documents\Projects\bookingapp\booking-client\node_modules\@ngtools\webpack\src\index.js!C:\Users\Bonge\Documents\Projects\bookingapp\booking-client\src\app\Booking.service.ts
Used by 2 module(s), i.e.
C:\Users\Bonge\Documents\Projects\bookingapp\booking-client\node_modules\@ngtools\webpack\src\index.js!C:\Users\Bonge\Documents\Projects\bookingapp\booking-client\src\app\about\about.component.ts
* C:\Users\Bonge\Documents\Projects\bookingapp\booking-client\node_modules\@ngtools\webpack\src\index.js!C:\Users\Bonge\Documents\Projects\bookingapp\booking-client\src\app\booking.service.ts
Used by 2 module(s), i.e.
C:\Users\Bonge\Documents\Projects\bookingapp\booking-client\node_modules\@ngtools\webpack\src\index.js!C:\Users\Bonge\Documents\Projects\bookingapp\booking-client\src\app\app.module.ts
i ™wdm™: Compiled with warnings.
Below is my app.module:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { JsonpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { FlashMessagesModule } from 'angular2-flash-messages';
import { ReactiveFormsModule } from '@angular/forms';
import { AboutComponent } from './about/about.component';
import {CalendarModule} from 'primeng/calendar';
import { BookingService } from './booking.service';
@NgModule({
declarations: [
AppComponent,
AboutComponent
],
imports: [
BrowserModule,
JsonpModule,
CalendarModule,
ReactiveFormsModule,
FormsModule,
HttpClientModule,
FlashMessagesModule.forRoot(),
RouterModule.forRoot([
{ path: 'about', component: AboutComponent }
]),
],
providers: [BookingService],
bootstrap: [AppComponent]
})
export class AppModule { }
And here is my booking service.ts:
import { Injectable } from '@angular/core';
import { Response } from '@angular/http';
import { catchError, map } from 'rxjs/operators';
import { Observable, throwError } from 'rxjs';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
const apiUrl = 'http://localhost:8000/booking';
@Injectable({
providedIn: 'root'
})
export class BookingService {
bookingsUrl = '/booking';
addBookingsUrl = '/bookings';
constructor(private http: HttpClient) { }
// function to extract data from response
private extractData(res: Response) {
let body = res;
return body || {};
}
// Return Booking
getBookings(id: string): Observable<any> {
const url = `${apiUrl + this.bookingsUrl}/${id}`;
return this.http.get(url, httpOptions).pipe(
map(this.extractData),
catchError(this.handleError));
}
// Adds Booking
addBooking(date, email, city, hotel): Observable<any> {
const uri = `${apiUrl + this.addBookingsUrl}`;
const obj = {
date: date,
email: email,
city: city,
hotel: hotel
};
return this.http.post(uri, obj);
}
// Errors Handler
private handleError(error: HttpErrorResponse) {
if (error.error instanceof ErrorEvent) {
console.error('An error occurred:', error.error.message);
} else {
console.error(
`Backend returned code ${error.status}, ` +
`body was: ${error.error}`);
}
return throwError('Something bad happened; please try again later.');
}
}
Can anyone offer insights or suggestions on what might be wrong with my codes? Any help would be greatly appreciated. Thank you.