2016-08-24 7 views
0

어제 Angular 2 RC5로 로그인 프런트 엔드의 프로토 타입을 만들었습니다. 그러나 일부 코드 리팩터링을 시도 할 때 가져 오기 선언을 하나의 파일로만 만들려면 새 업데이트를 수행해야하므로 일부 오류가 발생합니다.코드 리팩토링 : Angular 2 RC5에서 moule을 가져 오지 못함

내가 잘못하고 있습니까? 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) 

답변

0

나는 의견의 사이에, 여기에 답을 발견 link

"당신은 당신이 그것을 사용할 수 있으며 인텔리 지원을받을하기 전에 구성 요소의 생성자를 통해 주입해야하기 때문이다." - Davide Pugliese Aug 24 at 9:54

0

그 안에 선 아래 auth.service.ts을 취소 코멘트를 확인하십시오 : 당신이 그것을 사용할 수 있으며 인텔리 지원을받을하기 전에 구성 요소의 생성자를 통해 주입해야하기 때문에

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

내가 주석 처리하지 않은 선과 함께 작동한다는 것을 알았습니다. 문제는이 줄이 없어도 작동해야한다는 것입니다. 이미 모듈을 app.modules.ts에 가져 왔으므로, 이 업데이트의 의미와 상황을 이해해야합니다. –

+0

'app.module.ts'에서 가져 오기가 import 문없이 직접 사용할 수 있다는 것을 의미하지는 않습니다. import 문을 사용하는 곳에서 직접 작성해야합니다. 비슷하게 다른 컴포넌트에서'AuthService'를 사용한다면'HeaderComponent'에서 말하게하고'AuthService'에 대해서 import 문을 써야합니다. app.module.ts에 AuthService를 선언 했으므로 모듈/앱 전체에 단일 인스턴스가 있습니다. – ranakrunal9

+0

나는 의견들 사이에서 대답을 발견했다 : [link] (https://www.barbarianmeetscoding.com/blog/2016/08/13/updating-your-angular-2-app-from-rc4-to-rc5 -a-practical-guide /) "구성 요소 생성자를 사용하기 전에이를 삽입해야하고 인텔리 센스 지원을받을 수 있습니다." –

0

"그건 . "

대답은 webpage에서 비롯되었으며 의견 사이에 위치합니다.