代碼重構：在Angular 2 RC5中導入模糊失敗

昨天我設法使用Angular 2 RC5創建了這個登錄前端原型。但是，當我嘗試使一些代碼重構時，爲了只在一個文件中具有導入聲明，就像我們應該對新更新所做的那樣，我得到了一些錯誤。代碼重構：在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)

來源

2016-08-24 Davide Pugliese

我找到了答案在這裏，註釋之中：link

「那是因爲你需要通過你的組件的構造注入之前，你可以使用它，並獲得智能的支持。」 - 大衛Pugliese 8月24日9:54

來源

2016-09-10 13:19:08

檢查以下線的auth.service.ts取消註釋它：

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

來源

2016-08-24 07:49:56 ranakrunal9

我知道它適用於該行未註釋，事情是，它應該工作沒有這一行，因爲我已經導入模塊已經在app.modules.ts，否則我不'不要理解這個更新的意義，以及如何做。 –

在'app.module.ts'中導入並不意味着您可以直接使用它，而無需import語句，您必須在任何使用它的地方編寫import語句。同樣的，如果你在任何其他組件中使用'AuthService'，比如說'HeaderComponent'，那麼你也必須爲'AuthService'編寫import語句。您已經在app.module.ts中聲明瞭AuthService，這意味着您在整個模塊/應用程序中都有單個實例。 – ranakrunal9

我在這裏找到了答案，其中包括：[link]（https://www.barbarianmeetscoding.com/blog/2016/08/13/updating-your-angular-2-app-from-rc4-to-rc5 -a-practical-guide /）「這是因爲在使用它並獲得智能支持之前，您需要通過組件的構造函數注入它。」 –

「那是因爲你需要通過你的組件的構造注入之前，你可以使用它，並獲得IntelliSense支持「。

答案來自於這個webpage，位於評論之中。

來源

2016-08-24 09:56:59

代碼重構：在Angular 2 RC5中導入模糊失敗

回答

相關問題