Skip to content

feat: update to angular 21 #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
luca-peruzzo merged 5 commits into from
Jan 14, 2026
Merged

feat: update to angular 21 #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6e36637
feat: update to angular 21
luca-peruzzo Nov 30, 2025
3c6ddd7
fix: storybook
luca-peruzzo Nov 30, 2025
1c1f610
chore: update dependencies
luca-peruzzo Nov 30, 2025
4415c36
chore: update dependencies
luca-peruzzo Dec 16, 2025
972f8e9
chore: update dependencies
luca-peruzzo Jan 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import 'zone.js';
import { type Preview } from '@analogjs/storybook-angular';

/** import here your global style if needed
Expand Down
2 changes: 2 additions & 0 deletions angular.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@
"storybook": {
"builder": "@analogjs/storybook-angular:start-storybook",
"options": {
"experimentalZoneless": true,
"configDir": "./.storybook",
"compodoc": false,
"port": 6006
Expand All @@ -65,6 +66,7 @@
"build-storybook": {
"builder": "@analogjs/storybook-angular:build-storybook",
"options": {
"experimentalZoneless": true,
"configDir": "./.storybook",
"compodoc": false,
"outputDir": "storybook-static"
Expand Down
56 changes: 36 additions & 20 deletions eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,33 @@
// @ts-check
import eslint from '@eslint/js';
import tseslint from 'typescript-eslint';
import angular from 'angular-eslint';
import prettier from 'eslint-plugin-prettier';
import storybook from 'eslint-plugin-storybook';
import { defineConfig } from 'eslint/config';
import tseslint from 'typescript-eslint';


export default tseslint.config(
export default defineConfig(
{
files: ['*.stories.@(ts|tsx|js|jsx|mjs|cjs)', '*.story.@(ts|tsx|js|jsx|mjs|cjs)'],
extends: [
eslint.configs.recommended,
tseslint.configs.recommended,
tseslint.configs.stylistic,
storybook.configs['flat/recommended'],
],
plugins: {
prettier,
storybook
'@typescript-eslint': tseslint.plugin,
},
rules: {
'@typescript-eslint/consistent-type-imports': [
'error',
{
disallowTypeAnnotations: true,
fixStyle: 'inline-type-imports',
prefer: 'type-imports',
},
],
'import/no-anonymous-default-export': 'off',
'prettier/prettier': ['error', {}],
},
Expand All @@ -22,10 +36,24 @@ export default tseslint.config(
files: ['**/*.ts'],
plugins: {
prettier,
'@typescript-eslint': tseslint.plugin,
},
extends: [eslint.configs.recommended, ...tseslint.configs.recommended, ...tseslint.configs.stylistic, ...angular.configs.tsRecommended],
extends: [
eslint.configs.recommended,
tseslint.configs.recommended,
tseslint.configs.stylistic,
angular.configs.tsRecommended,
],
processor: angular.processInlineTemplates,
rules: {
'@typescript-eslint/consistent-type-imports': [
'error',
{
disallowTypeAnnotations: true,
fixStyle: 'inline-type-imports',
prefer: 'type-imports',
},
],
'@typescript-eslint/consistent-type-definitions': 'off',
'@typescript-eslint/no-inferrable-types': 'off',
'@typescript-eslint/no-namespace': 'off',
Expand All @@ -46,33 +74,21 @@ export default tseslint.config(
style: 'kebab-case',
},
],
'prettier/prettier': [
'error',
{},
{
usePrettierrc: true,
},
],
'prettier/prettier': ['error'],
},
},
{
files: ['**/*.html'],
plugins: {
prettier,
},
extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],
extends: [angular.configs.templateRecommended, angular.configs.templateAccessibility],
rules: {
'@angular-eslint/template/interactive-supports-focus': 'off',
'@angular-eslint/template/click-events-have-key-events': 'off',
'@angular-eslint/template/label-has-associated-control': 'off',
'@angular-eslint/template/no-autofocus': 'off',
'prettier/prettier': [
'error',
{ parser: 'angular' },
{
usePrettierrc: true,
},
],
'prettier/prettier': ['error', { parser: 'angular' }],
},
},
);
72 changes: 36 additions & 36 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,48 +27,48 @@
"analog"
],
"dependencies": {
"@angular/animations": "^20.3.12",
"@angular/common": "^20.3.14",
"@angular/compiler": "^20.3.12",
"@angular/core": "^20.3.12",
"@angular/forms": "^20.3.12",
"@angular/platform-browser": "^20.3.12",
"@angular/platform-browser-dynamic": "^20.3.12",
"@angular/router": "^20.3.12",
"@keycloakify/angular": "^20.1.12",
"keycloakify": "^11.11.3",
"@angular/animations": "^21.0.8",
"@angular/common": "^21.0.8",
"@angular/compiler": "^21.0.8",
"@angular/core": "^21.0.8",
"@angular/forms": "^21.0.8",
"@angular/platform-browser": "^21.0.8",
"@angular/platform-browser-dynamic": "^21.0.8",
"@angular/router": "^21.0.8",
"@keycloakify/angular": "^21.0.0",
"keycloakify": "^11.13.11",
"rxjs": "~7.8.2",
"tslib": "^2.8.1",
"zone.js": "~0.15.1"
"zone.js": "~0.16.0"
Copy link

@coderabbitai coderabbitai bot Dec 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

zone.js is optional in Angular 21; consider migrating to zoneless or document the requirement.

zone.js is no longer included by default in Angular 21 applications. The presence of zone.js ~0.16.0 in package.json indicates this project is either maintaining backward compatibility or hasn't migrated yet. If the application relies on zone.js, explicitly add provideZoneChangeDetection() in the root providers, and a migration will automatically add it when updating to Angular v21. If zone.js is intentional, configure it in app.config.ts and ensure zone.js is listed under polyfills in angular.json.

🤖 Prompt for AI Agents 
In package.json around line 42, zone.js (~0.16.0) is present but Angular 21 no
longer includes it by default; either remove zone.js and migrate to zoneless
change detection or explicitly document and configure it: if the app relies on
zone.js, add provideZoneChangeDetection() to the root providers (so migration
will detect it), ensure zone.js is configured in app.config.ts, and list zone.js
under the polyfills array in angular.json; otherwise remove the dependency and
update any code relying on NgZone/zone-based change detection to use Angular’s
zoneless APIs.

},
"devDependencies": {
"@analogjs/platform": "2.0.4",
"@analogjs/storybook-angular": "^2.0.4",
"@analogjs/vite-plugin-angular": "2.0.4",
"@analogjs/vitest-angular": "^2.0.4",
"@angular-devkit/build-angular": "^20.3.10",
"@angular/build": "^20.3.10",
"@angular/cli": "^20.3.10",
"@angular/compiler-cli": "^20.3.12",
"@nx/angular": "^22.0.3",
"@nx/vite": "^22.0.3",
"@storybook/angular": "^10.0.7",
"@analogjs/platform": "2.2.1",
"@analogjs/storybook-angular": "^2.2.1",
"@analogjs/vite-plugin-angular": "2.2.1",
"@analogjs/vitest-angular": "^2.2.1",
"@angular/build": "^21.0.5",
"@angular/cli": "^21.0.5",
"@angular/compiler-cli": "^21.0.8",
"@angular-devkit/build-angular": "^21.0.5",
"@nx/angular": "^22.3.3",
"@nx/vite": "^22.3.3",
"@storybook/angular": "^10.1.11",
"@types/node": "^24.10.1",
"@typescript-eslint/types": "^8.46.4",
"@typescript-eslint/utils": "^8.46.4",
"angular-eslint": "^20.6.0",
"eslint": "^9.39.1",
"@typescript-eslint/types": "^8.53.0",
"@typescript-eslint/utils": "^8.53.0",
"angular-eslint": "^21.1.0",
"eslint": "^9.39.2",
"eslint-plugin-prettier": "^5.5.4",
"eslint-plugin-storybook": "^10.0.7",
"jsdom": "^27.2.0",
"npm-check-updates": "^19.1.2",
"prettier": "^3.6.2",
"storybook": "^10.0.7",
"eslint-plugin-storybook": "^10.1.11",
"jsdom": "^27.4.0",
"npm-check-updates": "^19.3.1",
"prettier": "^3.7.4",
"storybook": "^10.1.11",
"typescript": "~5.9.3",
"typescript-eslint": "^8.46.1",
"vite": "^7.1.11",
"vite-tsconfig-paths": "^5.1.4",
"vitest": "^4.0.9"
"typescript-eslint": "^8.53.0",
"vite": "^7.3.1",
"vite-tsconfig-paths": "^6.0.4",
"vitest": "^4.0.17"
},
"resolutions": {
"esbuild": "^0.25.4",
Expand All @@ -83,4 +83,4 @@
"engines": {
"node": ">=20.0.0"
}
}
}
10 changes: 6 additions & 4 deletions src/login/KcPageStory.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { Component, inject, OnInit, Type } from '@angular/core';
import { ChangeDetectorRef, Component, inject, type OnInit, type Type } from '@angular/core';
import { provideKeycloakifyAngular } from '@keycloakify/angular/login/providers/keycloakify-angular';
import { TemplateComponent } from '@keycloakify/angular/login/template';
import { getKcPage } from './KcPage';
import { getI18n } from './i18n';
import { KC_LOGIN_CONTEXT } from '@keycloakify/angular/login/tokens/kc-context';
import { createGetKcContextMock } from 'keycloakify/login/KcContext';
import { kcEnvDefaults, themeNames } from '../kc.gen';
import type { KcContextExtension, KcContextExtensionPerPage } from './KcContext';
import { classes, doMakeUserConfirmPassword, doUseDefaultCss } from './KcPage';
import { classes, doMakeUserConfirmPassword, doUseDefaultCss, getKcPage } from './KcPage';
import { getI18n } from './i18n';

