：のHttp

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クラスをコンストラクタ内で使用しているサービスを、自分のコンポーネントにインポートするときにこのエラーが発生します。

私は輸入品と私のauthentication.serviceでグローバルに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 { 

} 

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

以内にそれを使用するというのが私の app.moduleクラスを持っています

最後に、私はsignup.componentユーザーフォームの使用authentica私はこのコンポーネントにauthentication.serviceをインポートしない場合、すべてがOKであるアップ

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

ユーザーに署名するtion.service。明らかに、これは私がHttpModuleを私ののapp.moduleに入れていないためではありません。私の指を置くことができないものです。

npm run buildを実行するときに注意点として、私は、HTTPについて何かを言うが、私はそれは私はあなたがSystemjsを使用していると思いますありがとう

Answer 1

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 

を意味するものを本当に知らないそれはこの警告が表示されます。私はあなたが異なるモジュールから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