升级到 Angular 4 破坏了外部 JS 依赖的实现

Question

当我将 angular 应用程序升级到 angular 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 文件中删除了我的 脚本标签 ，而是将它们包含在 angular-cli.json 文件中：

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

我现在收到以下代码的错误：

declare let Keycloak: any;

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

   // other code here
}

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

对于 Angular 2，这非常有效。

如果我需要提供更多信息来解决这个问题，请告诉我。

Answer 1

我会通过 npm 安装 Keycloak JS as well as its typing：

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

现在，您可以将其导入为 polyfill 库 -- 应在您的应用程序初始化之前加载的库。

在./src/polyfills.ts中添加

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

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

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

升级到 Angular 4 破坏了外部 JS 依赖的实现

Upgrade to Angular 4 broke implementation of external JS dependency

javascript

typescript

keycloak

angular