Ionic 如何解决NullInjectorError

8mmmxcuj  于 9个月前  发布在  Ionic
关注(0)|答案(1)|浏览(96)

我正在创建一个应用程序使用离子/Angular 为前端和node.js为后端,离子版本7是我使用的,我有问题做注册页面。
下面的代码是signup.page.ts

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule, FormsModule, FormControl, FormGroup, Validators } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { Router } from '@angular/router';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.page.html',
  styleUrls: ['./signup.page.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule, FormsModule, ReactiveFormsModule]
})

export class SignupPage implements OnInit {

  errmsg: any;
  errmsgshow = false;

  signupForm = new FormGroup({
    name: new FormControl('', Validators.required),
    email: new FormControl('', Validators.required),
    password: new FormControl('', Validators.required),
  });

  constructor(private service: ApiService, private router: Router) { }

  ngOnInit() {}

  signupSubmit() {
    if (this.signupForm.valid) {
      console.log(this.signupForm.value, 'signuform###');
      this.errmsgshow = false;

      // callapi signup
      this.service.signup(this.signupForm.value).subscribe((res) => {
        console.log(res, 'res##');
        if (res.status == true) {
          this.router.navigate(['otp']);
        } else {
          this.errmsgshow = true;
          this.errmsg = res.msg;
        }
      });
    } else {
      this.errmsgshow = true;
      this.errmsg = 'All field required !!';
    }
  }

}

下面是我的API.service.ts的源代码

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http:HttpClient) { }

  apiUrl = 'http://127.0.1.1:3001/api';

  // signup 
  signup(data:any):Observable<any>
  {
    console.log(data,'data##');
    
    return this.http.post(`${this.apiUrl}/signup`,data);
  }
}

这是我的浏览器控制台的错误

src_app_signup_signup_page_ts.js:2 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(Standalone[SignupPage])[ApiService -> ApiService -> ApiService -> HttpClient -> HttpClient]: 
  NullInjectorError: No provider for HttpClient!
NullInjectorError: R3InjectorError(Standalone[SignupPage])[ApiService -> ApiService -> ApiService -> HttpClient -> HttpClient]: 
  NullInjectorError: No provider for HttpClient!
    at NullInjector.get (core.mjs:8893:27)
    at R3Injector.get (core.mjs:9332:33)
    at R3Injector.get (core.mjs:9332:33)
    at injectInjectorOnly (core.mjs:738:40)
    at Module.ɵɵinject (core.mjs:744:60)
    at Object.ApiService_Factory [as factory] (api.service.ts:8:24)
    at core.mjs:9452:43
    at runInInjectorProfilerContext (core.mjs:694:9)
    at R3Injector.hydrate (core.mjs:9451:17)
    at R3Injector.get (core.mjs:9321:33)
    at resolvePromise (zone.js:1193:31)
    at resolvePromise (zone.js:1147:17)
    at zone.js:1260:17
    at _ZoneDelegate.invokeTask (zone.js:402:31)
    at core.mjs:10695:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:10695:36)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Object.onInvokeTask (core.mjs:11005:33)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Zone.runTask (zone.js:173:47)**strong text**

我不能完全弄清楚这个问题在这一刻,一直在寻找解决方案和教程在离子7小时,但没有太多关于这一点,我能找到的大部分是离子2,3,4,5,错误和turdom

tcomlyy6

tcomlyy61#

尝试在Angular应用程序中配置HttpClientModule。从“@angular/common/HTTP”导入{ HttpClientModule };
验证导入:(npm install @angular/common/http)确认导入是否准确
我试过这个,它工作。

相关问题