Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Upgrade Angular (to 14) and related dependencies #6066

Merged
merged 3 commits into from
Nov 28, 2022

Conversation

bmd3k
Copy link
Contributor

@bmd3k bmd3k commented Nov 22, 2022

Upgrade Angular to version 14 and related dependencies appropriately.

See: https://github.com/tensorflow/tensorboard/blob/master/DEVELOPMENT.md#updating-angular
See: https://update.angular.io/?l=3&v=13.0-14.0
See: https://dev.to/ngrx/announcing-ngrx-v14-action-groups-componentstore-lifecycle-hooks-eslint-package-revamped-ngrx-component-and-more-18ck

Highlights:

  • Upgrade the following set of dependencies:
    • typescript: 4.7.4
    • @angular/* and @angular-devkit: 14.2.X
    • @ngrx/*: 14.3.X
    • rxjs: 7.5.7
    • zone.js 0.12.0
    • ngx-color-picker: 13.0.0
  • Vulcanize.java had to be updated to be slightly less aggressive for finding sourceMappingUrls. It was not playing well with some JS being output by the build tooling.
  • A test had to be updated to find another theoretical XSS attack string now that 'data:text/html' is no longer considered a threat by the Angular library.
  • Impact on binaries and performance:
    • The '//tensorboard' tb_webapp_binary.js grows slightly from 2,559,890 bytes to 2,858,626 bytes.
    • The '//tensorboard' polymer binary has same size at 3,169,051 bytes.
    • The '//tensorboard:dev' tb_webapp_binary.js grows slightly from 7,005,529 bytes to 7,120,348 bytes.

@@ -26,7 +26,7 @@ import {
} from '../experiments/store/testing';
import {
buildFeatureFlag,
buildFeatureFlagState as buildFeatureFlagState,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Admittedly not entirely certain why the formatter now catches this. Perhaps it has something to do with the TypeScript upgrade.

@japie1235813
Copy link
Contributor

Patched and updated. Lgtm

A couple of questions:

  • How do you decide the sub versions? e.g. "@angular/cli": "^14.2.9", instead of 14 as listed in update angular doc
  • Same question for typescript. The version listed in the doc 4.7.x How do you decide it's .2. And does this mean the upgrade to 4.8 will come later?
  • Could you help me understand where zone.js version is needed and why do we need to upgrade it?

@bmd3k
Copy link
Contributor Author

bmd3k commented Nov 28, 2022

Patched and updated. Lgtm

A couple of questions:

  • How do you decide the sub versions? e.g. "@angular/cli": "^14.2.9", instead of 14 as listed in update angular doc

I look at www.npmjs.com for each individual library and choose the latest version in the major "14" series.

So, for example, '@angular/cli': https://www.npmjs.com/package/@angular/cli?activeTab=versions. At the time I performed the upgrade the latest version was 14.2.9. (They have since released a 14.2.10).

  • Same question for typescript. The version listed in the doc 4.7.x How do you decide it's .2. And does this mean the upgrade to 4.8 will come later?

Similarly, I look at https://www.npmjs.com/package/typescript?activeTab=versions and see the latest version in the minor series "4.7" is 4.7.4.

The upgrade to 4.8 can probably come before the next Angular upgrade as it should maintain backward compatibility. In fact I intend to try this week.

  • Could you help me understand where zone.js version is needed and why do we need to upgrade it?

zone.js is developed and used by Angular. Stephan recommended we upgrade it whenever we upgrade Angular but I agree this isn't really called out in the documentation.

@bmd3k bmd3k merged commit 65566b6 into tensorflow:master Nov 28, 2022
qihach64 pushed a commit to qihach64/tensorboard that referenced this pull request Dec 19, 2022
)

Upgrade Angular to version 14 and related dependencies appropriately.

See: https://github.com/tensorflow/tensorboard/blob/master/DEVELOPMENT.md#updating-angular
See: https://update.angular.io/?l=3&v=13.0-14.0 
See: https://dev.to/ngrx/announcing-ngrx-v14-action-groups-componentstore-lifecycle-hooks-eslint-package-revamped-ngrx-component-and-more-18ck

Highlights:
* Upgrade the following set of dependencies:
  * `typescript`: 4.7.4
  * `@angular/*` and `@angular-devkit`: 14.2.X
  * `@ngrx/*`: 14.3.X
  * `rxjs`: 7.5.7
  * `zone.js` 0.12.0
  * `ngx-color-picker`: 13.0.0

* Vulcanize.java had to be updated to be slightly less aggressive for
  finding sourceMappingUrls. It was not playing well with some JS being
  output by the build tooling.

* A test had to be updated to find another theoretical XSS attack string
  now that 'data:text/html' is no longer considered a threat by the
  Angular library.
  * See: angular/angular#45860 

* Impact on binaries and performance:
  * The '//tensorboard' tb_webapp_binary.js grows slightly from 2,559,890
bytes to 2,858,626 bytes.
  * The '//tensorboard' polymer binary has same size at 3,169,051 bytes.
  * The '//tensorboard:dev' tb_webapp_binary.js grows slightly from
     7,005,529 bytes to 7,120,348 bytes.
yatbear pushed a commit to yatbear/tensorboard that referenced this pull request Mar 27, 2023
)

Upgrade Angular to version 14 and related dependencies appropriately.

See: https://github.com/tensorflow/tensorboard/blob/master/DEVELOPMENT.md#updating-angular
See: https://update.angular.io/?l=3&v=13.0-14.0 
See: https://dev.to/ngrx/announcing-ngrx-v14-action-groups-componentstore-lifecycle-hooks-eslint-package-revamped-ngrx-component-and-more-18ck

Highlights:
* Upgrade the following set of dependencies:
  * `typescript`: 4.7.4
  * `@angular/*` and `@angular-devkit`: 14.2.X
  * `@ngrx/*`: 14.3.X
  * `rxjs`: 7.5.7
  * `zone.js` 0.12.0
  * `ngx-color-picker`: 13.0.0

* Vulcanize.java had to be updated to be slightly less aggressive for
  finding sourceMappingUrls. It was not playing well with some JS being
  output by the build tooling.

* A test had to be updated to find another theoretical XSS attack string
  now that 'data:text/html' is no longer considered a threat by the
  Angular library.
  * See: angular/angular#45860 

* Impact on binaries and performance:
  * The '//tensorboard' tb_webapp_binary.js grows slightly from 2,559,890
bytes to 2,858,626 bytes.
  * The '//tensorboard' polymer binary has same size at 3,169,051 bytes.
  * The '//tensorboard:dev' tb_webapp_binary.js grows slightly from
     7,005,529 bytes to 7,120,348 bytes.
dna2github pushed a commit to dna2fork/tensorboard that referenced this pull request May 1, 2023
)

Upgrade Angular to version 14 and related dependencies appropriately.

See: https://github.com/tensorflow/tensorboard/blob/master/DEVELOPMENT.md#updating-angular
See: https://update.angular.io/?l=3&v=13.0-14.0 
See: https://dev.to/ngrx/announcing-ngrx-v14-action-groups-componentstore-lifecycle-hooks-eslint-package-revamped-ngrx-component-and-more-18ck

Highlights:
* Upgrade the following set of dependencies:
  * `typescript`: 4.7.4
  * `@angular/*` and `@angular-devkit`: 14.2.X
  * `@ngrx/*`: 14.3.X
  * `rxjs`: 7.5.7
  * `zone.js` 0.12.0
  * `ngx-color-picker`: 13.0.0

* Vulcanize.java had to be updated to be slightly less aggressive for
  finding sourceMappingUrls. It was not playing well with some JS being
  output by the build tooling.

* A test had to be updated to find another theoretical XSS attack string
  now that 'data:text/html' is no longer considered a threat by the
  Angular library.
  * See: angular/angular#45860 

* Impact on binaries and performance:
  * The '//tensorboard' tb_webapp_binary.js grows slightly from 2,559,890
bytes to 2,858,626 bytes.
  * The '//tensorboard' polymer binary has same size at 3,169,051 bytes.
  * The '//tensorboard:dev' tb_webapp_binary.js grows slightly from
     7,005,529 bytes to 7,120,348 bytes.
copybara-service bot pushed a commit to tensorflow/profiler that referenced this pull request Jun 5, 2023
Few changes:
- upgrade rules_nodejs to 5.7.0 (this will extend the nodejs versions available for installation, while we are installing the default nodejs version here with the 5.7.0 rules_nodejs toolchain)
  - following this, upgrade all bazel toolchain to 5..7.0
- correspondingly upgrade rules_sass version to 1.55.0 (I can only find rules_sass github codebase with given version tag, but not sure how to find its hash..etc. Here we are basically following tensorboard team's current setup)
- upgrade angular (and all relative packages) to v14, correspondingly upgrade ngrx to v14, and bump up rxjs.
- upgrade typescript to 4.7.4
- upgrade zone.js to 0.12.0
- import ts_library (used for bazel build) from concatjs instead of typescript, as the module is moved to concatjs. (Also added concatjs into data field of `tsc_wrapped_with_angular` target)
- added name field to the output of `rollup.config.js`, as it is a required field now for iife output type
- Added `node_modules` into `include_paths` of sass_binary build rule when building the `styles.css` file for frontend. This is because angular v14 changed to import angular/cdk from using a relative path to an new one like `@angular/cdk`, so we need to include the `node_modules` int the the searching paths to enable sassCompiler to find the theming file.
- yarn_install's exports_directories_only property now defaults to True. We must set this to False in order to remain compatible with ts_library
See: https://github.com/bazelbuild/rules_nodejs/wiki/Migrating-to-5.0#exports_directories_only
- No longer need to override node_version as rules_nodejs default version of node is now 16.12.0.
See: https://github.com/bazelbuild/rules_nodejs/wiki/Migrating-to-5.0#updated-defaults
We were overriding this only because rules_nodejs defaul version of node was too old.

**References**
- migrating to rules_nodejs 5.0: https://github.com/bazelbuild/rules_nodejs/wiki/Migrating-to-5.0
  - Instructions for 5.7.0 specifically: https://github.com/bazelbuild/rules_nodejs/releases/tag/5.7.0
- Tensorboard team's angular upgrade notes: No longer need to override node_version as rules_nodejs default version of node is now 16.12.0.
See: https://github.com/bazelbuild/rules_nodejs/wiki/Migrating-to-5.0#updated-defaults
We were overriding this only because rules_nodejs defaul version of node was too old.
- other relative tensorboard upgrade PRs (tons of information in the PR messasge):
tensorflow/tensorboard#5977
tensorflow/tensorboard#6063
tensorflow/tensorboard#6066

**Notes**
Since then, the tensorboard_plugin_profiler build process mostly follows tensorboard's setup, but we are diverging moving forward as following:
(1) The tensorboard team changed to use esbuild to bundle the js file instead of rollup (see tensorflow/tensorboard#5829). We may consider switching to esbuild in the future as well given its potential better performance, but now since it's not blocking us, we remain to use rollup.
(2) The tensorboard team uses angular teams internal toolchain to build angular with bazel for angular v13+ (see tensorflow/tensorboard#6049). Since we turns out don't have the issue tensorboard is facing when upgrading angular, we are fine to go forward without changing our bundling rules. And we tend not to because the toolchain is not publicly used and there's no guarantee on supporting in the future.

PiperOrigin-RevId: 537957341
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants