我正在创建一个应用程序使用离子/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
1条答案
按热度按时间tcomlyy61#
尝试在Angular应用程序中配置HttpClientModule。从“@angular/common/HTTP”导入{ HttpClientModule };
验证导入:(npm install @angular/common/http)确认导入是否准确
我试过这个,它工作。