Angular: Nein für Http

Question

NPM Version: 8.1.4

Full Error: 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!

Ich weiß, dass dieser Fehler deutet darauf hin, dass im Allgemeinen Httpmodule irgendwo in der Anwendung, in meinem Fall ist es jedoch gewesen global bereitgestellt in app.module.

Ich erhalte diesen Fehler, wenn ich einen Service importiere, der die Http Klasse innerhalb des Konstruktors in meine Komponente verwendet.

Ich habe meine app.module Klasse, die importiert und liefert die Httpmodule global

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 { 

} 

In meinem authentication.service ich Http aus dem Httpmodule importieren und verwenden Sie es innerhalb des Dienstes

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

Und schließlich verwende ich signup.component Benutzerformular verwendet Authentica tion.service einen Benutzer anmelden

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

Wenn ich authentication.service importieren nicht in diese Komponente dann alles in Ordnung ist. Klar, das ist nicht, weil ich HttpModule nicht zur Verfügung gestellt habe, wie es in meinem app.module ist, so ist es etwas anderes, dass ich nicht meinen Finger aufsetzen kann.

Als Randbemerkung, kann ich diese Warnung erhalten, wenn npm run build läuft, die etwas über Http sagt aber ich weiß nicht wirklich, was es bedeutet

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 

Thankyou

Answer 1

Ich denke, man Systemjs verwenden. Ich sehe, Sie haben HttpModule und Http aus verschiedenen Modulen

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

importiert

Verwenden Sie Kleinbuchstaben in beiden Fällen. So sollte es sein

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

Siehe auch

• Service instance is not available for child component in angular2