angulartypescriptnpmkeycloakkeycloak-angular

keycloak-angular 26 is unable to find keycloak-js

In our Angular 18 application we are switching from Keycloak version 25 to 26. This combination of library versions in our package.json was running fine:

{
   ...
   "keycloak-angular": "^16.0.1",
   "keycloak-js": "^25.0.1",
   ...
}

Now we tried to switch to the keycloak-js version 26:

{
   ...
   "keycloak-angular": "^16.1.0",
   "keycloak-js": "^26.0.5",
   ...
}

But now when building we get this: enter image description here

The question is why keycloak-js cannot be found by keycloak-angular when it has worked before. Here is the tsconfig.json:

{
    "compileOnSave": false,
    "compilerOptions": {
        "outDir": "./dist/out-tsc",
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "noImplicitOverride": true,
        "noPropertyAccessFromIndexSignature": true,
        "noImplicitReturns": true,
        "noFallthroughCasesInSwitch": true,
        "esModuleInterop": true,
        "sourceMap": true,
        "declaration": false,
        "experimentalDecorators": true,
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "ES2022",
        "module": "ES2022",
        "useDefineForClassFields": false,
        "lib": ["ES2022", "dom"],
        "paths": {
            "@core/*": ["./src/app/core/*"],
            "@shared/*": ["./src/app/shared/*"]
        },
        "resolveJsonModule": true, // Enable JSON imports (needed to import package.json in e.g. app/core/services/version.service.ts)
        "allowSyntheticDefaultImports": true // Allow default imports from modules with no default export (needed to import package.json in e.g. app/core/services/version.service.ts)
    },
    "angularCompilerOptions": {
        "enableI18nLegacyMessageIdFormat": false,
        "strictInjectionParameters": true,
        "strictInputAccessModifiers": true,
        "strictTemplates": true
    }
}

For the field moduleResolution I have tried "bundler" instead of "node" but that throws another error: enter image description here

If I reset moduleResolution back to node and keycloak-js back to 25.0.1 everything is ok again. Any ideas?

Solution

  • I had raised a github issue for this scenario - Github issue - Enable keycloak-js to work with "node" bundler, types are not recognized in angular and application not starting.

    Which pointed me to ticket which was what I duplicated - Github issue - Typescript Cannot find module keycloak-js or its corresponding type declarations. #33778

    So the conclusion seems to be that "moduleResolution": "bundler" is the correct fix for this issue.

    It is also explicitely mentioned in their Upgrading Guide.

    {
  "compileOnSave": false,
  "compilerOptions": {
    ...
    "moduleResolution": "bundler",
    ...

    The error you are getting might be resolved by importing the interface/type at the root level, could you try.

    import { InputSwitchModule, InputSwitchChangeEvent } from 'primeng/inputswitch';

    Instead of drilling down to the interface level.

    Stackblitz Demo