카카오 로그인 declare let Kakao:any; 안먹는 현상

안녕하세요. 앵귤러를 이용해서 웹 사이트 개발을 하고있습니다.

로그인 기능을 연동하려고 하는데요. html에 선언후 component 에서 declare let Kakao:any; 선언하고 gOnInit() {
Kakao.init(‘key’);
}
이렇게 선언을 할경우 스크립트 에러가 발생하는데 이유를 알 수 있을까요? 아래는 해당 에러입니다.

LoginComponent_Host.html:1 ERROR ReferenceError: Kakao is not defined
at LoginComponent.ngOnInit (login.component.ts:22)
at checkAndUpdateDirectiveInline (core.es5.js:10843)
at checkAndUpdateNodeInline (core.es5.js:12341)
at checkAndUpdateNode (core.es5.js:12284)
at debugCheckAndUpdateNode (core.es5.js:13141)
at debugCheckDirectivesFn (core.es5.js:13082)
at Object.eval [as updateDirectives] (LoginComponent_Host.html:1)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13067)
at checkAndUpdateView (core.es5.js:12251)
at callViewAction (core.es5.js:12599)
View_LoginComponent_Host_0 @ LoginComponent_Host.html:1
proxyClass @ compiler.es5.js:14985
DebugContext_.logError @ core.es5.js:13407
ErrorHandler.handleError @ core.es5.js:1080
(anonymous) @ core.es5.js:4819
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.es5.js:3844
ApplicationRef_.tick @ core.es5.js:4819
(anonymous) @ core.es5.js:4684
ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.es5.js:3890
ZoneDelegate.invoke @ zone.js:387
Zone.run @ zone.js:138
NgZone.run @ core.es5.js:3821
next @ core.es5.js:4684
schedulerFn @ core.es5.js:3635
SafeSubscriber._tryOrUnsub @ Subscriber.js:243
SafeSubscriber.next @ Subscriber.js:190
Subscriber.next @ Subscriber.js:131
Subscriber.next @ Subscriber.js:95
Subject.next @ Subject.js:56
EventEmitter.emit @ core.es5.js:3621
checkStable @ core.es5.js:3855
onHasTask @ core.es5.js:3903
ZoneDelegate.hasTask @ zone.js:441
ZoneDelegate.updateTaskCount @ zone.js:461
Zone.updateTaskCount @ zone.js:285
Zone.runTask @ zone.js:205
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:862
ZoneAwarePromise.then @ zone.js:962
PlatformRef
.bootstrapModuleWithZone @ core.es5.js:4537
PlatformRef
.bootstrapModule @ core.es5.js:4522
(anonymous) @ main.ts:11
./src/main.ts @ main.bundle.js:1202
webpack_require @ inline.bundle.js:55
0 @ main.bundle.js:1210
webpack_require @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1
LoginComponent_Host.html:1 ERROR CONTEXT DebugContext
{view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}}
View_LoginComponent_Host_0 @ LoginComponent_Host.html:1
proxyClass @ compiler.es5.js:14985
DebugContext
.logError @ core.es5.js:13407
ErrorHandler.handleError @ core.es5.js:1085
(anonymous) @ core.es5.js:4819
ZoneDelegate.invoke @ zone.js:388
Zone.run @ zone.js:138
NgZone.runOutsideAngular @ core.es5.js:3844
ApplicationRef
.tick @ core.es5.js:4819
(anonymous) @ core.es5.js:4684
ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.es5.js:3890
ZoneDelegate.invoke @ zone.js:387
Zone.run @ zone.js:138
NgZone.run @ core.es5.js:3821
next @ core.es5.js:4684
schedulerFn @ core.es5.js:3635
SafeSubscriber.__tryOrUnsub @ Subscriber.js:243
SafeSubscriber.next @ Subscriber.js:190
Subscriber._next @ Subscriber.js:131
Subscriber.next @ Subscriber.js:95
Subject.next @ Subject.js:56
EventEmitter.emit @ core.es5.js:3621
checkStable @ core.es5.js:3855
onHasTask @ core.es5.js:3903
ZoneDelegate.hasTask @ zone.js:441
ZoneDelegate._updateTaskCount @ zone.js:461
Zone.updateTaskCount @ zone.js:285
Zone.runTask @ zone.js:205
drainMicroTaskQueue @ zone.js:595
Promise.then (async)
scheduleMicroTask @ zone.js:578
ZoneDelegate.scheduleTask @ zone.js:410
Zone.scheduleTask @ zone.js:232
Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:862
ZoneAwarePromise.then @ zone.js:962
PlatformRef
.bootstrapModuleWithZone @ core.es5.js:4537
PlatformRef
.bootstrapModule @ core.es5.js:4522
(anonymous) @ main.ts:11
./src/main.ts @ main.bundle.js:1202
webpack_require @ inline.bundle.js:55
0 @ main.bundle.js:1210
webpack_require @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1
scripts.bundle.js:66 desktop-min

ReferenceError: Kakao is not defined 를 보면, Kakao SDK가 import되지 않아 발생한 오류입니다. Kakao를 참조하기 전에 SDK가 import 완료되는지 확인해 주세요.