Skip to content

Commit 7fda57c

Browse files
xidedixxidedix
committed
chore(dependencies): update to Angular 21 
1 parent 6cd6101 commit 7fda57c

File tree

14 files changed

+181
-84
lines changed

14 files changed

+181
-84
lines changed

‎.github/copilot-instructions.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
2+
You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
3+
4+
## TypeScript Best Practices
5+
6+
- Use strict type checking
7+
- Prefer type inference when the type is obvious
8+
- Avoid the `any` type; use `unknown` when type is uncertain
9+
10+
## Angular Best Practices
11+
12+
- Always use standalone components over NgModules
13+
- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
14+
- Use signals for state management
15+
- Implement lazy loading for feature routes
16+
- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
17+
- Use `NgOptimizedImage` for all static images.
18+
- `NgOptimizedImage` does not work for inline base64 images.
19+
20+
## Accessibility Requirements
21+
22+
- It MUST pass all AXE checks.
23+
- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
24+
25+
### Components
26+
27+
- Keep components small and focused on a single responsibility
28+
- Use `input()` and `output()` functions instead of decorators
29+
- Use `computed()` for derived state
30+
- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
31+
- Prefer inline templates for small components
32+
- Prefer Reactive forms instead of Template-driven ones
33+
- Do NOT use `ngClass`, use `class` bindings instead
34+
- Do NOT use `ngStyle`, use `style` bindings instead
35+
- When using external templates/styles, use paths relative to the component TS file.
36+
37+
## State Management
38+
39+
- Use signals for local component state
40+
- Use `computed()` for derived state
41+
- Keep state transformations pure and predictable
42+
- Do NOT use `mutate` on signals, use `update` or `set` instead
43+
44+
## Templates
45+
46+
- Keep templates simple and avoid complex logic
47+
- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
48+
- Use the async pipe to handle observables
49+
- Do not assume globals like (`new Date()`) are available.
50+
- Do not write arrow functions in templates (they are not supported).
51+
52+
## Services
53+
54+
- Design services around a single responsibility
55+
- Use the `providedIn: 'root'` option for singleton services
56+
- Use the `inject()` function instead of constructor injection

‎.prettierrc.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,13 @@ module.exports = {
33
trailingComma: 'none',
44
singleQuote: true,
55
printWidth: 120,
6-
tabWidth: 2
6+
tabWidth: 2,
7+
overrides: [
8+
{
9+
files: '*.html',
10+
options: {
11+
parser: 'angular'
12+
}
13+
}
14+
]
715
};

‎AGENTS.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
2+
You are an expert in TypeScript, Angular, and scalable web application development. You write functional, maintainable, performant, and accessible code following Angular and TypeScript best practices.
3+
4+
## TypeScript Best Practices
5+
6+
- Use strict type checking
7+
- Prefer type inference when the type is obvious
8+
- Avoid the `any` type; use `unknown` when type is uncertain
9+
10+
## Angular Best Practices
11+
12+
- Always use standalone components over NgModules
13+
- Must NOT set `standalone: true` inside Angular decorators. It's the default in Angular v20+.
14+
- Use signals for state management
15+
- Implement lazy loading for feature routes
16+
- Do NOT use the `@HostBinding` and `@HostListener` decorators. Put host bindings inside the `host` object of the `@Component` or `@Directive` decorator instead
17+
- Use `NgOptimizedImage` for all static images.
18+
- `NgOptimizedImage` does not work for inline base64 images.
19+
20+
## Accessibility Requirements
21+
22+
- It MUST pass all AXE checks.
23+
- It MUST follow all WCAG AA minimums, including focus management, color contrast, and ARIA attributes.
24+
25+
### Components
26+
27+
- Keep components small and focused on a single responsibility
28+
- Use `input()` and `output()` functions instead of decorators
29+
- Use `computed()` for derived state
30+
- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
31+
- Prefer inline templates for small components
32+
- Prefer Reactive forms instead of Template-driven ones
33+
- Do NOT use `ngClass`, use `class` bindings instead
34+
- Do NOT use `ngStyle`, use `style` bindings instead
35+
- When using external templates/styles, use paths relative to the component TS file.
36+
37+
## State Management
38+
39+
- Use signals for local component state
40+
- Use `computed()` for derived state
41+
- Keep state transformations pure and predictable
42+
- Do NOT use `mutate` on signals, use `update` or `set` instead
43+
44+
## Templates
45+
46+
- Keep templates simple and avoid complex logic
47+
- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
48+
- Use the async pipe to handle observables
49+
- Do not assume globals like (`new Date()`) are available.
50+
- Do not write arrow functions in templates (they are not supported).
51+
52+
## Services
53+
54+
- Design services around a single responsibility
55+
- Use the `providedIn: 'root'` option for singleton services
56+
- Use the `inject()` function instead of constructor injection

