chore: update to angular 21

Waiting for ng-doc to update

Author: MGREMY

apps/docs/src/main.server.ts

@@ -1,8 +1,14 @@
 import { AppComponent } from './app/app.component';
 import { config } from './app/app.config.server';
 
+import type { BootstrapContext } from '@angular/platform-browser';
 import { bootstrapApplication } from '@angular/platform-browser';
 
-const bootstrap = () => bootstrapApplication(AppComponent, config);
+const bootstrap = (context: BootstrapContext) =>
+  bootstrapApplication(
+    AppComponent,
+    { ...config, providers: [provideZoneChangeDetection(), ...config.providers] },
+    context
+  );
 
 export default bootstrap;

apps/docs/src/main.ts

@@ -2,11 +2,14 @@ import { AppComponent } from './app/app.component';
 import { appConfig } from './app/app.config';
 import { environment } from './environments/environment';
 
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 
 if (environment.production) {
   enableProdMode();
 }
 
-bootstrapApplication(AppComponent, appConfig).catch((e) => console.log(e));
+bootstrapApplication(AppComponent, {
+  ...appConfig,
+  providers: [provideZoneChangeDetection(), ...appConfig.providers],
+}).catch((e) => console.log(e));

apps/docs/tsconfig.json

@@ -19,7 +19,9 @@
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "target": "ES2022",
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "module": "preserve",
+    "moduleResolution": "bundler"
   },
   "angularCompilerOptions": {
     "strictInjectionParameters": true,

apps/storybook/.storybook/main.ts

@@ -1,3 +1,4 @@
+// This file has been automatically migrated to valid ESM format by Storybook.
 import type { StorybookConfig } from '@storybook/angular';
 
 import { createRequire } from 'node:module';
@@ -10,7 +11,7 @@ const config: StorybookConfig = {
   staticDirs: ['../public'],
   addons: [getAbsolutePath('@storybook/addon-themes'), getAbsolutePath('@storybook/addon-docs')],
   framework: {
-    name: '@storybook/angular',
+    name: getAbsolutePath('@storybook/angular'),
     options: {},
   },
   docs: {

libs/flowbite-angular/package.json

@@ -31,12 +31,12 @@
     }
   },
   "peerDependencies": {
-    "@angular/cdk": ">=20.0.0 < 21.0.0",
-    "@angular/core": ">=20.0.0 < 21.0.0",
-    "@ng-icons/core": "^31.3.0",
-    "@ng-primitives/state": ">=0.57.0",
+    "@angular/cdk": ">=21.0.0 < 22.0.0",
+    "@angular/core": ">=21.0.0 < 22.0.0",
+    "@ng-icons/core": ">=33.0.0",
+    "@ng-primitives/state": ">=0.90.0",
     "@tailwindcss/postcss": "^4.0.0",
-    "ng-primitives": ">=0.57.0",
+    "ng-primitives": ">=0.90.0",
     "rxjs": "^7.4.0",
     "tailwind-merge": "2.5.5",
     "tailwindcss": "^4.0.0"

libs/flowbite-angular/project.json

@@ -10,15 +10,14 @@
       "executor": "@nx/angular:package",
       "outputs": ["{workspaceRoot}/dist/libs/flowbite-angular"],
       "options": {
-        "project": "libs/flowbite-angular/ng-package.json"
+        "project": "libs/flowbite-angular/ng-package.json",
+        "tsConfig": "libs/flowbite-angular/tsconfig.lib.json"
       },
       "configurations": {
         "production": {
           "tsConfig": "libs/flowbite-angular/tsconfig.lib.prod.json"
         },
-        "development": {
-          "tsConfig": "libs/flowbite-angular/tsconfig.lib.json"
-        }
+        "development": {}
       },
       "defaultConfiguration": "production"
     },

libs/flowbite-angular/tsconfig.json

@@ -17,7 +17,9 @@
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "target": "ES2022"
+    "target": "ES2022",
+    "module": "preserve",
+    "moduleResolution": "bundler"
   },
   "angularCompilerOptions": {
     "strictInjectionParameters": true,

libs/tools/package.json

@@ -6,8 +6,8 @@
   "main": "./src/index.js",
   "types": "./src/index.d.ts",
   "dependencies": {
-    "@nx/angular": "21.2.2",
-    "@nx/devkit": "21.2.2",
+    "@nx/angular": "22.3.1",
+    "@nx/devkit": "22.3.1",
     "tslib": "^2.3.0"
   },
   "generators": "./generators.json"

nx.json

@@ -105,6 +105,8 @@
       }
     },
     "projects": ["flowbite-angular"],
-    "releaseTagPattern": "flowbite-angular@v{version}"
+    "releaseTag": {
+      "pattern": "flowbite-angular@v{version}"
+    }
   }
 }

package.json

