Angular 10 🙌 #578

leomendoza123 · 2020-09-27T01:11:45Z

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

leomendoza123 added 13 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

leomendoza123 requested review from amontenegro and DanielPalafox September 27, 2020 01:11

🤖 GITHUB ACTIONS: formatting 🤖

95f93e9

leomendoza123 marked this pull request as draft November 20, 2020 16:57

leomendoza123 marked this pull request as ready for review February 15, 2021 20:32

leomendoza123 marked this pull request as draft February 15, 2021 20:33

leomendoza123 changed the base branch from master to development March 12, 2021 17:27

leomendoza123 added 2 commits March 12, 2021 11:45

General check

8d823c7

🤖 GITHUB ACTIONS: formatting 🤖

09c4b8e

leomendoza123 marked this pull request as ready for review March 12, 2021 18:14

amontenegro closed this Mar 12, 2021

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angular 10 🙌 #578

Angular 10 🙌 #578

leomendoza123 commented Sep 27, 2020

Angular 10 🙌 #578

Angular 10 🙌 #578

Conversation

leomendoza123 commented Sep 27, 2020

Things that would require QA after the merge 🧾

Angular breaking changes checks done ✅

External libraries checks 📚

Angular auto-update report 📃