‎CLI.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# @coreui/angular v5
1+
# @coreui/angular v5.6
22

3-
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.0.2.
3+
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.2.
44

55
## Development server
66

‎README.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<h3 align="center">CoreUI Components for Angular</h3>
1212

1313
<p align="center">
14-
Angular Components Library built on top of Bootstrap 5.3 and TypeScript 5.8
14+
Angular Components Library built on top of Bootstrap 5.x and TypeScript 5.9
1515
<br>
1616
<a href="https://coreui.io/angular/docs/" target="_blank">Explore <strong>CoreUI for Angular docs and examples »</strong></a>
1717
<br>
@@ -39,7 +39,7 @@ Featured CoreUI for Angular libraries:
3939
### Status
4040

4141
![angular][angular-badge]
42-
[![npm-coreui-angular-v5-ng20][npm-coreui-angular-badge-v5-ng20]][npm-coreui-angular]
42+
[![npm-coreui-angular-v5-ng21][npm-coreui-angular-badge-v5-ng21]][npm-coreui-angular]
4343
[![npm-coreui-angular-latest][npm-coreui-angular-badge-latest]][npm-coreui-angular]
4444
[![npm-coreui-angular-next][npm-coreui-angular-badge-next]][npm-coreui-angular]
4545
[![NPM downloads][npm-coreui-angular-download]][npm-coreui-angular]
@@ -78,7 +78,7 @@ Featured CoreUI for Angular libraries:
7878
Before you begin, make sure your development environment includes `Node.js®` and `npm` package manager.
7979

