Angular Ошибка: несколько модулей с именами, которые отличаются только регистром - PullRequest
Новая
       9

Angular Ошибка: несколько модулей с именами, которые отличаются только регистром

0 голосов
/ 25 апреля 2020

Я знаю, что этот вопрос также был опубликован ранее, но, тщательно проверяя каждый из них и проверяя с 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)
    });

  }


}
...