Angular 6：有多个模块，其名称仅大小写不同

Question

运行 ngserve 时出现以下错误，我刚刚创建了新服务，它工作正常，但突然一切都停止了:(，\n我尝试了一切，但无法完成工作，谷歌也没有帮助:(

\n\n

WARNING in ./src/app/Booking.service.ts\nThere are multiple modules with names that only differ in casing.\nThis can lead to unexpected behavior when compiling on a filesystem with other case-semantic.\nUse equal casing. Compare these module identifiers:\n* 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\n    Used by 2 module(s), i. e.\n    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\n* 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\n    Used by 2 module(s), i. e.\n    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\ni \xef\xbd\xa2wdm\xef\xbd\xa3: Compiled with warnings.\n

\n\n

这是我的应用程序模块

\n\n

import { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { JsonpModule } from '@angular/http';\nimport { RouterModule } from '@angular/router';\nimport { AppComponent } from './app.component';\nimport { HttpClientModule } from '@angular/common/http';\nimport { FlashMessagesModule } from 'angular2-flash-messages';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { AboutComponent } from './about/about.component';\nimport {CalendarModule} from 'primeng/calendar';\nimport { BookingService } from './booking.service';\n@NgModule({\n  declarations: [\n    AppComponent,\n    AboutComponent\n  ],\n  imports: [\n    BrowserModule,\n    JsonpModule,\n    CalendarModule,\n    ReactiveFormsModule,\n    FormsModule,\n    HttpClientModule,\n    FlashMessagesModule.forRoot(),\n    RouterModule.forRoot([\n      { path: 'about', component: AboutComponent }\n    ]),\n  ],\n  providers: [BookingService],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n

\n\n

这是我的预订服务。ts

\n\n

import { Injectable } from '@angular/core';\nimport { Response } from '@angular/http';\nimport { catchError, map } from 'rxjs/operators';\nimport { Observable, throwError } from 'rxjs';\nimport { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';\n\nconst httpOptions = {\n  headers: new HttpHeaders({ 'Content-Type': 'application/json' })\n};\nconst apiUrl = 'http://localhost:8000/booking';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class BookingService {\n  bookingsUrl = '/booking';\n  addBookingsUrl = '/bookings';\n  constructor(private http: HttpClient) { }\n  // function to extract data from rensponse\n  private extractData(res: Response) {\n    // tslint:disable-next-line:prefer-const\n    let body = res;\n    return body || {};\n  }\n\n  // Return Booking\n  getBookings(id: string): Observable<any> {\n    const url = `${apiUrl + this.bookingsUrl}/${id}`;\n    return this.http.get(url, httpOptions).pipe(\n      map(this.extractData),\n      catchError(this.handleError));\n  }\n  // Adds Booking\n  addBooking(date, email, city, hotel): Observable<any> {\n    const uri = `${apiUrl + this.addBookingsUrl}`;\n    const obj = {\n      date: date,\n      email: email,\n      city: city,\n      hotel: hotel\n\n    };\n    return this.http.post(uri, obj);\n  }\n  // Errors Handler\n  private handleError(error: HttpErrorResponse) {\n    if (error.error instanceof ErrorEvent) {\n      // A client-side or network error occurred. Handle it accordingly.\n      console.error('An error occurred:', error.error.message);\n    } else {\n      // The backend returned an unsuccessful response code.\n      // The response body may contain clues as to what went wrong,\n      console.error(\n        `Backend returned code ${error.status}, ` +\n        `body was: ${error.error}`);\n    }\n    // return an observable with a user-facing error message\n    return throwError('Something bad happened; please try again later.');\n  }\n}\n

\n\n

我的代码有什么问题吗？任何想法或建议将不胜感激，谢谢

\n

Answer 1

这通常是由于微小的拼写错误造成的。

检查所有组件、服务、模块，如果您像导入一样导入'smallcase'

在你的情况下，你还没有导入Rxjs

import { Observable } from 'Rxjs/Observable';