Mise à niveau angulaire 4 cassé la mise en œuvre de la dépendance JS externe

Question

Quand je mis à jour mon application angulaire angulaire 4 ce qui suit est arrivé:

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 

J'ai enlevé mes balises de script à partir du fichier index.html et place inclus les dans le fichier-cli.json angulaire:

"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" 
    ] 

Je reçois maintenant une erreur sur le code suivant:

declare let Keycloak: any; 

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

    // other code here 
} 

Qu'est-ce que j'ai fait de mal? L'importation du fichier javascript ou la déclaration de cet objet.

Avec Angular 2, cela a parfaitement fonctionné. Faites-moi savoir si je dois fournir plus d'informations pour résoudre ce problème.

Answer 1

J'installer Keycloak JS ainsi que its typing par NPM:

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

Maintenant, vous pouvez l'importer comme une bibliothèque polyfil - une bibliothèque qui devrait être chargé avant votre application est initialisé.

Dans ./src/polyfills.ts, ajoutez

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

Parce que nous avons également installé les types, vous devriez même supprimer la ligne declare let Keycloak car tapuscrit utilisera le paquet @types/keycloak-js pour fournir typage fort. Enfin, supprimez la ligne keycloak du tableau de scripts du fichier .angular-cli.json.

Vous devriez maintenant pouvoir utiliser Keycloak dans votre projet.