ng-packagr not working with Keycloak

Type of Issue

[x] Bug Report / Question

Description

I am trying to use angular-cli with ng-packagr and Keycloak. I was able to successfully import Keycloak in my application with the following code:

import * as Keycloak from 'keycloak-js';
Keycloak(configUrl);

Then I also added keycloak to my ng-package.json

{
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "externals": {
      "keycloak-js": "keycloak"
    },
    "entryFile": "public_api.ts"
  }
}

When I then use ng-packagr I always get the following error:

BUILD ERROR
Cannot call a namespace ('Keycloak')
Error: Cannot call a namespace ('Keycloak')
    at error (/Users/kevinkreuzer/Desktop/migrateExtensions/esta-webjs-extensions/node_modules/rollup/dist/rollup.js:185:14)
    at Module.error (/Users/kevinkreuzer/Desktop/migrateExtensions/esta-webjs-extensions/node_modules/rollup/dist/rollup.js:16526:3)
    at Node.bindNode (/Users/kevinkreuzer/Desktop/migrateExtensions/esta-webjs-extensions/node_modules/rollup/dist/rollup.js:11918:17)
    at Node.bind (/Users/kevinkreuzer/Desktop/migrateExtensions/esta-webjs-extensions/node_modules/rollup/dist/rollup.js:11005:8)
    at eachChild.child (/Users/kevinkreuzer/Desktop/migrateExtensions/esta-webjs-extensions/node_modules/rollup/dist/rollup.js:11024:34)
    at keys.forEach.key (/Users/kevinkreuzer/Desktop/migrateExtensions/esta-webjs-extensions/node_modules/rollup/dist/rollup.js:11041:5)
    at Array.forEach (<anonymous>)
    at Node.eachChild (/Users/kevinkreuzer/Desktop/migrateExtensions/esta-webjs-extensions/node_modules/rollup/dist/rollup.js:11034:13)
    at Node.bindChildren (/Users/kevinkreuzer/Desktop/migrateExtensions/esta-webjs-extensions/node_modules/rollup/dist/rollup.js:11024:8)
    at Node.bind (/Users/kevinkreuzer/Desktop/migrateExtensions/esta-webjs-extensions/node_modules/rollup/dist/rollup.js:11004:8)

I have seen that @dherges already made some suggestions in https://github.com/dherges/ng-packagr/pull/121 on how to import keycloak. Unfortunately none of those suggestions works for me.

How can I use Keycloak with ng-packagr?

How To Reproduce

• Setup angular cli
• Install keycloak-js (version 3.4.0)
• setup ng-packagr
• run package script via npm run packagr

Expected Behaviour

Lib gets bundled into Angular package format.

Version Information

ng-packagr: v1.6.0
node: v8.6.0
angular-cli: 1.5.4
@angular: v5.0.3
rxjs: 5.5.2
zone.js: 0.8.14
keycloak: 3.4.0

[kyubisation]

@kreuzerk The solution/workaround is fairly simple but very strange. The reason seems to be that Rollup and the TypeScript namespace import don’t play nice. (rollup/rollup#670)

import * as Keycloak_ from 'keycloak-js';
const Keycloak = Keycloak_;

I will create a pull request in the esta extensions repo soonish. We can then discuss it further.

[dherges]

Hi @kreuzerk, this maybe or maybe not what you like to hear but it defo works with Keycloak! We do slightly different as we inline the keycloak.js into a library for some reasons (NOT declared in lib.externals). We had some confusion about the typings that the Keycloak people distribute and I guess we ended up with a copy of the typings that we referenced in typescript source with /// <reference path="...". I don’t know exactly what version of keycloak it is.

---

When writing “we” in the above, it’s referring to some code which I cannot disclose.