Angular 11 🚀 #711

leomendoza123 · 2021-03-12T20:00:45Z

Angular 11 update

Before Updating

There are no changes require to the project before running the update

Require to check on QA

A general overview of the basic application functionality
Do not check StoryBook, since was temporally removed

Next up

TsLint is been deprecated by Angular, we need to remove it
@material-extended/mde is not been maintain and needs to be removed
Storybook was removed since is currently not supported by Angular 11, this will need to be added back once Angular: Support Angular 11 storybookjs/storybook#13096 is released
ngx-cookies will need to be updated once https://github.com/stevermeister/ngx-cookie-service/pulls is publish

Angular 10 update

Things that would require QA after the merge 🧾

Chips component, currently only used to select between Password and Orci ID on /reset-password
Third-party popover component use only on the registration form after clicking the (i) icons next to some inputs
A general overview of the Storybook documentation
A general overview of the basic application functionality

Angular breaking changes checks done ✅

The following checklist can be found on the official docs

Typescript 3.6, 3.7, and 3.8 are no longer supported. Please update to Typescript 3.9.

The CLI reports a warning with the new typescript no compatible with storybook, but does not throw any error after build or while using the storybook developer server.

Input fields of type [number](https://angular.io/api/common/DecimalPipe) fire the valueChanges event only once per value change (as opposed to twice in some cases). See PR 36087.

Orcid does not contain any number type input

The minLength and maxLength validators only validate values that have a numeric length property. See PR 36157.

Orcid does not contain any number type input

Templates with unknown property bindings or unknown element names now log errors instead of warnings. See PR 36399.

Orcid won't get break by this since we do not have third-party tools triggered if a consolo.error is printed

[UrlMatcher](https://angular.io/api/router/UrlMatcher) can now return null values. See PR 36402.

UrlMatcher is never directly consumed on Orcid code

Transplanted views now refresh at insertion point only. See PR 35968.

ORCID does not relay on detached actions #21324 or TemplateRef 35400

Formatting times with the b or B format codes now supports time periods that cross midnight. See PR 36611

Orcid does not consume formatDate functions

Navigation is canceled for routes with at least one empty resolver. See PR 24621.

Orcid router does not use resolve functions 24195

External libraries checks 📚

Storybook

Storybook was updated to version 6, this included some changes to some configuration files that had breaking changes with the update. Also, the CLI auto-update throws a warning related to typescript not been supported, but it seems to work with no problem.

Angular material

Automatically updated more details, this included a required change on an implemented mixing for Orcid app theming

@material-extended/mde

This library throws a dependency warning but has been reported by on the repository that it works ok

Tslint-etc

This is an addition after the update to improve the project lint-in

Angular auto-update report 📃

A full result of the auto-upgrade report

…ular.io/?l=2&v=9.1-10.0 "Before Updating" section

@Injectable

leo@Leonardos-MacBook-Pro orcid-angular % ng update @angular/core @angular/cli --force Your global Angular CLI version (10.1.3) is greater than your local version (9.1.1). The local Angular CLI version is used. To disable this warning use "ng config -g cli.warnings.versionMismatch false". The installed local Angular CLI version is older than the latest stable version. Installing a temporary version to perform the update. Installing packages for tooling via yarn. Installed packages for tooling via yarn. Using package manager: 'yarn' Collecting installed dependencies... Found 81 dependencies. Fetching dependency metadata from registry... Package "@storybook/angular" has an incompatible peer dependency to "typescript" (requires "^3.4.0", would install "4.0.3"). Updating package.json with dependency @angular-devkit/build-angular @ "0.1001.3" (was "0.901.1")... Updating package.json with dependency @angular-devkit/core @ "10.1.3" (was "9.1.1")... Updating package.json with dependency @angular-devkit/schematics @ "10.1.3" (was "9.1.1")... Updating package.json with dependency @angular/cli @ "10.1.3" (was "9.1.1")... Updating package.json with dependency @angular/compiler-cli @ "10.1.3" (was "9.1.2")... Updating package.json with dependency @angular/language-service @ "10.1.3" (was "9.1.2")... Updating package.json with dependency typescript @ "4.0.3" (was "3.8.3")... Updating package.json with dependency @angular/animations @ "10.1.3" (was "9.1.2")... Updating package.json with dependency @angular/common @ "10.1.3" (was "9.1.2")... Updating package.json with dependency @angular/compiler @ "10.1.3" (was "9.1.2")... Updating package.json with dependency @angular/core @ "10.1.3" (was "9.1.2")... Updating package.json with dependency @angular/forms @ "10.1.3" (was "9.1.2")... Updating package.json with dependency @angular/localize @ "10.1.3" (was "9.1.2")... Updating package.json with dependency @angular/platform-browser @ "10.1.3" (was "9.1.2")... Updating package.json with dependency @angular/platform-browser-dynamic @ "10.1.3" (was "9.1.2")... Updating package.json with dependency @angular/router @ "10.1.3" (was "9.1.2")... Updating package.json with dependency @angular/service-worker @ "10.1.3" (was "9.1.2")... UPDATE package.json (6932 bytes) ✔ Packages installed successfully. ** Executing migrations of package '@angular/cli' ** ❯ Update tslint to version 6. tslint configuration does not extend "tslint:recommended" or it extends multiple configurations. Skipping rule changes as some rules might conflict. UPDATE package.json (6931 bytes) UPDATE tslint.json (2669 bytes) Migration completed. ** Executing migrations of package '@angular/core' ** ❯ Missing @Injectable and incomplete provider definition migration. As of Angular 9, enforcement of @Injectable decorators for DI is a bit stricter and incomplete provider definitions behave differently. Read more about this here: https://v9.angular.io/guide/migration-injectable Migration completed. ❯ ModuleWithProviders migration. As of Angular 10, the ModuleWithProviders type requires a generic. This migration adds the generic where it is missing. Read more about this here: https://v10.angular.io/guide/migration-module-with-providers Migration completed. ❯ Undecorated classes with Angular features migration. In version 10, classes that use Angular features and do not have an Angular decorator are no longer supported. Read more about this here: https://v10.angular.io/guide/migration-undecorated-classes UPDATE src/app/register/components/BaseStep.ts (439 bytes) Migration completed.

leo@Leonardos-MacBook-Pro orcid-angular % ng update @angular/material Using package manager: 'yarn' Collecting installed dependencies... Found 81 dependencies. Fetching dependency metadata from registry... Package "@material-extended/mde" has an incompatible peer dependency to "@angular/cdk" (requires "^8.0.0 || ^9.0.0-0", would install "10.2.2"). ✖ Migration failed: Incompatible peer dependencies found. Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together. You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later. See "/private/var/folders/cc/3wv4kpd571s96mq7n_1sbd740000gn/T/ng-bZ1xVl/angular-errors.log" for further details. leo@Leonardos-MacBook-Pro orcid-angular % leo@Leonardos-MacBook-Pro orcid-angular % leo@Leonardos-MacBook-Pro orcid-angular % leo@Leonardos-MacBook-Pro orcid-angular % ng update @angular/material --force Using package manager: 'yarn' Collecting installed dependencies... Found 81 dependencies. Fetching dependency metadata from registry... Package "@material-extended/mde" has an incompatible peer dependency to "@angular/cdk" (requires "^8.0.0 || ^9.0.0-0", would install "10.2.2"). Updating package.json with dependency @angular/cdk @ "10.2.2" (was "9.2.1")... Updating package.json with dependency @angular/material @ "10.2.2" (was "9.2.1")... UPDATE package.json (6933 bytes) ✔ Packages installed successfully. ** Executing migrations of package '@angular/cdk' ** ❯ Updates the Angular CDK to v10 Could not find TypeScript project for project: ng-orcid-e2e ✓ Updated Angular CDK to version 10 Migration completed. ** Executing migrations of package '@angular/material' ** ❯ Updates Angular Material to v10 Could not find TypeScript project for project: ng-orcid-e2e ⚠ General notice: The HammerJS v9 migration for Angular Components is not able to migrate tests. Please manually clean up tests in your project if they rely on HammerJS. Read more about migrating tests: https://git.io/ng-material-v9-hammer-migrate-tests ✓ Updated Angular Material to version 10 Migration completed.

# Conflicts: # .storybook/main.js # package-lock.json # package.json # src/app/authorize/pages/authorize/authorize.component.ts # src/app/cdk/pannel/panel/panel.component.ts # src/app/cdk/snackbar/snackbar.module.ts # src/app/core/affiliations-grouping/affiliations-grouping.service.spec.ts # src/app/core/inbox/inbox.service.ts # src/app/core/profile/profile.service.ts # src/app/core/record-affiliations/record-affiliations.service.spec.ts # src/app/core/record/record.service.ts # src/app/core/register/register.service.ts # src/app/guards/authorize.guard.ts # src/app/guards/register.guard.ts # src/app/guards/sign-in.guard.ts # src/app/institutional/pages/institutional/institutional.component.ts # src/app/profile/components/profile-activities-affiliation/profile-activities-affiliation.component.spec.ts # src/app/profile/components/profile-activities-affiliations/profile-activities-affiliations.component.spec.ts # src/app/profile/components/profile-activities-work/profile-activities-work.component.spec.ts # src/app/profile/components/profile-activities-works/profile-activities-works.component.spec.ts # src/app/profile/components/profile-activities/profile-activities.component.spec.ts # src/app/profile/components/profile-person-detail/profile-person-detail.component.spec.ts # src/app/profile/pages/profile-page/profile-page.component.ts # src/app/record/components/side-bar/side-bar.component.ts # src/app/register/components/step-a/step-a.component.ts # src/polyfills.ts # yarn.lock

This reverts commit 8d6ecf1.

…ybook#13096

…cid-angular into feature/angular-11-update

leomendoza123 added 20 commits September 26, 2020 14:09

Small changes describe on the angular update guide https://update.ang…

931bf2c

…ular.io/?l=2&v=9.1-10.0 "Before Updating" section

Remove entry components use

422ec5f

Update storybook

f6870ef

Fix storyboook breaking changes

fa66e1b

remove package json

f22b157

Fix breaking internal material changes

8dedd45

Fix angular 10 optimisation warnings

f6d3a59

Add tslint-etc

c4a2193

Update ts linst changed names and add tsling-etc

53c80cc

Run tslint-etc rules fixes

aa126cd

Fix color on chips after manterial 10 update

9f25319

🤖 GITHUB ACTIONS: formatting 🤖

95f93e9

General check

8d823c7

Update @angular/core @angular/cli

416cf8f

Update angular material

e00fe50

Add ESLINT

8d6ecf1

Revert "Add ESLINT"

be1a617

This reverts commit 8d6ecf1.

leomendoza123 requested a review from amontenegro March 12, 2021 20:00

leomendoza123 added 8 commits March 12, 2021 20:06

🤖 GITHUB ACTIONS: formatting 🤖

4b86eec

Temporal stop of storybook on CI

d292ae9

🤖 GITHUB ACTIONS: formatting 🤖

c511dd6

Remove storybook until Angular 11 support is release storybookjs/stor…

6bda170

…ybook#13096

Fix translations

50c7925

Merge branch 'feature/angular-11-update' of ssh://github.com/ORCID/or…

7979696

…cid-angular into feature/angular-11-update

🤖 GITHUB ACTIONS: formatting 🤖

35bbba3

🤖 GITHUB ACTIONS: testing languages 🤖

0f145e0

amontenegro merged commit cbe9e9f into development Mar 13, 2021

amontenegro deleted the feature/angular-11-update branch June 18, 2021 19:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angular 11 🚀 #711

Angular 11 🚀 #711

leomendoza123 commented Mar 12, 2021 •

edited

Loading

Angular 11 🚀 #711

Angular 11 🚀 #711

Conversation

leomendoza123 commented Mar 12, 2021 • edited Loading

Angular 11 update

Before Updating

Require to check on QA

Next up

Angular 10 update

Things that would require QA after the merge 🧾

Angular breaking changes checks done ✅

External libraries checks 📚

Angular auto-update report 📃

leomendoza123 commented Mar 12, 2021 •

edited

Loading