[英]Angular: No Provider for Http
NPM版本:8.1.4
完全错误: Error: Uncaught (in promise): Error: Error in ./SignupComponent class SignupComponent_Host - inline template:0:0 caused by: No provider for Http! Error: No provider for Http!
Error: Uncaught (in promise): Error: Error in ./SignupComponent class SignupComponent_Host - inline template:0:0 caused by: No provider for Http! Error: No provider for Http!
我知道此错误通常表明HttpModule在应用程序中的某个位置,但是,就我而言,它已在app.module中全局提供。
当我将使用构造函数内部的Http类的服务导入我的组件时,收到此错误。
我有我的app.module类,它可以全局导入并提供HttpModule
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule} from '@angular/forms';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/Http';
import { AppComponent } from "./components/app/app.component";
import { MessageComponent } from "./components/messages/message.component";
import { MessageListComponent } from "./components/messages/message-list.component";
import { MessageInputComponent } from "./components/messages/message-input.component";
import {MessageService} from "./components/messages/message.service";
import {MessagesComponent} from "./components/messages/messages.component";
import {AuthenticationComponent} from "./components/auth/authentication.component";
import {routing} from "./components/app/routes";
import {HeaderComponent} from "./components/app/header.component";
import {LogoutComponent} from "./components/auth/logout.component";
import {SigninComponent} from "./components/auth/signin.component";
import {SignupComponent} from "./components/auth/signup.component";
import {AuthenticationService} from "./components/auth/authentication.service";
@NgModule({
declarations: [
AppComponent,
MessageComponent,
MessagesComponent,
MessageListComponent,
MessageInputComponent,
AuthenticationComponent,
HeaderComponent,
LogoutComponent,
SigninComponent,
SignupComponent
],
imports: [BrowserModule,
FormsModule,
RouterModule,
HttpModule,
ReactiveFormsModule,
routing],
providers: [MessageService,
AuthenticationService],
bootstrap: [AppComponent]
})
export class AppModule {
}
在我的authentication.service中,我从HttpModule导入Http并在服务中使用它
import {Http, Headers, Response} from "@angular/http";
import {User} from "../../models/user.model";
import 'rxjs/Rx';
import { Observable } from "rxjs/Observable";
import { Injectable } from "@angular/core";
@Injectable()
export class AuthenticationService{
constructor(private http: Http){}
signUp(user: User){
const body = JSON.stringify(user);
const headers = new Headers({'Content-Type' : 'application/json'});
return this.http.post('http://localhost:3000/user', body, {headers: headers})
.map((response: Response) => response.json())
.catch((error: Response) => Observable.throw(error.json()));
}
}
最后,我使用signup.component用户表单使用authentication.service来注册用户
import { Component, OnInit } from '@angular/core';
import { FormGroup, Validators, FormControl } from '@angular/forms';
import { AuthenticationService } from "./authentication.service";
import { User } from "../../models/user.model";
@Component({
selector: 'app-signup',
templateUrl: 'signup.component.html',
})
export class SignupComponent implements OnInit {
myForm: FormGroup;
constructor(private authenticationService: AuthenticationService) {
}
onSubmit() {
const user = new User(
this.myForm.value.email,
this.myForm.value.password,
this.myForm.value.firstName,
this.myForm.value.lastName
);
this.authenticationService.signUp(user).subscribe(
data => console.log(data),
error => console.log(error)
);
this.myForm.reset();
}
ngOnInit(){
this.myForm = new FormGroup({
firstName: new FormControl(null, Validators.required),
lastName: new FormControl(null, Validators.required),
email: new FormControl(null, [
Validators.required,
Validators.pattern("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?")
]),
password: new FormControl(null, Validators.required)
})
}
}
如果我不将authentication.service导入此组件,则一切正常。 显然,这并不是因为我没有在app.module中提供HttpModule ,所以我无法用它来做其他事情。
附带一提,在运行npm run build
时,我确实会收到此警告,它说明了有关Http的一些信息,但我真的不知道这意味着什么
WARNING in ./~/@angular/Http/src/body.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:
* D:\Cloud Storage\Sync\Development\Projects\Udemy_Angular_Node\node_modules\@angular\Http\src\body.js
Used by 2 module(s), i. e.
D:\Cloud Storage\Sync\Development\Projects\Udemy_Angular_Node\node_modules\@angular\Http\src\static_request.js
* D:\Cloud Storage\Sync\Development\Projects\Udemy_Angular_Node\node_modules\@angular\http\src\body.js
Used by 2 module(s), i. e.
D:\Cloud Storage\Sync\Development\Projects\Udemy_Angular_Node\node_modules\@angular\http\src\static_request.js
谢谢
我猜您正在使用Systemjs。 我看到你已经从不同的模块导入了HttpModule和Http
import { HttpModule } from '@angular/Http';
import {Http, Headers, Response} from "@angular/http";
在两种情况下都使用小写。 所以应该
import { HttpModule } from '@angular/http';
也可以看看
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.