Question

当运行ng serve遇到以下错误时，我刚刚创建了新服务，它工作正常，但突然一切都停止了:(，我尝试了一切，但无法完成工作，谷歌也没有帮助：（

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.

这是我的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 { }

这是我的预订服务。

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 rensponse
  private extractData(res: Response) {
    // tslint:disable-next-line:prefer-const
    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) {
      // A client-side or network error occurred. Handle it accordingly.
      console.error('An error occurred:', error.error.message);
    } else {
      // The backend returned an unsuccessful response code.
      // The response body may contain clues as to what went wrong,
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
    // return an observable with a user-facing error message
    return throwError('Something bad happened; please try again later.');
  }
}

我的代码有什么问题？任何想法或建议都会被理解，谢谢

Answer 1

这通常是微小的错字造成的。

检查所有组件，服务，模块，如果要像导入 'smallcase'

那样进行导入

您尚未导入 Rxjs

import { Observable } from 'Rxjs/Observable';

Answer 2

您未正确导入rxjs包，因此无法更改代码，

import { Injectable } from '@angular/core';
import { Response } from '@angular/http';
import { map } from 'rxjs/operators/map';
import { Observable } from 'Rxjs/Observable';
import { catchError,throwError  } from 'rxjs/operators';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';

Answer 3

在我的情况下，问题是我将文件名大写，而我不应该在其中一个导入中输入

我用过

import { AuthService } from '../../Services/Auth.service';

代替

import { AuthService } from '../../Services/auth.service';

身份验证与身份验证

角度6：有多个模块的名称仅在大小写上有所不同

3 个答案: