javascript - Angular 6: There are multiple modules with names that only differ in casing - Stack Overflow

admin管理员组

文章数量:1304098

when running ng serve am getting the following error, I just created new service , it was working okay but suddenly everything is down :(, I tried veverything but I couldnt get the job done, google also didnt help :(

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 piling 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\aboutponent.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.

here 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 './appponent';
import { HttpClientModule } from '@angular/mon/http';
import { FlashMessagesModule } from 'angular2-flash-messages';
import { ReactiveFormsModule } from '@angular/forms';
import { AboutComponent } from './about/aboutponent';
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', ponent: 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/mon/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.');
  }
}

what is wrong with my codes? any idea or suggestion will be apreciated , thanks

when running ng serve am getting the following error, I just created new service , it was working okay but suddenly everything is down :(, I tried veverything but I couldnt get the job done, google also didnt help :(

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 piling 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.ponent.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.

here 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.ponent';
import { HttpClientModule } from '@angular/mon/http';
import { FlashMessagesModule } from 'angular2-flash-messages';
import { ReactiveFormsModule } from '@angular/forms';
import { AboutComponent } from './about/about.ponent';
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', ponent: 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/mon/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.');
  }
}

what is wrong with my codes? any idea or suggestion will be apreciated , thanks

• javascript
• angular
• typescript
• webpack

Share Improve this question Follow asked Jul 8, 2018 at 4:49 The Dead ManThe Dead Man 5,5763232 gold badges125125 silver badges226226 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

This is usually a result of a minuscule typo.

Check all your ponents,services,modules, If you are importing like import 'smallcase'

In your case you have not imported Rxjs

import { Observable } from 'Rxjs/Observable';

You are not importing rxjs packages properly change your code like this it will work

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/mon/http';

In my case the issue was that i capitalized the name of a file where i shouldn't in one of my imports

I used

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

instead of

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

Auth vs auth

本文标签： javascriptAngular 6 There are multiple modules with names that only differ in casingStack Overflow