8080
###### Node.js
81-
[**Angular 20**](https://angular.dev/overview) requires `Node.js` LTS version `^20.19`, `^22.12` or `^24.0`.
81+
[**Angular 21**](https://angular.dev/overview) requires `Node.js` LTS version `^20.19`, `^22.12` or `^24.0`.
8282

8383
- To check your version, run `node -v` in a terminal/console window.
8484
- To get `Node.js`, go to [nodejs.org](https://nodejs.org/).
@@ -231,9 +231,9 @@ Thanks to all the backers and sponsors! Support this project by [becoming a back
231231

232232
Copyright 2025 creativeLabs Łukasz Holeczek. Code released under the [MIT License](https://github.com/coreui/coreui-angular/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
233233

234-
[npm-coreui-angular-badge-v5-ng20]: https://img.shields.io/npm/v/@coreui/angular/v5-ng20?style=flat-square&color=brightgreen
234+
[npm-coreui-angular-badge-v5-ng21]: https://img.shields.io/npm/v/@coreui/angular/v5-ng21?style=flat-square&color=brightgreen
235235
[npm-coreui-angular-badge-latest]: https://img.shields.io/npm/v/@coreui/angular/latest?style=flat-square&color=brightgreen
236236
[npm-coreui-angular-badge-next]: https://img.shields.io/npm/v/@coreui/angular/next?style=flat-square&color=red
237237
[npm-coreui-angular]: https://www.npmjs.com/package/@coreui/angular
238238
[npm-coreui-angular-download]: https://img.shields.io/npm/dm/@coreui/angular.svg?style=flat-square
239-
[angular-badge]: https://img.shields.io/badge/angular-^20.3.0-lightgrey.svg?style=flat-square&logo=angular
239+
[angular-badge]: https://img.shields.io/badge/angular-^21.0.0-lightgrey.svg?style=flat-square&logo=angular

‎angular.json‎

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
33
"cli": {
44
"analytics": false,
5-
"schematicCollections": [
6-
"@angular-eslint/schematics"
7-
]
5+
"schematicCollections": ["@angular-eslint/schematics"],
6+
"packageManager": "npm"
87
},
98
"version": 1,
109
"newProjectRoot": "projects",
@@ -40,20 +39,13 @@
4039
"options": {
4140
"main": "projects/coreui-angular/src/test.ts",
4241
"tsConfig": "projects/coreui-angular/tsconfig.spec.json",
43-
"polyfills": [
44-
"zone.js",
45-
"zone.js/testing"
46-
],
4742
"karmaConfig": "projects/coreui-angular/karma.conf.js"
4843
}
4944
},
5045
"lint": {
5146
"builder": "@angular-eslint/builder:lint",
5247
"options": {
53-
"lintFilePatterns": [
54-
"projects/coreui-angular/**/*.ts",
55-
"projects/coreui-angular/**/*.html"
56-
],
48+
"lintFilePatterns": ["projects/coreui-angular/**/*.ts", "projects/coreui-angular/**/*.html"],
5749
"eslintConfig": "projects/coreui-angular/eslint.config.js"
5850
}
5951
}
@@ -90,10 +82,6 @@
9082
"options": {
9183
"main": "projects/coreui-angular-chartjs/src/test.ts",
9284
"tsConfig": "projects/coreui-angular-chartjs/tsconfig.spec.json",
93-
"polyfills": [
94-
"zone.js",
95-
"zone.js/testing"
96-
],
9785
"karmaConfig": "projects/coreui-angular-chartjs/karma.conf.js"
9886
}
9987
},
@@ -140,20 +128,13 @@
140128
"options": {
141129
"main": "projects/coreui-icons-angular/src/test.ts",
142130
"tsConfig": "projects/coreui-icons-angular/tsconfig.spec.json",
143-
"polyfills": [
144-
"zone.js",
145-
"zone.js/testing"
146-
],
147131
"karmaConfig": "projects/coreui-icons-angular/karma.conf.js"
148132
}
149133
},
150134
"lint": {
151135
"builder": "@angular-eslint/builder:lint",
152136
"options": {
153-
"lintFilePatterns": [
154-
"projects/coreui-icons-angular/**/*.ts",
155-
"projects/coreui-icons-angular/**/*.html"
156-
],
137+
"lintFilePatterns": ["projects/coreui-icons-angular/**/*.ts", "projects/coreui-icons-angular/**/*.html"],
157138
"eslintConfig": "projects/coreui-icons-angular/eslint.config.js"
158139
}
159140
}

‎package.json‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -39,48 +39,48 @@
3939
"link:icons": "cd dist/coreui-icons-angular/ && npm link"
4040
},
4141
"private": true,
42+
"packageManager": "npm@11.6.4",
4243
"dependencies": {
43-
"@angular/animations": "^20.3.14",
44-
"@angular/cdk": "^20.2.14",
45-
"@angular/common": "^20.3.14",
46-
"@angular/compiler": "^20.3.14",
47-
"@angular/core": "^20.3.14",
48-
"@angular/forms": "^20.3.14",
49-
"@angular/localize": "^20.3.14",
50-
"@angular/platform-browser": "^20.3.14",
51-
"@angular/platform-browser-dynamic": "^20.3.14",
52-
"@angular/router": "^20.3.14",
44+
"@angular/animations": "^21.0.3",
45+
"@angular/cdk": "^21.0.2",
46+
"@angular/common": "^21.0.3",
47+
"@angular/compiler": "^21.0.3",
48+
"@angular/core": "^21.0.3",
49+
"@angular/forms": "^21.0.3",
50+
"@angular/localize": "^21.0.3",
51+
"@angular/platform-browser": "^21.0.3",
52+
"@angular/router": "^21.0.3",
5353
"@coreui/chartjs": "~4.1.0",
5454
"@coreui/icons": "^3.0.1",
5555
"@popperjs/core": "~2.11.8",
5656
"chart.js": "^4.5.1",
5757
"lodash-es": "^4.17.21",
5858
"rxjs": "~7.8.2",
5959
"tslib": "^2.8.1",
60-
"zone.js": "~0.15.1"
60+
"zone.js": "~0.16.0"
6161
},
6262
"devDependencies": {
63-
"@angular-devkit/schematics": "^20.3.12",
64-
"@angular/build": "^20.3.12",
65-
"@angular/cli": "^20.3.12",
66-
"@angular/compiler-cli": "^20.3.14",
67-
"@angular/language-service": "^20.3.14",
63+
"@angular-devkit/schematics": "^21.0.2",
64+
"@angular/build": "^21.0.2",
65+
"@angular/cli": "^21.0.2",
66+
"@angular/compiler-cli": "^21.0.3",
67+
"@angular/language-service": "^21.0.3",
6868
"@types/jasmine": "^5.1.13",
6969
"@types/lodash-es": "^4.17.12",
70-
"@types/node": "^22.19.1",
71-
"angular-eslint": "^20.7.0",
70+
"@types/node": "^24.10.1",
71+
"angular-eslint": "^21.1.0",
7272
"copyfiles": "^2.4.1",
7373
"eslint": "^9.39.1",
74-
"jasmine-core": "^5.12.1",
74+
"jasmine-core": "^5.13.0",
7575
"karma": "^6.4.4",
7676
"karma-chrome-launcher": "^3.2.0",
7777
"karma-coverage": "^2.2.1",
7878
"karma-jasmine": "^5.1.0",
7979
"karma-jasmine-html-reporter": "^2.1.0",
80-
"ng-packagr": "^20.3.2",
81-
"prettier": "^3.6.2",
80+
"ng-packagr": "^21.0.0",
81+
"prettier": "^3.7.4",
8282
"typescript": "~5.9.3",
83-
"typescript-eslint": "^8.48.0"
83+
"typescript-eslint": "^8.48.1"
8484
},
8585
"keywords": [
8686
"angular",
@@ -103,10 +103,10 @@
103103
"url": "git+https://github.com/coreui/coreui-angular.git"
104104
},
105105
"config": {
106-
"version_short": "5.5"
106+
"version_short": "5.6"
107107
},
108108
"engines": {
109109
"node": "^20.19.0 || ^22.12.0 || ^24.0.0",
110-
"npm": ">=9"
110+
"npm": ">=10"
111111
}
112112
}

