feat: update to angular v21

apps/ngu-carousel-example/src/main.server.ts

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

apps/ngu-carousel-example/tsconfig.json

@@ -1,6 +1,9 @@
 {
   "compilerOptions": {
-    "target": "ES2022"
+    "target": "ES2022",
+    "module": "preserve",
+    "moduleResolution": "bundler",
+    "lib": ["dom", "es2022"]
   },
   "files": [],
   "include": [],

apps/ngu-carousel-example/tsconfig.spec.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "types": ["jasmine", "node"],
-    "moduleResolution": "bundler"
+    "moduleResolution": "bundler",
+    "isolatedModules": true
   },
   "files": ["src/test.ts"],
   "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]

libs/ngu/carousel/.storybook/main.js

@@ -1,6 +1,6 @@
-module.exports = {
-  stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-essentials'],
+export default {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)', '../src/**/*.stories.mdx'],
+  addons: ['@storybook/addon-docs'],
   framework: {
     name: '@storybook/angular',
     options: {}

libs/ngu/carousel/.storybook/tsconfig.json

@@ -1,7 +1,10 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "emitDecoratorMetadata": true
+    "emitDecoratorMetadata": true,
+    "jsx": "react",
+    "esModuleInterop": true,
+    "skipLibCheck": true
   },
 
   "exclude": ["../**/*.spec.ts"],

libs/ngu/carousel/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@ngu/carousel",
   "version": "20.0.1",
+  "type": "module",
   "peerDependencies": {
-    "@angular/common": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "@angular/animations": "^20.0.0",
+    "@angular/common": "^21.1.0",
+    "@angular/core": "^21.1.0",
+    "@angular/animations": "^21.1.0",
     "hammerjs": "^2.0.0",
     "rxjs": "^7.0.0"
   },

libs/ngu/carousel/project.json

@@ -8,15 +8,14 @@
     "build": {
       "executor": "@nx/angular:package",
       "options": {
-        "project": "libs/ngu/carousel/ng-package.json"
+        "project": "libs/ngu/carousel/ng-package.json",
+        "tsConfig": "libs/ngu/carousel/tsconfig.lib.json"
       },
       "configurations": {
         "production": {
           "tsConfig": "libs/ngu/carousel/tsconfig.lib.prod.json"
         },
-        "development": {
-          "tsConfig": "libs/ngu/carousel/tsconfig.lib.json"
-        }
+        "development": {}
       },
       "defaultConfiguration": "production"
     },
@@ -25,7 +24,7 @@
       "options": {
         "main": "libs/ngu/carousel/src/test.ts",
         "tsConfig": "libs/ngu/carousel/tsconfig.spec.json",
-        "karmaConfig": "libs/ngu/carousel/karma.conf.js",
+        "karmaConfig": "libs/ngu/carousel/karma.conf.cjs",
         "polyfills": ["zone.js", "zone.js/testing"]
       }
     },

libs/ngu/carousel/src/lib/ngu-item/ngu-item.component.stories.ts

@@ -1,12 +1,20 @@
-import { Meta } from '@storybook/angular';
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
 import { NguItemComponent } from './ngu-item.component';
 
-export default {
-  title: 'NguItemComponent',
-  component: NguItemComponent
-} as Meta<NguItemComponent>;
+const meta: Meta<NguItemComponent> = {
+  title: 'Carousel/NguItem',
+  component: NguItemComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [NguItemComponent]
+    })
+  ]
+};
+
+export default meta;
+type Story = StoryObj<NguItemComponent>;
 
-export const Primary = {
+export const Primary: Story = {
   render: (args: NguItemComponent) => ({
     props: args
   }),

libs/ngu/carousel/src/lib/ngu-tile/ngu-tile.component.stories.ts

@@ -1,12 +1,20 @@
-import { Meta } from '@storybook/angular';
+import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
 import { NguTileComponent } from './ngu-tile.component';
 
-export default {
-  title: 'NguTileComponent',
-  component: NguTileComponent
-} as Meta<NguTileComponent>;
+const meta: Meta<NguTileComponent> = {
+  title: 'Carousel/NguTile',
+  component: NguTileComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [NguTileComponent]
+    })
+  ]
+};
+
+export default meta;
+type Story = StoryObj<NguTileComponent>;
 
