Реализация API календаря Google с помощью Angular 2

Я попытался подключиться к Google Calendar API с помощью Angular 2, чтобы отображать предстоящие события в веб-приложении, которое я создаю. Я прошел через учебник быстрого запуска Google Calendar JavaScript и, хотя все было в файле index.html, все это отлично работало. Я смог настроить API Google и поместить ключ клиента и ключ API в свой код JavaScript, и он правильно перечислял предстоящие события из указанного календаря.Реализация API календаря Google с помощью Angular 2

Ссылка на вводном урок: https://developers.google.com/google-apps/calendar/quickstart/js

После того, как я получил учебник JavaScript, чтобы работать, я пытался просто реализовать ту же функциональность, используя Angular2, используя компоненты/услуги, а не просто необработанный JavaScript в сценарии в файле index.html. Я на полпути успешно.

Проблема: Я получаю ошибки, указывая "Cannot find name 'gapi'".

Когда я попал на страницу, которая вызывает код для загрузки информации Календаря Google в первый раз, я получаю эти ошибки, заявляя, что gapi не определен. gapi существует несколько мест в коде, в частности, в службах, которые аутентифицируют и извлекают данные о событиях из API календаря Google, соответственно. Однако, если я покину эту страницу и вернусь, данные пройдут без ошибок. Я попытался загрузки правильный тег сценария в index.html с помощью асинхр и т.д., следующим образом:

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

Как решить эту проблему? Мой код очень похож, наблюдаемые в хранилище связанном ниже:

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

источник

2016-11-05 cbrawl

машинописи и Javascript разных вещей. TypeScript не может скомпилировать JS, он знает только о TypeScript. Поэтому, когда вы пытаетесь использовать глобальный объект JS (runtime), TypeScript ничего не знает об этом (поскольку это только время компиляции). Поэтому вам нужно просто объявить глобальное gapi. Вы можете просто использовать произвольное declare. Некоторые отправятся по этому маршруту. Вы можете просто добавить в свой файл TypeScript следующее:

import { } from '..' 

declare var gapi: any; 

@Component({..})

Или еще лучше, просто установите типовые данные. Это добавит глобальный набор текста, и вы получите время компиляции проверки на API Google

npm install --save-dev @types/gapi

Возможно, вам, возможно, потребуется перезапуск IDE после установки этого. Я знаю, что иногда.

источник

2016-11-05 06:47:49

Спасибо за ответ. К сожалению, маршрут 'npm install 'не работал. Я считаю, что идея глобальной переменной может работать, но когда вы говорите «Просто добавьте следующее в свой файл TypeScript», к какому файлу вы ссылаетесь? Кроме того, требуется ли еще что-то еще после простого определения его во всем мире? – cbrawl

Если вы не используете глобальный файл типизации, я думаю, вам нужно будет объявить его в любом файле, который вы используете. И нет, больше ничего не требуется. Но я не уверен, почему '@ types' не работал. Меня устраивает. –

Я разместил 'declare var gapi: any' в компонентах службы, где я называю' gapi.more.stuff', и хотя ошибки исчезли из командной строки при запуске npm, ошибки все еще происходят, когда я ударяю по самой странице , Я по-прежнему получаю 'Uncaught (в обещании): TypeError: Невозможно прочитать события свойств неопределенного' в консоли разработчика. Есть предположения? – cbrawl

Проблема заключалась в попытке получить данные из API календаря Google до завершения проверки подлинности. Используя другое обещание затем загрузить данные после завершения проверки подлинности, удалось получить данные о событиях, которые я искал.

Кроме того, он, казалось бы, полезно npm install --save @types/gapi, npm install --save @types/gapi.auth2 и declare var gapi: any где бы я хотел, чтобы сделать звонки в gapi в сфере услуг/компонентов.

источник

2016-11-05 17:53:41 cbrawl

Реализация API календаря Google с помощью Angular 2

ответ

Смежные вопросы