@@ -27,60 +27,60 @@
     "storybook:static-build": "nx run storybook:static-storybook"
   },
   "dependencies": {
-    "@angular/animations": "20.0.6",
-    "@angular/cdk": "20.0.5",
-    "@angular/common": "20.0.6",
-    "@angular/compiler": "20.0.6",
-    "@angular/core": "20.0.6",
-    "@angular/forms": "20.0.6",
-    "@angular/platform-browser": "20.0.6",
-    "@angular/platform-browser-dynamic": "20.0.6",
-    "@angular/platform-server": "20.0.6",
-    "@angular/router": "20.0.6",
-    "@angular/ssr": "20.0.5",
+    "@angular/animations": "21.0.6",
+    "@angular/cdk": "21.0.5",
+    "@angular/common": "21.0.6",
+    "@angular/compiler": "21.0.6",
+    "@angular/core": "21.0.6",
+    "@angular/forms": "21.0.6",
+    "@angular/platform-browser": "21.0.6",
+    "@angular/platform-browser-dynamic": "21.0.6",
+    "@angular/platform-server": "21.0.6",
+    "@angular/router": "21.0.6",
+    "@angular/ssr": "21.0.4",
     "@floating-ui/dom": "^1.6.0",
     "@ng-doc/app": "20.1.0",
     "@ng-doc/builder": "20.1.0",
     "@ng-doc/core": "20.1.0",
     "@ng-doc/ui-kit": "20.1.0",
-    "@ng-icons/core": "^31.3.0",
+    "@ng-icons/core": "^33.0.0",
     "@ng-primitives/state": "0.78.0",
-    "@nx/devkit": "21.2.2",
+    "@nx/devkit": "22.3.1",
     "@tailwindcss/postcss": "^4.0.0",
     "express": "4.18.3",
     "ng-primitives": "0.86.0",
     "postcss": "^8.5.3",
     "rxjs": "^7.4.0",
     "tailwind-merge": "2.5.5",
     "tslib": "2.8.1",
-    "zone.js": "0.15.0"
+    "zone.js": "0.16.0"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.2000.5",
-    "@angular-devkit/core": "20.0.5",
-    "@angular-devkit/schematics": "20.0.5",
-    "@angular-eslint/eslint-plugin": "20.1.1",
-    "@angular-eslint/eslint-plugin-template": "20.1.1",
-    "@angular-eslint/template-parser": "20.1.1",
-    "@angular/cli": "~20.0.0",
-    "@angular/compiler-cli": "20.0.6",
-    "@angular/language-service": "20.0.6",
+    "@angular-devkit/architect": "0.2100.4",
+    "@angular-devkit/core": "21.0.4",
+    "@angular-devkit/schematics": "21.0.4",
+    "@angular-eslint/eslint-plugin": "21.1.0",
+    "@angular-eslint/eslint-plugin-template": "21.1.0",
+    "@angular-eslint/template-parser": "21.1.0",
+    "@angular/cli": "~21.0.0",
+    "@angular/compiler-cli": "21.0.6",
+    "@angular/language-service": "21.0.6",
     "@commitlint/cli": "18.6.1",
     "@commitlint/config-conventional": "18.6.3",
     "@ianvs/prettier-plugin-sort-imports": "4.4.0",
     "@ng-doc/keywords-loaders": "20.1.0",
-    "@nx/angular": "21.2.2",
-    "@nx/eslint": "21.2.2",
-    "@nx/eslint-plugin": "21.2.2",
-    "@nx/js": "21.2.2",
-    "@nx/plugin": "21.2.2",
-    "@nx/storybook": "^21.2.2",
-    "@nx/web": "21.2.2",
-    "@nx/workspace": "21.2.2",
-    "@schematics/angular": "20.0.5",
-    "@storybook/addon-docs": "9.0.15",
-    "@storybook/addon-themes": "9.0.15",
-    "@storybook/angular": "9.0.15",
+    "@nx/angular": "22.3.1",
+    "@nx/eslint": "22.3.1",
+    "@nx/eslint-plugin": "22.3.1",
+    "@nx/js": "22.3.1",
+    "@nx/plugin": "22.3.1",
+    "@nx/storybook": "22.3.1",
+    "@nx/web": "22.3.1",
+    "@nx/workspace": "22.3.1",
+    "@schematics/angular": "21.0.4",
+    "@storybook/addon-docs": "10.1.10",
+    "@storybook/addon-themes": "10.1.10",
+    "@storybook/angular": "10.1.10",
     "@swc-node/register": "~1.9.1",
     "@swc/cli": "~0.6.0",
     "@swc/core": "~1.5.7",
@@ -93,23 +93,23 @@
     "eslint": "8.57.0",
     "eslint-config-prettier": "10.1.2",
     "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-storybook": "9.0.15",
+    "eslint-plugin-storybook": "10.1.10",
     "husky": "9.1.7",
     "jsonc-eslint-parser": "2.4.0",
     "lint-staged": "15.2.10",
-    "ng-packagr": "20.0.1",
-    "nx": "21.2.2",
+    "ng-packagr": "21.0.1",
+    "nx": "22.3.1",
     "postcss-loader": "8.1.1",
     "prettier": "3.4.2",
     "prettier-eslint": "16.3.0",
     "prettier-plugin-packagejson": "2.5.6",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "shiki": "1.24.2",
-    "storybook": "9.0.15",
+    "storybook": "10.1.10",
     "stylelint": "16.12.0",
     "stylelint-config-standard": "36.0.1",
     "tailwindcss": "^4.0.0",
     "ts-node": "10.9.2",
-    "typescript": "5.8.3"
+    "typescript": "5.9.3"
   }
 }