Я знаю, что этот вопрос также был опубликован ранее, но, тщательно проверяя каждый из них и проверяя с Github, я обнаружил, что даже шаблон такой же, но причина этой проблемы каждый раз разная. Я попытался сопоставить эти сценарии ios и применил те же решения, но ничего не помогло. Вот почему я публикую это. Я использую angular версию 9. Я получаю предупреждение:
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
Я проверил все орфографии на случай, но ничего другого я не нашел. Другой проект, который я успешно выполнил с "rx js" и "HttpClient", я попытался скопировать оттуда "\ fesm2015 \ http. js" и выполнить, но ничего не помогло.
Я обнаружил в своем сервисе строку,
constructor(private http:HttpClient) { }
создает проблему. Но я правильно объявил соответствующий модуль для этого,
import {HttpClient,HttpErrorResponse} from '@Angular/common/http';
, но не повезло! Любая помощь, чтобы решить это очень ценится. Вот пакет, который я использую.
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
Вот мой файл app.module.ts. Я знаю, что я должен использовать отдельные модули для разных функций, но я новичок и все еще нахожу свой способ разделения функций. Но я бы в конце концов сделал это.
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 { }
Вот мой сервис входа в систему, который создает проблему,
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);
}
}
Компонент, который использует этот сервис, как показано ниже,
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)
});
}
}