어제 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)
내가 주석 처리하지 않은 선과 함께 작동한다는 것을 알았습니다. 문제는이 줄이 없어도 작동해야한다는 것입니다. 이미 모듈을 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 /) "구성 요소 생성자를 사용하기 전에이를 삽입해야하고 인텔리 센스 지원을받을 수 있습니다." –