Keycloak-angular 26 cannot locate the keycloak-js library

We recently updated our Angular 18 application from Keycloak version 25 to version 26. Previously, we had the following library versions set up in our package.json which were working fine:

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

After updating to keycloak-js version 26, our build is now encountering this issue: https://i.sstatic.net/H3E6RkkO.png

The concern now is why keycloak-angular is unable to find keycloak-js when it was previously functional. Here is the content of tsconfig.json file:

{
    "compileOnSave": false,
    "compilerOptions": {
        ...
    },
    "angularCompilerOptions": {
        ...
    }
}

I have attempted changing the moduleResolution field to "bundler" instead of "node," but that results in another error: https://i.sstatic.net/o7x6z2A4.png

Reverting back to moduleResolution node and using keycloak-js version 25.0.1 resolves the issue. Any insights on this?

angulartypescriptnpmkeycloakkeycloak-angular

Answer №1

I recently submitted a github issue regarding this particular situation - Github problem - Enabling keycloak-js to function with "node" bundler, resulting in unrecognized types in Angular and application failure to start.

This led me to a ticket that essentially mirrored my own issue - Github problem - Typescript Cannot locate module keycloak-js or its associated type declarations. #33778

Therefore, it appears that setting 

"moduleResolution": "bundler"
is the appropriate solution for this problem.

This specific solution is also highlighted in their Upgrading Manual.

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

If you're encountering an error, consider importing the interface/type at the root level, as a potential fix.

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

Rather than delving deep into the interface hierarchy.

Stackblitz Demo

Answer №2

When updating the setup or requirements, it is advisable to clear the npm cache and re-install all components:

rm -rf node_modules
rm package-lock.json
npm install

Answer №3

If you want to define a global type for keycloak-js, you can do so by following these steps:

declare module 'keycloak-js' {
  export * from 'keycloak-js/lib/keycloak';
}

First, create a folder named types and place the keycloak-js.d.ts file inside it.

Next, include this newly created file in your main tsconfig.json under the compilerOptions section like this:

"typeRoots": ["node_modules/@types", "./types"],

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to utilize the onAngularGridCreated emitter

I'm currently facing an issue with the Angular Slickgrid library. I need to customize the sorting button function by using the onAngularGridCreated event, which should return the instance of my grid. However, when I include the following code in my an ...

javascriptangularslickgridangular-slickgrid

Launch an Angular 2 application in a separate tab, passing post parameters and retrieve the parameters within the Angular 2 framework

One of the requirements for my Angular 2 application is that it must be able to capture post parameters when opened in a new tab from a website. How can I achieve this functionality in Angular 2? Is there a way to capture post parameters using Angular 2? ...

angular

Tips for enhancing the TypeScript definition of Material UI 3 theme by integrating the Material UI pickers theme

Trying to enhance the Material-UI theme with the Typescript typings of Material-UI-Pickers for the latest versions listed here: "@material-ui/core": "^3.9.2", "material-ui-pickers": "^2.2.1", A note on the bottom of the Material UI picker page mentions t ...

typescriptmaterial-uithemes

Detecting a page refresh in Angular 16: Tips and tricks