-export const Primary = {
+export const Primary: Story = {
   render: (args: NguTileComponent) => ({
     props: args
   }),

libs/ngu/carousel/tsconfig.json

@@ -24,7 +24,10 @@
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
-    "target": "es2020"
+    "target": "es2020",
+    "module": "preserve",
+    "moduleResolution": "bundler",
+    "lib": ["dom", "es2022"]
   },
   "angularCompilerOptions": {
     "strictInjectionParameters": true,

libs/ngu/carousel/tsconfig.spec.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "outDir": "../../../dist/out-tsc",
     "types": ["jasmine", "node"],
-    "moduleResolution": "bundler"
+    "moduleResolution": "bundler",
+    "isolatedModules": true
   },
   "files": ["src/test.ts"],
   "include": ["**/*.spec.ts", "**/*.d.ts"]

package.json

@@ -15,47 +15,46 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/animations": "20.1.3",
-    "@angular/cdk": "20.1.3",
-    "@angular/common": "20.1.3",
-    "@angular/compiler": "20.1.3",
-    "@angular/core": "20.1.3",
-    "@angular/forms": "20.1.3",
-    "@angular/material": "20.1.3",
-    "@angular/platform-browser": "20.1.3",
-    "@angular/platform-browser-dynamic": "20.1.3",
-    "@angular/platform-server": "20.1.3",
-    "@angular/router": "20.1.3",
-    "@angular/ssr": "20.1.3",
+    "@angular/animations": "21.1.2",
+    "@angular/cdk": "21.1.2",
+    "@angular/common": "21.1.2",
+    "@angular/compiler": "21.1.2",
+    "@angular/core": "21.1.2",
+    "@angular/forms": "21.1.2",
+    "@angular/material": "21.1.2",
+    "@angular/platform-browser": "21.1.2",
+    "@angular/platform-browser-dynamic": "21.1.2",
+    "@angular/platform-server": "21.1.2",
+    "@angular/router": "21.1.2",
+    "@angular/ssr": "21.1.2",
     "@ngx-builders/analyze": "4.0.0",
-    "@nx/angular": "21.3.7",
+    "@nx/angular": "22.4.4",
     "express": "~4.18.2",
     "hammerjs": "2.0.8",
     "rxjs": "7.8.1",
     "tslib": "2.6.2",
-    "zone.js": "0.15.0"
+    "zone.js": "0.16.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "20.1.3",
-    "@angular-devkit/core": "20.1.3",
-    "@angular-devkit/schematics": "20.1.3",
-    "@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.1.0",
-    "@angular/compiler-cli": "20.1.3",
-    "@angular/language-service": "20.1.3",
-    "@cypress/webpack-dev-server": "4.1.1",
-    "@nx/cypress": "21.3.7",
-    "@nx/eslint": "21.3.7",
-    "@nx/eslint-plugin": "21.3.7",
-    "@nx/js": "21.3.7",
-    "@nx/storybook": "21.3.7",
-    "@nx/web": "21.3.7",
-    "@nx/workspace": "21.3.7",
-    "@schematics/angular": "20.1.3",
-    "@storybook/angular": "9.0.9",
-    "@storybook/core-server": "8.6.14",
+    "@angular-devkit/build-angular": "21.1.2",
+    "@angular-devkit/core": "21.1.2",
+    "@angular-devkit/schematics": "21.1.2",
+    "@angular-eslint/eslint-plugin": "21.2.0",
+    "@angular-eslint/eslint-plugin-template": "21.2.0",
+    "@angular-eslint/template-parser": "21.2.0",
+    "@angular/cli": "21.1.2",
+    "@angular/compiler-cli": "21.1.2",
+    "@angular/language-service": "21.1.2",
+    "@cypress/webpack-dev-server": "5.6.0",
+    "@nx/cypress": "22.4.4",
+    "@nx/eslint": "22.4.4",
+    "@nx/eslint-plugin": "22.4.4",
+    "@nx/js": "22.4.4",
+    "@nx/storybook": "22.4.4",
+    "@nx/web": "22.4.4",
+    "@nx/workspace": "22.4.4",
+    "@schematics/angular": "21.1.2",
+    "@storybook/angular": "10.2.4",
     "@types/express": "~4.17.21",
     "@types/hammerjs": "2.0.44",
     "@types/jasmine": "5.1.2",
@@ -65,11 +64,11 @@
     "@typescript-eslint/utils": "7.18.0",
     "autoprefixer": "^10.4.0",
     "browser-sync": "^3.0.0",
-    "cypress": "14.5.3",
+    "cypress": "15.9.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-cypress": "2.15.1",
-    "eslint-plugin-storybook": "~0.6.15",
+    "eslint-plugin-storybook": "~10.2.4",
     "html-webpack-plugin": "~5.5.3",
     "husky": "8.0.3",
     "jasmine-core": "4.6.0",
@@ -80,18 +79,19 @@
     "karma-jasmine": "5.1.0",
     "karma-jasmine-html-reporter": "2.1.0",
     "lint-staged": "~15.1.0",
-    "ng-packagr": "20.1.0",
-    "nx": "21.3.7",
+    "ng-packagr": "21.1.0",
+    "nx": "22.4.4",
     "postcss": "~8.4.31",
     "postcss-import": "~15.1.0",
     "postcss-preset-env": "~9.3.0",
     "postcss-url": "~10.1.3",
     "prettier": "3.1.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "storybook": "9.0.9",
-    "typescript": "5.8.3",
-    "webpack": "~5.89.0"
+    "storybook": "10.2.4",
+    "typescript": "5.9.3",
+    "webpack": "~5.89.0",
+    "@storybook/addon-docs": "10.2.4"
   },
   "keywords": [
     "angular",