Question

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!

我知道这个错误通常会在应用程序的某个地方暗示 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 导入此组件，那么一切正常。显然，这不是因为我没有提供 HttpModule ，因为它在我的 app.module 中，所以这是我无法理解的其他内容。

作为旁注，我在运行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

三江源

Answer 1

我猜您正在使用Systemjs。我看到你从不同的模块中导入了HttpModule和Http

import { HttpModule } from '@angular/Http';
import {Http, Headers, Response} from "@angular/http";

在两种情况下都使用小写。所以它应该是

import { HttpModule } from '@angular/http';

另见

Service instance is not available for child component in angular2

Angular：没有Http的提供者

1 个答案: