mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
AAE-21284 Add migration guide for Angular 17 to 18 (#10910)
* AAE-21284 Add migration guide for Angular 17 to 18 * AAE-21284 Unify doc file names * AAE-21284 Redact
This commit is contained in:
109
docs/angular-migration/angular-15-16.md
Normal file
109
docs/angular-migration/angular-15-16.md
Normal file
@@ -0,0 +1,109 @@
|
||||
# Migrating from Angular 15 to Angular 16
|
||||
|
||||
This guide for migrating ADF from Angular version 15 to version 16. Follow these steps to ensure a smooth transition.
|
||||
|
||||
## 1. Update Nx
|
||||
|
||||
First, update the Nx development dependencies. Use the `nx migrate` command for this purpose.
|
||||
|
||||
```bash
|
||||
npx nx migrate 16.10.0
|
||||
```
|
||||
|
||||
Updated Nx dependencies:
|
||||
|
||||
```json
|
||||
{
|
||||
"nx": "16.10.0",
|
||||
"@nx/angular": "16.10.0",
|
||||
"@nx/eslint-plugin": "16.10.0",
|
||||
"@nx/js": "16.10.0",
|
||||
"@nx/node": "16.10.0",
|
||||
"@nx/storybook": "19.6.2",
|
||||
"@nx/workspace": "16.10.0"
|
||||
}
|
||||
```
|
||||
|
||||
**As of Nx 16 package scope has changed from `@nrwl/*` to `@nx/*`.**
|
||||
Nx's migration scripts will replace all `@nrwl` references in the project with `@nx`. This includes any imports, configuration files, and scripts.
|
||||
|
||||
## 2. Run Nx migrations
|
||||
|
||||
After the initial update a `migrations.json` file will be created containing all the additional changes that need to be made. You can run the migration script to apply these changes.
|
||||
|
||||
```bash
|
||||
npx nx migrate --run-migrations
|
||||
```
|
||||
|
||||
Those migrations should update required packages to the Angular 16 compatible version including Angular itself, Storybook, and others.
|
||||
|
||||
```json
|
||||
{
|
||||
"@angular/animations": "16.2.9",
|
||||
"@angular/cdk": "16.2.9",
|
||||
"@angular/common": "16.2.9",
|
||||
"@angular/compiler": "16.2.9",
|
||||
"@angular/core": "16.2.9",
|
||||
"@angular/forms": "16.2.9",
|
||||
"@angular/material": "16.2.9",
|
||||
"@angular/material-date-fns-adapter": "16.2.9",
|
||||
"@angular/platform-browser": "16.2.9",
|
||||
"@angular/platform-browser-dynamic": "16.2.9",
|
||||
"@angular/router": "16.2.9",
|
||||
"@schematics/angular": "16.2.9",
|
||||
"ng-packagr": "16.2.3"
|
||||
}
|
||||
```
|
||||
|
||||
Reference `storybook-migration-summary.md` file for more details on Storybook migration.
|
||||
|
||||
## 3. Manually update other dependencies
|
||||
|
||||
There are a few dependencies that require manual update, here is the list:
|
||||
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"angular-oauth2-oidc": "16.0.0",
|
||||
"@apollo/client": "3.11.4",
|
||||
"chart.js": "4.4.4",
|
||||
"@mat-datetimepicker/core": "12.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@editorjs/editorjs": "2.30.5"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```bash
|
||||
npm install --save angular-oauth2-oidc@16.0.0 @apollo/client@3.11.4 chart.js@4.4.4 @mat-datetimepicker/core@12.0.1
|
||||
npm install --save-dev @editorjs/editorjs@2.30.5
|
||||
```
|
||||
|
||||
## 4. Fixing CI/CD issues
|
||||
|
||||
### General migration issues
|
||||
|
||||
After running the migration script, you may need to manually fix some issues. Run common build targets to identify any problems.
|
||||
|
||||
```bash
|
||||
npx nx run-many --target=build --skip-nx-cache
|
||||
```
|
||||
|
||||
Work through all the problems topic by topic. If blocked by linting issues, disable the linting rules in the affected files. You can re-enable them in the next step.
|
||||
|
||||
### Lint jobs
|
||||
|
||||
After getting the build to work, run the lint jobs. Re-enable previously disabled linting rules and fix any issues that arise.
|
||||
|
||||
```bash
|
||||
npx nx run-many --target=lint --skip-nx-cache
|
||||
```
|
||||
|
||||
### Unit tests
|
||||
|
||||
Despite Angular 16 not introducing major breaking changes, you may still encounter issues with unit tests. Run the unit tests and fix any problems that arise.
|
||||
|
||||
```bash
|
||||
npx nx run-many --target=test --skip-nx-cache
|
||||
```
|
Reference in New Issue
Block a user