Wie eckige HttpModule in den Stamm importieren NgModule

Question

Ich beginne mit ionic v2, angular2 und typeScript. Also versuche ich eine ionische Login-Seite zu erstellen, die Anmeldedaten abruft und die Remote-API zur Authentifizierung kontaktiert. Ich brauche natürlich eckige Http Client.

Die src/app/app.component.ts wie folgt aussieht:

import { Component } from '@angular/core'; 
import { Platform } from 'ionic-angular'; 
import { StatusBar, Splashscreen } from 'ionic-native'; 


import { LoginPage } from '../pages/login/login'; 


@Component({ 
    templateUrl: 'app.html' 
}) 
export class MyApp { 
    rootPage = LoginPage; 

    constructor(platform: Platform) { 
    platform.ready().then(() => { 

     StatusBar.styleDefault(); 
     Splashscreen.hide(); 
    }); 
    } 
} 

src/app/app.module.ts wie folgt aussieht:

import { NgModule, ErrorHandler } from '@angular/core'; 
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; 
import { MyApp } from './app.component'; 
import { LoginPage } from '../pages/login/login'; 
import { AuthService } from '../providers/auth-service'; 
import { HttpModule, JsonpModule } from '@angular/http'; 

@NgModule({ 
    declarations: [ 
    MyApp, 
    LoginPage, 
    HttpModule, 
    JsonpModule, 

    ], 
    imports: [ 
    IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    LoginPage 
    ], 
    providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},AuthService] 
}) 
export class AppModule {} 

Natürlich kann jeder Andere notwendige Dateien (Seite/login/login. * und provider/auth-service.ts) sind definiert, so dass keine Datei- oder Dienstfehler fehlen.

DAS PROBLEM:

Wenn ich die App über ionic serve bauen, das Verfahren ohne Fehler beendet, aber wenn die App im Browser starten, erhalte ich diesen Fehler:

Unexpected Modul „Httpmodule“ erklärt durch das Modul "AppModule"
Trotzdem folge ich nur den Anweisungen von this tutorial from the official documentation.
Ich google seit ein paar Stunden, ohne einen Workaround zu finden.
Kann mir jemand sagen, was mache ich falsch?

Answer 1

Sie sollten HttpModule wie folgt importieren,

imports: [ 
    HttpModule, 
    JsonpModule 
    ... 
    ... 
} 

HINWEIS: Gleiche mit JsonpModule. Und vergessen Sie nicht, sie aus declarations Array zu entfernen.

Answer 2

declarations Die Eigenschaft wird verwendet, um alle Komponenten und Leitungen zu deklarieren, die Sie in diesem Modul haben, sodass Sie sie im Modul verwenden können.

Um ein weiteres Modul in der aktuellen zu verwenden, haben Sie imports Eigenschaft verwenden, wie folgt aus:

@NgModule({ 
    declarations: [ 
    MyApp, 
    LoginPage 
    ], 
    imports: [ 
    IonicModule.forRoot(MyApp), 
    HttpModule, 
    JsonpModule 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    LoginPage 
    ], 
    providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},AuthService] 
}) 

Answer 3

Soweit 2 Ionic betrifft, so müssen Sie nicht separat Httpmodule überhaupt zu importieren. IonicModule tut das für Sie so in den Link:

exports: [ 
    BrowserModule, 
    HttpModule, 
    FormsModule, 
    ReactiveFormsModule, 

Sie direkt die components.Similar für Formulare verwenden können.