feat(core): adds angular 20 support

feat(core): adds angular 20 support

Author: pavankjadda

.github/copilot-instructions.md

@@ -0,0 +1,54 @@
+# Copilot Instructions for Angular Projects
+
+1. **Use the Latest Angular and TypeScript**
+  - Always use the latest stable version of Angular (currently v20) and TypeScript.
+  - Code examples must reference Angular 20+ APIs and features.
+  - If unsure about a feature or API, refer to the [Angular Docs](https://angular.dev/).
+
+2. **Modern Angular Features Only**
+  - Always prefer Angular control flow syntax over legacy structural directives.
+  - Use Angular signals for state management and reactivity.
+  - Prefer input signals and output signals for component communication. See: [inputs](https://angular.dev/reference/api/core/InputSignal), [outputs](https://angular.dev/reference/api/core/OutputSignal).
+
+3. **No Legacy Decorators**
+  - Do not use or recommend `@Input` and `@Output` decorators in new examples.
+  - Use signals and Angular's latest patterns for data flow and events.
+
+4. **Template Syntax & Style**
+  - Use the latest template syntax and best practices, such as `@for`, `@if`, `@switch` (Angular's new control flow).
+  - Always use `<ng-container>` for structural grouping when needed.
+
+5. **Component Architecture**
+  - Prefer standalone components wherever possible (avoid NgModules for new features unless there’s a clear need).
+  - Encourage use of feature encapsulation with self-contained, reusable components.
+
+6. **Type Safety & Strictness**
+  - Enable `"strict": true` in `tsconfig.json` for all projects.
+  - Always provide explicit types for function signatures, variables, and observables.
+
+7. **Dependency Injection**
+  - Use `@Injectable({providedIn: 'root'})` for services unless there's a reason for a different scope.
+  - Always prefer Angular DI patterns over manual instantiation or singleton hacks.
+
+8. **API Communication**
+  - Use Angular’s `HttpClient` for all HTTP/API interactions.
+  - Prefer typed HTTP responses and error handling using RxJS.
+
+9. **State Management**
+  - For component-level state, use signals.
+  - For app-wide state, recommend using signals-based libraries or lightweight solutions compatible with Angular 20+ (e.g., SignalStore, Akita signals, etc.), but avoid heavy, legacy state libraries like NgRx unless necessary.
+
+10. **Testing**
+  - All code examples should include unit test snippets where applicable.
+  - Use Angular’s karma, jasmine testing APIs.
+
+11. **Accessibility**
+  - Ensure all code examples follow WCAG guidelines and Angular’s accessibility best practices.
+
+12. **Documentation and Comments**
+  - Comment public APIs, inputs, and outputs in all examples.
+  - Reference Angular style guide for structure and naming conventions.
+
+13. **No Deprecated APIs**
+  - Never recommend deprecated Angular APIs, patterns, or features.
+  - Double-check breaking changes or removals for each new Angular version [here](https://update.angular.io/).

.github/workflows/ci.yml

@@ -12,11 +12,11 @@ jobs:
     strategy:
       matrix:
         os: ['ubuntu-latest']
-        node: ['20']
+        node: ['latest']
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node }}
       - name: Install dependencies

.github/workflows/npm_publish.yml

@@ -9,9 +9,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: latest
       - name: Install NPM Dependencies
         run: npm i
       - name: Build project

.github/workflows/npm_publish_ssr.yml

@@ -9,9 +9,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: latest
       - name: Install NPM Dependencies
         run: npm i
       - name: Build project

angular.json

@@ -10,7 +10,7 @@
       "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "builder": "@angular/build:ng-packagr",
           "options": {
             "tsConfig": "projects/ngx-cookie-service/tsconfig.lib.json",
             "project": "projects/ngx-cookie-service/ng-package.json"
@@ -22,7 +22,7 @@
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "projects/ngx-cookie-service/tsconfig.spec.json",
@@ -44,7 +44,7 @@
       "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "builder": "@angular/build:ng-packagr",
           "options": {
             "project": "projects/ngx-cookie-service-ssr/ng-package.json"
           },
@@ -59,7 +59,7 @@
           "defaultConfiguration": "production"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "tsConfig": "projects/ngx-cookie-service-ssr/tsconfig.spec.json",
             "karmaConfig": "karma.conf.js"
@@ -70,5 +70,31 @@
   },
   "cli": {
     "analytics": "672a95e4-d4b2-4161-ac1f-25d2c513bef0"
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

karma.conf.js

@@ -10,7 +10,7 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require('@angular/build'),
     ],
     client: {
       jasmine: {
@@ -21,18 +21,15 @@ module.exports = function (config) {
       },
     },
     jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
+      suppressAll: true, // removes the duplicated traces
     },
     coverageReporter: {
       dir: require('path').join(__dirname, './coverage/pres'),
       subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
+      reporters: [{ type: 'html' }, { type: 'text-summary' }],
     },
     reporters: ['progress', 'kjhtml'],
     browsers: ['Chrome'],
-    restartOnFileChange: true
+    restartOnFileChange: true,
   });
 };