My Angular 12 code is functioning properly, but when I migrated it to Angular 16, it stopped working. Can you please suggest the necessary changes to make it work in Angular 16? Here is the code snippet: this._router.events .pipe(filter((rs): rs ...

angularangular16

Why isn't npm search functioning properly?

Curious why my npm search queries are not directing me to the official website to find a package. It seems like my searches are only bringing up results from the local index and I can't find what I need. Can someone please assist me with this issue? ...

npm

generating declaration files for components with accurate type definitions from propTypes

I am in the process of creating a react/js library using rollup. My approach involves utilizing typescript to generate declaration files for my components. Despite having propTypes defined for my components, I have noticed that the emitted .d.ts files as ...

reactjstypescriptrollupjsreact-proptypes

Identify any missing periods and combine the years into a single range

I am working on restructuring year ranges with gaps and consolidating them. For example, converting [{start: 2002, end: 2020}, {start: 2020, end: null}] to {start: 2002, end: null} or [{2002, 2004},{2006, 2008}, {2008, null}] to [{2002-2004}, {2006-null}]. ...

javascriptarraystypescript

Transfer the data from one object to another while disregarding any additional properties

I am dealing with 2 objects: person{ name : string gender : string } woman{ name : string } The challenge I face is that I have an object "person" filled with values, and I need to copy those values into a new object "woman" without including the "ge ...

javascriptjqueryangularjstypescript

When packaging Runtime.ImportModuleError, serverless eliminates certain npm packages

In the midst of my aws-nodejs Serverless.js project, I encountered a puzzling issue when deploying my lambdas – an error message popped up labeled as Runtime.ImportModuleError, hinting at missing dependencies. Further investigation revealed that this err ...

amazon-web-servicesnpmaws-lambdaserverlessserverless-framework

Is it possible that Angular2 is unable to properly establish the default value when it is selected?

I've been attempting to establish a default value for my selection by using [selected]= "selected_choice == 'one'" similar to this method but unfortunately, it didn't yield the desired result. Upon hearing that [selected] is no long ...

angularselectbinding

A guide on resolving the issue of "Error: Watching remote files is not supported" in Visual Studio Code

I was working on my Vue application, took a break, and now I can't seem to start the development server. Something must have updated in the meantime that is causing this issue. I even tried a fresh installation of Vue/Vuetify, but the problem persists ...

vue.jsnpmwebpackvisual-studio-code

Using type-safe useDispatch with redux-thunk for improved code clarity

Utilizing the power of redux-thunk for asynchronous action creators has allowed me to seamlessly return results back to the original caller. function fetchUserName(userId: number): Promise<string> { return Promise.resolve(`User ${userId}`) } func ...

typescriptreduxredux-thunk

How can I obtain the model values for all cars in the primary object?

const vehicles={ vehicle1:{ brand:"Suzuki", model:565, price:1200 }, vehicle2:{ brand:"Hyundai", model:567, price:1300 }, vehicle3:{ brand:"Toyota", model ...

javascriptjsontypescriptobject

Material-UI: Error thrown when attempting to pass props to makeStyles in React due to missing property 'X' on type '{}'

Currently experimenting with Adapting based on props, you can find more information here import React from 'react'; import { makeStyles } from '@material-ui/core'; const useStyles = makeStyles({ // style rule foo: props => ( ...

reactjstypescriptmaterial-ui

What are some ways to configure `npm start` to launch a custom webpage?

I have reorganized my static webpages by consolidating them into the public/ directory within my create-react-app. Within this directory, I have the index.html file which is supposed to be a dynamic user page that I am setting up with react. My goal is t ...

reactjsnpm

Custom error handlers are never triggered by Angular 2 errors

I'm facing an issue with my Angular custom error handler implementation (v2.4.3). Even though I have a simple setup, the errors are not being logged. What could be causing this problem? app.module.ts providers: [ { provide: ErrorHandler, useClas ...

angularerror-handlingobservable

The Disabled element does not exhibit effective styling

When we include the disabled attribute in the text element, the style does not work. Can you explain why? <input pInputText [style]="{'padding-bottom':'10px','padding-top':'10px','width':'100%&apos ...

htmlcssangularinternet-explorertypescript

Angular 2+: Disabling form validation once the required validator fails

When working with a reactive Angular form like the one below: buildForm(): void { this.registrationForm = this.fb.group({ 'email': [this.user.email, [ Validators.required, Validators.email ]], }); I'm lo ...

validationangulartypescript

A guide to validating a pair of fields within a single object using React hooks and the Yup library

{ label: 'Room', name: 'room', rule: yup.array(yup.object()).required(), renderer: (data: any) => { const { control, register, errors } = useFormContext(); return ( ...

javascriptreactjstypescriptyupreact-hook-form

Troubleshooting Angular in a Docker environment

Currently, I am facing issues trying to attach a debugger to my simple angular application that is running inside a basic docker container. My lack of JS/Angular expertise is not helping the situation. Here is a snippet from my Dockerfile: FROM node:12 RU ...

node.jsangulardockerdocker-composewebstorm