Angular 2로 Google 캘린더 API 구현하기

Question

Angular 2를 사용하는 Google 캘린더 API에 연결하려고 했으므로 앞으로 빌드 할 웹 애플리케이션에 예정된 이벤트를 표시 할 수 있습니다. Google Calendar JavaScript 빠른 시작 자습서를 살펴 보았지만 모든 것이 index.html 파일에 있었지만 모두 완벽하게 작동했습니다. Google API를 설정하고 클라이언트 ID 및 API 키를 자바 스크립트 코드에 넣고 지정된 캘린더의 다가오는 일정을 올바르게 나열했습니다. 빠른 시작 자습서에

링크 : https://developers.google.com/google-apps/calendar/quickstart/js

내가 자바 스크립트 튜토리얼은 단순히 스크립트의 구성 요소/서비스보다는 원시 자바 스크립트를 사용하여 Angular2를 사용하여 동일한 기능을 구현하려고 일을 가지고 일단 파일의 index.html에 있습니다. 나는 약 절반 정도 성공했다.

문제 :"Cannot find name 'gapi'"에 오류가 표시됩니다.

Google 캘린더 정보를 처음으로로드하는 코드를 호출하는 페이지를 방문하면 gapi이 정의되지 않았다는 오류가 표시됩니다. gapi은 코드의 여러 위치, 특히 Google 캘린더 API에서 이벤트 데이터를 인증하고 검색하는 서비스에 각각 존재합니다. 그러나 페이지를 닫고 돌아 오면 오류없이 데이터가 전달됩니다.

<script src="https://apis.google.com/js/client.js?onload=checkAuth" async></script> 

가 어떻게이 문제를 해결 할 다음과 같이 나는 등 비동기를 사용 index.html에서 적절한 스크립트 태그를로드 시도? 내 코드는 아래에 링크 된 저장소에서 본 것과 매우 유사하다 :

https://github.com/stefanreichert/angular2-google-calendar-example

Answer 1

타이프 라이터와 자바 스크립트는 다른 것입니다. TypeScript는 JS를 컴파일 할 수 없으며 TypeScript에 대해서만 알고 있습니다. 그래서 전역 JS (런타임) 객체를 사용하려고하면 TypeScript는 아무것도 알지 못합니다 (컴파일 타임 일뿐입니다). 따라서 세계를 선언하는 방법이 필요합니다 gapi. 임의로 declare을 사용할 수 있습니다. 일부는이 길로 갈 것입니다. TypeScript 파일에 다음을 추가하기 만하면됩니다.

import { } from '..' 

declare var gapi: any; 

@Component({..}) 

또는 더 나은 방법은 입력을 설치하는 것입니다. 이는 글로벌 입력을 추가하고 당신은 구글 API

npm install --save-dev @types/gapi 

그것은 당신이를 설치 한 후 IDE를 다시 시작해야 할 수도 있습니다 가능에 체크 컴파일 시간을 얻을 것이다. 나는 내가 때때로하는 것을 안다.

Answer 2

인증이 완료되기 전에 문제가 Google 캘린더 API에서 데이터를 검색하려고했습니다. 인증이 성공적으로 끝난 후 다른 약속을 사용하여 데이터를로드하면 내가 찾고있는 이벤트 데이터를 검색 할 수 있습니다.

또한, npm install --save @types/gapi, npm install --save @types/gapi.auth2에 보이는 도움이되었다, 그리고 declare var gapi: any 어디서나 나는 서비스/구성 요소 gapi 전화를 걸하고 싶었다.