问题
I know this question is posted earlier also but checking each of them meticulously and checking from Github too, I found even the pattern is same but the reason of this problem is different every-time. I tried to match those scenarios and applied same solutions but nothing helped. That's why I am posting this. I am using angular version 9. The warning I am getting is,
WARNING in ./node_modules/@Angular/common/__ivy_ngcc__/fesm2015/http.js
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:
* <my-project-path>\node_modules\@Angular\common\__ivy_ngcc__\fesm2015\http.js
Used by 3 module(s), i. e.
<my-project-path>\node_modules\@ngtools\webpack\src\index.js!<my-project-path>\src\app\login.service.ts
* <my-project-path>\node_modules\@angular\common\__ivy_ngcc__\fesm2015\http.js
Used by 4 module(s), i. e.
<my-project-path>\node_modules\@ngtools\webpack\src\index.js!<my-project-path>\src\app\app.module.ts
I checked all the spelling for case but nothing different I found. Another project that I successfully executed with "rxjs" and "HttpClient" , I tried to copy the "\fesm2015\http.js" from there and execute but nothing helped.
I found in my service the line,
constructor(private http:HttpClient) { }
is creating problem. But I properly declared the relevant module for this,
import {HttpClient,HttpErrorResponse} from '@Angular/common/http';
but no luck ! Any help to solve this is much appreciated. Here is the package I'm using.
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.900.7
@angular-devkit/build-angular 0.900.7
@angular-devkit/build-optimizer 0.900.7
@angular-devkit/build-webpack 0.900.7
@angular-devkit/core 9.0.7
@angular-devkit/schematics 9.0.7
@ngtools/webpack 9.0.7
@schematics/angular 9.0.7
@schematics/update 0.900.7
rxjs 6.5.4
typescript 3.7.5
webpack 4.41.2
Here is my app.module.ts file. I know , I should use separate modules for different features but I'm a new learner and still finding my way to separate the features. But I would eventually do this.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { WelcomeComponent } from './home/welcome.component';
import { ActivityComponent } from './shared_component/activitiy-progress.component';
import { SmartWatchComponent } from './smart-watch/smart-watch.component';
import { SmartPhoneComponent } from './smart-phone/smart-phone.component';
import { SmartPhoneMenuComponent } from './smart-phone-menu/smart-phone-menu.component';
import { GameStartComponent } from './game-start/game-start.component';
import { UserLoginComponent } from './user-login/user-login.component';
import { PageNotfoundComponent } from './page-notfound/page-notfound.component';
import { ResetPasswordComponent } from './reset-password/reset-password.component';
import { UserSignupComponent } from './user-signup/user-signup.component';
import { UserCalendarComponent } from './user-calendar/user-calendar.component';
import { UserNewsComponent } from './user-news/user-news.component';
import { UserStorageComponent } from './user-storage/user-storage.component';
import { TodoListComponent } from './todo-list/todo-list.component';
@NgModule({
declarations: [
AppComponent,
WelcomeComponent,
ActivityComponent,
SmartWatchComponent,
SmartPhoneComponent,
SmartPhoneMenuComponent,
GameStartComponent,
UserLoginComponent,
PageNotfoundComponent,
ResetPasswordComponent,
UserSignupComponent,
UserCalendarComponent,
UserNewsComponent,
UserStorageComponent,
TodoListComponent
],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
RouterModule.forRoot([
{path:'login',component: UserLoginComponent},
{path:'signup',component: UserSignupComponent},
{path:'welcome',component: WelcomeComponent},
{path:'calendar',component: UserCalendarComponent},
{path: 'news',component:UserNewsComponent},
{path: 'storage',component:UserStorageComponent},
{path: 'todo-list',component:TodoListComponent},
{path:'',redirectTo:'login',pathMatch:'full'},
{path : 'smartPhone-menu',component:SmartPhoneMenuComponent},
{path : 'game-start',component :GameStartComponent},
{path:'reset-password',component: ResetPasswordComponent},
{path : '**',component : PageNotfoundComponent}
/*{path:'**',redirectTo:'welcome', pathMatch: 'full'}*/
])
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Here is my login service that is creating problem,
import { Injectable } from '@angular/core';
import {HttpClient,HttpErrorResponse} from '@Angular/common/http';
import { Observable, throwError } from 'rxjs';
import{map,catchError} from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class LoginService {
private loginUrl : string;
constructor(private http:HttpClient) { }
getCurrentUserInfo(loginInfo :any) : Observable<any>{
this.loginUrl = `myprojecturl?userNumber=${loginInfo.id}`;
console.log("this.loginUrl =", this.loginUrl);
return this.http.get<any>(this.loginUrl)
.pipe(map(response => response as any),
catchError(this.handleError));
}
private handleError(err:HttpErrorResponse){
let errorMessage = '';
if(err.error instanceof ErrorEvent){
errorMessage = `An error has occurred ${err.error.message}`;
}else{
errorMessage = `server returned code: ${err.status}, error message is: ${err.message} `;
}
console.error(errorMessage);
return throwError(errorMessage);
}
}
The component that using this service is as below,
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormControl } from '@angular/forms';
import { LoginService } from '../login.service';
@Component({
selector: 'app-user-login',
templateUrl: './user-login.component.html',
styleUrls: ['./user-login.component.css']
})
export class UserLoginComponent{
testId = "testuser";
testPwd = "pwd";
userLoginForm = new FormGroup({
userId : new FormControl(''),
password : new FormControl('')
});
constructor(private loginService : LoginService, private router : Router){}
onLoginSubmit(){
let loginInfo = {
id : this.userLoginForm.value.userId,
password : this.userLoginForm.value.password
}
if(loginInfo.id === "" || loginInfo.password === ""){
alert("Please enter Id & passowrd");
}else if(loginInfo.id === this.testId){
if(loginInfo.password === this.testPwd){
this.router.navigate(['/game-start']);
}else{
alert("password doesn't exist");
//this.router.navigate(['/reset-password']);
}
}else{
alert("userId doesn't exist");
}
this.loginService.getCurrentUserInfo(loginInfo).subscribe({
next : data => console.log("returned data : " , data)
});
}
}
来源：https://stackoverflow.com/questions/61423410/angular-error-multiple-modules-with-names-that-only-differ-in-casing