solve HttpClient erro in angular 9

Viewed 504

I want to insert some user details to my database. Currently I am working in Angular 9. I think all i am done good but Currently I am facing some error in Importing Http. Why this error I am getting??As there I have tried some similar questions but I didn't got my answer.

what I have tried

my service file

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)
  }
}

my signup.component.ts file

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();
      }
    )
  }

}

the error I have got

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 { }

Please help why this error I am getting

Thank you

2 Answers

check your imports in ngModule ,that should fix it

imports: [  
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],

and if you are using injectables,there wont be need to provide your service for injection in the @ngmodule,you can choose either one of them

you have a problem in app.module , you have add HttpClient to the import list and this was invalid that why you get this error , when you import HttpClientModule you will be able to inject the HttpClinet object in any service

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

Related