Question

我想在数据库中插入一些用户详细信息。目前，我在Angular 9中工作。我认为我做得很好，但是目前，我在导入Http时遇到一些错误。为什么会出现此错误？我在那里尝试了类似的问题，但没有得到答案。

我尝试过的事情

我的服务文件

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {observable, Observable}  from 'rxjs';
import {Signup} from './signup';
import { from } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SignupserviceService {
  createsignup(signup: Signup):Observable<Signup> {
    throw new Error("Method not implemented.");
    return this.http.post<Signup>(this.url+'api/users',signup)
    
  }
  url="http://localhost:51180/";

  constructor(private http:HttpClient) { }

  createuser(user:Signup):Observable<Signup>
  {
     return this.http.post<Signup>(this.url+'api/users',user)
  }
}

我的signup.component.ts文件

import { Component, OnInit } from '@angular/core';
import {FormBuilder,Validators,FormGroup} from '@angular/forms';
import {SignupserviceService} from '../signup/signupservice.service';
import {Signup} from '../signup/signup';
import { from } from 'rxjs';


@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent implements OnInit {
  navbarOpen = false;
  regForm: FormGroup;
  datasaved:boolean= false;
  massage: string;

  toggleNavbar() {
    this.navbarOpen = !this.navbarOpen;
  }

  constructor(private formbuilder: FormBuilder, private signupservice:SignupserviceService
    ) { }

  ngOnInit(): void {
  }




  setFormState(): void {
    this.regForm = this.formbuilder.group({
      email: ['', [Validators.required]],
      password: ['', [Validators.required]]
    })
  }

  onSubmit() {
    
    let signup = this.regForm.value;

    this.createsignup(signup);
    this.regForm.reset();
  }

  createsignup(signup: Signup) {
    this.signupservice.createsignup(signup).subscribe(
      () => {
        this.datasaved = true;
        this.massage = "User Created";
       this.regForm.reset();
      }
    )
  }

}

我遇到的错误

ERROR in node_modules/@angular/common/http/http.d.ts:81:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (@angular/common/http) which declares HttpClient has not been processed correctly by ngcc, or is not compatible with Angular 
Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

81 export declare class HttpClient {

package.json

{
  "name": "localpost",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.6",
    "@angular/common": "~10.0.6",
    "@angular/compiler": "~10.0.6",
    "@angular/core": "~10.0.6",
    "@angular/forms": "~10.0.6",
    "@angular/platform-browser": "~10.0.6",
    "@angular/platform-browser-dynamic": "~10.0.6",
    "@angular/router": "~10.0.6",
    "@icon/icofont": "^1.0.1-alpha.1",
    "angular-font-awesome": "^3.1.2",
    "aos": "^2.3.4",
    "boxicons": "^2.0.5",
    "counterup2": "^1.0.4",
    "countup.js": "^2.0.6",
    "font-awesome": "^4.7.0",
    "ngx-bootstrap": "^5.6.1",
    "ngx-owl-carousel-o": "^4.0.0",
    "remixicon": "^2.5.0",
    "rxjs": "~6.5.5",
    "tslib": "^2.0.0",
    "waypoints": "^4.0.1",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.5",
    "@angular/cli": "~10.0.5",
    "@angular/compiler-cli": "~10.0.6",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { BodyComponent } from './component/body/body.component';
import { FooterComponent } from './component/footer/footer.component';
import { LoginComponent } from './component/login/login.component';
import { SignupComponent } from './component/signup/signup.component';
import { SignupserviceService } from './component/signup/signupservice.service';
import { HttpClientModule, HttpClient } from '@angular/common/http';



@NgModule({
  declarations: [
    AppComponent,
    BodyComponent,
    FooterComponent,
    LoginComponent,
    SignupComponent,
    
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    HttpClient
  ],
  providers: [SignupserviceService],
  bootstrap: [AppComponent]
})
export class AppModule { }

请帮助我为什么会收到此错误

谢谢

Answer 1

在ngModule中检查您的导入，应该对其进行修复

imports: [  
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],

如果您正在使用注射剂，则不需要在@ng模块中提供注射服务，您可以选择其中之一

Answer 2

您在app.module中遇到问题，已将HttpClient添加到导入列表中，这是无效的，这就是为什么您会收到此错误的原因，当您导入HttpClientModule时，您可以将HttpClinet对象注入任何服务

  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ReactiveFormsModule, // in case you use angular reactive forms 
    HttpClient // <-- remove this line 
  ],

解决角度9的HttpClient错误

2 个答案: