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文件中删除了脚本标记，而是将它们包含在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以及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 文件的scripts数组中删除keycloak行。

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

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

1 个答案: