代码重构：在 Angular 2 RC5 中导入模块失败

Question

昨天我设法用 Angular 2 RC5 制作了这个登录前端的原型。但是，当我尝试进行一些代码重构时，为了将导入声明仅放在一个文件中，正如我们应该对新更新所做的那样，我遇到了一些错误。

我做错了什么吗？这是 RC5 的一个问题，需要在以后的版本中修复吗？

//app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { HttpModule, Http, Headers, RequestOptions   } from '@angular/http';

import { ReactiveFormsModule } from '@angular/forms';
import { AuthHttp, AuthConfig } from 'angular2-jwt'
import { AppComponent }   from './app.component';
import { HeaderComponent } from "./shared/header.component";
import { SigninComponent } from "./unprotected/signin.component";
import { SignupComponent } from "./unprotected/signup.component";
import { ProtectedComponent } from "./protected/protected.component";
import { AuthGuard } from "./shared/auth.guard";
import { AuthService } from "./shared/auth.service";
import { routing } from "./app.routing";



@NgModule({
    declarations: [
        AppComponent,
        HeaderComponent,
        SigninComponent,
        SignupComponent,
        ProtectedComponent
    ],
    imports: [BrowserModule, Http, Headers, RequestOptions,  routing,  ReactiveFormsModule],
   // imports: [BrowserModule, HttpModule, routing, ReactiveFormsModule],

    providers: [
        AuthGuard,
        AuthService,
        {provide: AuthHttp,
                useFactory: (http) => {
                    return new AuthHttp(new AuthConfig({
                        globalHeaders: [{'Content-Type':'application/json'}],
                        noJwtError: true,
                    }), http);
                },
                deps: [HttpModule]
        },
      //  {provide: HttpClient, useFactory:(http,router) => new HttpClient(http, router), deps:[AuthHttp, Router]}
    ],

    bootstrap: [AppComponent]
})
export class AppModule {}

//---------auth.service.ts---------

import {Injectable} from "@angular/core";

import {User} from "./user.interface";
import {Router} from "@angular/router";
//import {HttpModule, Http, Headers, RequestOptions } from "@angular/http";


@Injectable()
export class AuthService {
    private loggedIn = false;

    constructor(private router:Router, private http:Http) {
        this.loggedIn = !!localStorage.getItem('auth_token');
    }

    // signupUser(user: User) {
    //   firebase.auth().createUserWithEmailAndPassword(user.email, user.password)
    //     .catch(function (error) {
    //       console.log(error);
    //     });
    // }

    signinUser(user:User) {
        console.log(user);
        let headers = new Headers();
      //  console.log('WHATEVER');
        headers.append('Content-Type', 'application/json');

        return this.http
            .post(
                'http://arktis.dev/mockLogin',
                JSON.stringify(user.email)
               // { headers }
            )
            .map(res => res.json())
            .map((res) => {
            //    console.log('asd' + res);
                if (res.status == 'success') {
                    localStorage.setItem('auth_token', res.data);
                    this.loggedIn = true;
              //      console.log('Pippo');
                }
                return res.data;
            });

    }
    onSubmit(user:User) {
        this.signinUser(user).subscribe((res) => {
            if (res) {
                this.router.navigate(['/protected']);
            }
        });
    }
    logout() {
        // firebase.auth().signOut();
        localStorage.removeItem('auth_token');
        this.loggedIn = false;
        this.router.navigate(['/signin']);
    }

    isAuthenticated() {
        // var user = firebase.auth().currentUser;
        //
        // if (user) {
        //     return true;
        // } else {
        //     return false;
        // }
        return this.loggedIn;

    }
}
//--------- error message ---------
Error: Typescript found the following errors:
C:/xampp/htdocs/Authentication/tmp/broccoli_type_script_compiler-   input_base_path-N2WoaAbW.tmp/0/src/app/shared/auth.service.ts (12, 57): Cannot find name 'Http'.
C:/xampp/htdocs/Authentication/tmp/broccoli_type_script_compiler- input_base_path-N2WoaAbW.tmp/0/src/app/shared/auth.service.ts (25, 31): Cannot find name 'Headers'.
at BroccoliTypeScriptCompiler._doIncrementalBuild  (C:\xampp\htdocs\Authentication\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:120:19)
at BroccoliTypeScriptCompiler.build  (C:\xampp\htdocs\Authentication\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:43:10)
at C:\xampp\htdocs\Authentication\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:152:21
at lib$rsvp$$internal$$tryCatch (C:\xampp\htdocs\Authentication\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1036:16)
at lib$rsvp$$internal$$invokeCallback (C:\xampp\htdocs\Authentication\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17)
at lib$rsvp$$internal$$publish (C:\xampp\htdocs\Authentication\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1019:11)
at lib$rsvp$asap$$flush (C:\xampp\htdocs\Authentication\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1198:9)
at nextTickCallbackWith0Args (node.js:420:9)
at process._tickCallback (node.js:349:13)

Answer 1

检查您的 auth.service.ts 以取消评论其中的以下行：

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

Answer 2

"That's because you'll need to inject it through your component's constructor before you can use it and to get intellisense support."

答案来自此 webpage 并位于评论中。

Answer 3

我在评论中找到了答案：link

"That's because you'll need to inject it through your component's constructor before you can use it and to get intellisense support." – Davide Pugliese 8 月 24 日在 9:54

代码重构：在 Angular 2 RC5 中导入模块失败

Code refactoring: importing moules in Angular 2 RC5 fails

angular

import

refactoring

httpmodule