升级到4角破门实现外部JS的依赖

Question

当我升级我的角度应用角4以下事情发生了：

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 

我已经在index.html文件中删除我的脚本标记，而是包括他们进入角cli.json文件：

declare let Keycloak: any; 

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

    // other code here 
} 

0：

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

我现在下面的代码得到一个错误

我做错了什么？ JavaScript文件的导入或此对象的声明。

随着Angular 2的完美运作。

让我知道是否需要提供更多信息来解决此问题。

Answer 1

我会安装Keycloak JS以及its typing通过NPM：现在

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

，您可以导入它作为填充工具库 - 您的应用程序初始化之前应加载库。

在./src/polyfills.ts，加

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

因为我们还安装了类型，你应该甚至删除declare let Keycloak线，因为打字稿将使用@types/keycloak-js包提供强类型。最后，从.angular-cli.json文件的脚本数组中删除keycloak行。

您现在应该可以在项目中使用Keycloak。