Unable to serve keycloak page

[chowpatrickatsecuritas]

• Newly cloned repo
• ran npm i
• then ran npm run serve

first build error:

./src/kc.gen.tsx - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: D:\Keycloakify-Angular\keycloakify-starter-angular\src\kc.gen.tsx is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

Error: src/main.ts:4:40 - error TS6142: Module './kc.gen' was resolved to 'D:/Keycloakify-Angular/keycloakify-starter-angular/src/kc.gen.tsx', but '--jsx' is not set.

4 import { bootstrapKcApplication } from './kc.gen';
                                         ~~~~~~~~~~

Error: src/main.ts:20:14 - error TS2339: Property 'kcContext' does not exist on type 'Window & typeof globalThis'.

20   if (window.kcContext === undefined) {
                ~~~~~~~~~

Error: src/main.ts:29:23 - error TS2339: Property 'kcContext' does not exist on type 'Window & typeof globalThis'.

29     kcContext: window.kcContext,
                         ~~~~~~~~~

Error: src/main.ts:30:30 - error TS7031: Binding element 'KcRootComponent' implicitly has an 'any' type.

30     bootstrapApplication: ({ KcRootComponent, kcProvider }) =>
                                ~~~~~~~~~~~~~~~

Error: src/main.ts:30:47 - error TS7031: Binding element 'kcProvider' implicitly has an 'any' type.

30     bootstrapApplication: ({ KcRootComponent, kcProvider }) =>
                                                 ~~~~~~~~~~

As it is serving, I can see that ./src/kc.gen.ts file get deleted and a new file "kc.gen.tsx" file gets created. This seemed to cascade into another error right after:

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

× Failed to compile.
✔ Browser application bundle generation complete.

Initial chunk files | Names   | Raw size
main.js             | main    |  3.75 MB |
runtime.js          | runtime | 12.95 kB |

1 unchanged chunks

Build at: 2024-10-21T17:04:54.350Z - Hash: e196a2e681b995ee - Time: 896ms

./src/kc.gen.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: D:\Keycloakify-Angular\keycloakify-starter-angular\src\kc.gen.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

Error: src/main.ts:4:40 - error TS6142: Module './kc.gen' was resolved to 'D:/Keycloakify-Angular/keycloakify-starter-angular/src/kc.gen.tsx', but '--jsx' is not set.

4 import { bootstrapKcApplication } from './kc.gen';
                                         ~~~~~~~~~~

Error: src/main.ts:20:14 - error TS2339: Property 'kcContext' does not exist on type 'Window & typeof globalThis'.

20   if (window.kcContext === undefined) {
                ~~~~~~~~~

Error: src/main.ts:29:23 - error TS2339: Property 'kcContext' does not exist on type 'Window & typeof globalThis'.

29     kcContext: window.kcContext,
                         ~~~~~~~~~
Error: src/main.ts:30:30 - error TS7031: Binding element 'KcRootComponent' implicitly has an 'any' type.

30     bootstrapApplication: ({ KcRootComponent, kcProvider }) =>
                                ~~~~~~~~~~~~~~~

Error: src/main.ts:30:47 - error TS7031: Binding element 'kcProvider' implicitly has an 'any' type.

30     bootstrapApplication: ({ KcRootComponent, kcProvider }) =>
                                                 ~~~~~~~~~~

× Failed to compile.

I managed to get it to serve with no issues by re-added the kc.gen.ts file that got deleted and running serve again. However, once the page does get served I am not able to load the keycloak login page at all. Getting this error in console:

This is logged Only in the main app, stripped out in the theme [localhost:4200:8:15](http://localhost:4200/)

[webpack-dev-server] Server started: Hot Module Replacement disabled, Live Reloading enabled, Progress disabled, Overlay enabled. 

[index.js:484:21](webpack:///node_modules/webpack-dev-server/client/modules/logger/index.js)

Uncaught (in promise) Error: NG0908: In this configuration Angular requires Zone.js
    Angular 11
        RuntimeError
        NgZone
        ngZoneFactory
        factory
        hydrate
        runInInjectorProfilerContext
        hydrate
        get
        bootstrap
        internalCreateApplication
        bootstrapApplication
    4429 main.ts:23
    Babel 2
        asyncGeneratorStep
        _next
[core.mjs:44:8](webpack:///node_modules/@angular/core/fesm2022/core.mjs)

after including the zone.js file and navigating to the serve page, I am presented with a "No Keycloak Context" screen:

[garronej]

Hey sorry @chowpatrickatsecuritas,

The angular side of thing is not ready to use yet. Things are being worked on too actively, it's unstable.
The documentation is still under construction. If you are in a hurry you can join the Discord server.

[chowpatrickatsecuritas]

@garronej Sounds good, I will take a look at the discord and keep an eye on the project. I am able to produce the .jar files using the keycloak-starter (non-angular) project and use on my keycloak instance. I use an angular nx mono repo currently and folding the non-angular project into it is not desired.

[garronej]

I use an angular nx mono repo currently and folding the non-angular project into it is not desired.

Perfectly understandable. There are pepole actively working on documenting that and making sure everything works moothly.