Closed gfellerph closed 2 years ago
Migrationtest with Project: kvm-app-web-client
Protocol:
nvm use 13.14.0
npm install
npm uninstall @******/common-web-frontend
npm install @swisspost/design-system-styles@beta
ng update @angular/core@13 @angular/cli@13
nvm use 16.17.1
npx ng update @swisspost/design-system-styles --from=4 --to=5 --migrate-only
Using package manager: 'npm' Collecting installed dependencies... Found 72 dependencies. Migrations for package were not found.
nvm use 14.15.0
npm install @swisspost/design-system-migrations@beta
nvm use 16.17.1
npx ng update @swisspost/design-system-styles --from=4 --to=5 --migrate-only
Using package manager: 'npm' Collecting installed dependencies... Found 73 dependencies. Executing migrations of package '@swisspost/design-system-styles'
As of Design System v5 backgrounds make extensive use of CSS variables, therefore the .text-auto and .bg-[color]-opacity-80 classes are deprecated. Migration completed.
https://getbootstrap.com/docs/5.0/migration/#badges. Migration completed.
https://getbootstrap.com/docs/5.0/migration/#buttons. Migration completed.
https://getbootstrap.com/docs/5.0/migration/#close-button. Migration completed.
https://getbootstrap.com/docs/5.0/migration/#forms. Migration completed.
https://getbootstrap.com/docs/5.0/migration/#rtl. Migration completed.
npm run start
@******/common-web-frontend
=> @swisspost/design-system-styles/
@swisspost/design-system-styles/cwf
=> @swisspost/design-system-styles/core
@swisspost/design-system-styles/core'
=> @swisspost/design-system-styles/core' as post
cwf.
=> post.
lib/cwf-license
detail-summary
with post-accordion
close-button
elementmedia-breakpoint-down
mixin callstext-auto
classessizing
classesinverted
classesbtn-icon
class from buttons with icon and text@gfellerph Please see the branch {project-repo}/test/migration-testing-design-system-4-to-5.
I tested the migration on real projects and here are my feedback:
Uninstall the old packages
npm uninstall @****/common-web-frontend @*****/common-web-frontend-intranet-header
✔Automatic migration tool
Component migration
ngbButtonLabel
in the NgBootstrap/Buttons section so that it's easier to find in a project :o:General remarks:
@alizedebray, the reason we cannot provide the uninstall command is, the internal package names are a secret that should not be made public due to dependency confusion attacks.
@alizedebray Some Changes have allready been implemented in the migrations documentation before. See: PR #590. I marked those changes in your comment above (✔). Some other CRs are not 100% clear (I marked them with :o:), please feel free to include the desired changes in a new branch.
When updating angular (for example from v12 to v13):
https://update.angular.io/?v=12.0-13.0 tells you to run the command: ng update @angular/core@13 @angular/cli@13
If the installation fails, because of incompatible or missing peer dependencies:
Install the missing peer dependencies first: npm i tslib@2
Then add the incompatible peer dependencies to the update command and use the given main versions to update to.
In the above case the command would become:
ng update @angular/core@13 @angular/cli@13 @angular-eslint/schematics@13 @ngrx/effects@13 @ngrx/store@13
Test the migration instructions and @swisspost/design-system-migrations (based on #487) on at least 3 real projects.