‎projects/coreui-angular-chartjs/README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</a>
99
</p>
1010

11-
<h3 align="center">CoreUI Angular wrapper for Chart.js v4</h3>
11+
<h3 align="center">CoreUI Angular wrapper for Chart.js v4.5</h3>
1212

1313
<p align="center">
1414
<a href="https://coreui.io/angular/docs/" target="_blank">Explore <strong>@coreui/angular-chartjs docs & examples »</strong></a>
@@ -35,18 +35,18 @@ Featured CoreUI for Angular libraries:
3535
### Status
3636

3737
![angular][angular-badge]
38-
[![npm package][npm-badge-v5-ng20]][npm]
38+
[![npm package][npm-badge-v5-ng21]][npm]
3939
[![npm package][npm-badge-latest]][npm]
4040
[![npm package][npm-badge-next]][npm]
4141
[![NPM downloads][npm-download]][npm]
4242
[![Project chartjs check](https://github.com/coreui/coreui-angular/actions/workflows/project-chartjs-check.yml/badge.svg)](https://github.com/coreui/coreui-angular/actions/workflows/project-chartjs-check.yml)
4343

44-
[npm-badge-v5-ng20]: https://img.shields.io/npm/v/@coreui/angular-chartjs/v5-ng20?style=flat-square&color=brightgreen
44+
[npm-badge-v5-ng21]: https://img.shields.io/npm/v/@coreui/angular-chartjs/v5-ng21?style=flat-square&color=brightgreen
4545
[npm-badge-latest]: https://img.shields.io/npm/v/@coreui/angular-chartjs/latest?style=flat-square&color=brightgreen
4646
[npm-badge-next]: https://img.shields.io/npm/v/@coreui/angular-chartjs/next?style=flat-square&color=red
4747
[npm]: https://www.npmjs.com/package/@coreui/angular-chartjs
4848
[npm-download]: https://img.shields.io/npm/dm/@coreui/angular-chartjs.svg?style=flat-square
49-
[angular-badge]: https://img.shields.io/badge/angular-^20.3.0-lightgrey.svg?style=flat-square&logo=angular
49+
[angular-badge]: https://img.shields.io/badge/angular-^21.0.0-lightgrey.svg?style=flat-square&logo=angular
5050

5151
##### install:
5252

@@ -57,9 +57,9 @@ ng add @coreui/angular-chartjs
5757

5858
- or npm
5959
```bash
60-
npm install chart.js@4
60+
npm install chart.js@4.5
6161
npm install @coreui/chartjs@~4.1
62-
npm install @coreui/angular-chartjs@~5.5
62+
npm install @coreui/angular-chartjs@~5.6
6363
````
6464
6565
##### import:

‎projects/coreui-angular-chartjs/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"url": "https://github.com/coreui/coreui-angular/issues"
2626
},
2727
"peerDependencies": {
28-
"@angular/core": "^20.3.14",
28+
"@angular/core": "^21.0.0",
2929
"@coreui/chartjs": "^4.1.0",
3030
"chart.js": "^4.5.0"
3131
},

0 commit comments

Comments
 (0)