개요
Angular 튜토리얼에서는 프로젝트에서 사용하는 외부 라이브러리를 npm 을 이용하여 프로젝트 내에 설치 후, import 를 통하여 해당 모듈을 사용합니다.
하지만 프로젝트에서 사용하는 외부 라이브러리가 CDN(Content Delivery Network) 으로 제공되는 경우에 대한 예시 및 방법이 확인되지 않아 인터넷을 검색하여 그 결과를 정리하여 놓습니다.
본문
우선 사용하고자 하는 js 파일을 src/index.html 파일에 포합시킵니다.
예를 들어 카카오 로그인 기능을 사용하기 위하여 SDK 라이브러리를 불러오는 것은 다음과 같습니다.
▼ /src/index.html
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://developers.kakao.com/sdk/js/kakao.min.js"></script> <!-- 추가 -->
</head>
<body>
<my-app>loading</my-app>
</body>
스크립트를 컴포넌트에서 사용할 때, Typescript 에서 컴파일 에러가 발생하는 것을 방지하기 위해 스크립트내의 exported 변수 및 함수를 선언(declare) 해주어야 합니다.
▼ /src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
declare let Kakao:any; // ← 추가
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
ngOnInit() {
Kakao.init('XXXXXXX');
// ....
}
}
참고
'모듈, 프레임웍 > Angular' 카테고리의 다른 글
| Angular - Routing 과 Guard 사용 (0) | 2019.02.12 |
|---|---|
| Angular 기초들 - 사용자입력 (0) | 2018.11.06 |
| Font Awesome @ Angular (0) | 2018.09.22 |
| Flex Layout 사용하기 (0) | 2018.09.16 |
| 음악신청 게시판 만들기 (0) | 2018.09.15 |