const kcContextExtension: KcContextExtension = {
themeName: themeNames[0],
properties: {
Expand Down Expand Up @@ -59,11 +59,13 @@ export const decorators = (_: unknown, context: StoryContextLike) => ({
export class KcPageStory implements OnInit {
pageComponent: Type<unknown> | undefined;
kcContext = inject(KC_LOGIN_CONTEXT);
readonly #cd = inject(ChangeDetectorRef);
userProfileFormFieldsComponent: Type<unknown> | undefined;
ngOnInit() {
getKcPage(this.kcContext.pageId).then((kcPage) => {
this.pageComponent = kcPage.PageComponent;
this.userProfileFormFieldsComponent = kcPage.UserProfileFormFieldsComponent;
this.#cd.markForCheck();
});
}
}
2 changes: 1 addition & 1 deletion src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { bootstrapKcApplication } from './kc.gen';
import { appConfig } from './app.config';
import { bootstrapKcApplication } from './kc.gen';

// The following block can be uncommented to test a specific page with `yarn dev`
// Don't forget to comment back or your bundle size will increase
Expand Down
4 changes: 2 additions & 2 deletions tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,23 @@
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "bundler",
"isolatedModules": true,
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"lib": ["ES2022", "dom"],
"useDefineForClassFields": false,
"skipLibCheck": true,
"verbatimModuleSyntax": true
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
Expand Down
Loading
Loading