代码重构：在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中导入模糊失败

回答

相关问题