Upgrade Angular 4 brach Implementierung von externen JS Abhängigkeit

Question

Wenn ich Winkel 4 meine Winkel Anwendung aktualisiert passiert folgendes:

Uncaught ReferenceError: Keycloak is not defined 
     at Function.webpackJsonp.../../../../../src/app/services/auth/auth.service.ts.AuthService.init (auth.service.ts:22) 
     at Object.../../../../../src/main.ts (main.ts:9) 
     at __webpack_require__ (bootstrap 1f6d90b…:54) 
     at Object.1 (polyfills.ts:19) 
     at __webpack_require__ (bootstrap 1f6d90b…:54) 
     at webpackJsonpCallback (bootstrap 1f6d90b…:25) 
     at main.bundle.js:1 

Ich habe meine Script-Tags entfernt aus der Datei index.html und stattdessen enthalten sie in die Winkel cli.json Datei:

"scripts": [ 
    "./app/js/keycloak/keycloak.js", 
    "./app/js/wavesurfer/wavesurfer.min.js", 
    "./bower_components/bootstrap/dist/css/bootstrap.min.css", 
    "./app/js/bootstrap/bootstrap.min.js", 
    "./app/js/bootstrap/jquery.min.js" 
    ] 

ich jetzt einen Fehler auf dem folgenden Code erhalten:

declare let Keycloak: any; 

static init(): Promise<any> { 
    let keycloakAuth: any = new Keycloak("app/js/keycloak/keycloak.json"); 

    // other code here 
} 

Was habe ich falsch gemacht? Der Import der Javascript-Datei oder die Deklaration dieses Objekts.

Mit Angular 2 funktionierte das perfekt.

Lassen Sie mich wissen, wenn ich weitere Informationen zur Lösung dieses Problems bereitstellen muss.

Answer 1

würde ich Keycloak JS sowie its typing durch NPM installieren:

npm install --save keycloak-js @types/keycloak-js 

Nun können Sie es als polyfill Bibliothek importieren können - eine Bibliothek, die geladen werden soll, bevor Ihre Anwendung initialisiert wird.

In ./src/polyfills.ts, fügen

import 'keycloak-js' // <- use the keycloak foldername in ./node_modules folder 

Weil wir auch die Typen installiert haben, sollten Sie auch die declare let Keycloak Linie entfernen, weil das Typoskript @types/keycloak-js Paket verwenden starke Typisierung zur Verfügung zu stellen. Entfernen Sie schließlich die Schlüsselumbruchlinie aus dem Skript-Array .angular-cli.json Datei.

Sie sollten jetzt Keycloak in Ihrem Projekt verwenden können.