Skip to content

Commit 5c22a1d

Browse files
devversionzarend
devversion
authored and
zarend
committed
fix(ng-add): syntax error due to ES2020 being used for ng-add with NodeJS 12.x (#23744)
* build: update shared dev-infra package version and install CLI packages Updates the shared dev-infra package to the latest version which comes with a Bazel rule for running integration tests. We also install the CLI which we are going to test within some integration tests that are added at a later time. * build: prepare NPM packages for use in Bazel-based integration tests Updates the build tooling to prepare NPM packages from the project `package.json` to be accessible to the Bazel-based integration tests. The idea is to build tarballs for all NPM packages which can be mapped into Bazel-based integration tests. This allows us to only have a single dependency on e.g. the CLI, instead of having to maintain/update multiple versions of the CLI and devkit (as an example). Additionally, we will expose tarballs for the first-party built NPM packages like the CDK or Angular Material. Lastly, we will populate the `0.0.0-PLACEHOLDER` with an actual version when stamping is disabled. This allows us to use the first-party built NPM packages in tests with `yarn`. Yarn would otherwise complain about an invalid version. * build: setup toolchain for nodejs v12 for integration tests Sets up another toolchain for the NodeJS v12 version. This allows us to use Node v12 in integration tests without having to manually manage the Node version in the integration test which runs usually with the default Node workspace toolchain. Note that we need a small patch to `rules_nodejs` as the standalone node toolchain feature is technically internal (but shipped). Rules NodeJS is in progress of migrating from their current workspace name to `@rules_nodejs//`. We temporarily patch the external repository to work with the workspace name we use with `@build_bazel_rules_nodejs#v4`. * build: create CLI project for `ng update` v13 integration test Sets up a new CLI project for testing that `ng update` works properly with APF v13. The CLI project is generated through `ng new`. Also the `ng add @angular/material` command has been executed and changes are incorporated into this commit. * test: setup ng-update v13 integration test with Bazel Sets up the `ng update` v13 integration test to run with Bazel. The test will run `ng update` for the CDK and Material and will then compare the migrated files against some expectation files. like for custom theme file where the tilde should be removed. * build: ship schematic code with ES2015 as target This commit switches the schematic code to build as ES2015. This is necessary to support Node v12 which is still supported in LTS mode * build: create CLI project for `ng-add` integration test Creates a CLI project for the `ng-add` integration test that we will configure to run in a followed commit. * test: setup integration test for running `ng add` Sets up the integration test for running `ng add` to run with Bazel. The test is also run with NodeJS v12 which does not support ES2020 output. * ci: disable linting of the CLI integration test projects The CLI-generated projects for integration tests are not necessarily compliant with the lint rules and they should remain as unmodified as possible. * ci: re-enable normal integration tests on CI Reenables normal integration tests. There weren't any before, so we had to comment out the CircleCI run command. * build: update ts-compat integration test to work with ESM We updated the linker integration test to ESM, so that it works with the Angular compiler-cli ESM package. For this, the integration test utils are now ESM as well. This means that the ts-compat test relying on these ESM files needs to use ESM as well. The error didn't surface because with APF v13 switch we acidentally stopped running the test. (cherry picked from commit f698259)
1 parent f2ff9e3 commit 5c22a1d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+19008
-196
lines changed

‎.bazelignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,7 @@
11
node_modules
2+
3+
integration/ng-update-v13/.angular
4+
integration/ng-update-v13/node_modules
5+
6+
integration/ng-add/.angular
7+
integration/ng-add/node_modules

‎.circleci/config.yml

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
# http://yaml-online-parser.appspot.com/
99

1010
var_1: &docker_image circleci/node:16.10.0
11-
var_2: &docker-firefox-image circleci/node:16.10.0-browsers
11+
var_2: &docker-browser-image circleci/node:16.10.0-browsers
1212

1313
# **Note**: When updating the beginning of the cache key, also update the cache key to match
1414
# the new cache key prefix. This allows us to take advantage of CircleCI's fallback caching.
@@ -439,7 +439,7 @@ jobs:
439439
# ----------------------------------------------------------------------------
440440
snapshot_tests_local_browsers:
441441
docker:
442-
- image: *docker-firefox-image
442+
- image: *docker-browser-image
443443
resource_class: xlarge
444444
environment:
445445
GCP_DECRYPT_TOKEN: *gcp_decrypt_token
@@ -459,7 +459,8 @@ jobs:
459459
# Job that runs all Bazel integration tests.
460460
# ----------------------------------------------------------------------------
461461
integration_tests:
462-
<<: *job_defaults
462+
docker:
463+
- image: *docker-browser-image
463464
resource_class: xlarge
464465
environment:
465466
GCP_DECRYPT_TOKEN: *gcp_decrypt_token
@@ -472,9 +473,7 @@ jobs:
472473
- *setup_bazel_binary
473474

474475
- run: yarn integration-tests:partial-ivy
475-
# TODO: Re-enable when there are integration tests that should run with Ivy.
476-
# Currently this command fails as there are no tests.
477-
# - run: yarn integration-tests
476+
- run: yarn integration-tests
478477
- run:
479478
name: Running size integration tests (failures are reported in Slack only).
480479
command: |

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@
1010
node_modules
1111
/bower_components
1212

13+
# Angular CLI project cache
14+
.angular/
15+
1316
# Dart
1417
/.pub
1518
/.packages

‎WORKSPACE

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
88
# Add NodeJS rules
99
http_archive(
1010
name = "build_bazel_rules_nodejs",
11+
patches = ["//tools:multiple-node-versions.patch"],
1112
sha256 = "3635797a96c7bfcd0d265dacd722a07335e64d6ded9834af8d3f1b7ba5a25bba",
1213
urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/4.3.0/rules_nodejs-4.3.0.tar.gz"],
1314
)
@@ -34,6 +35,19 @@ http_archive(
3435
],
3536
)
3637

38+
http_archive(
39+
name = "rules_pkg",
40+
sha256 = "a89e203d3cf264e564fcb96b6e06dd70bc0557356eb48400ce4b5d97c2c3720d",
41+
urls = [
42+
"https://mirror.bazel.build/github.com/bazelbuild/rules_pkg/releases/download/0.5.1/rules_pkg-0.5.1.tar.gz",
43+
"https://github.com/bazelbuild/rules_pkg/releases/download/0.5.1/rules_pkg-0.5.1.tar.gz",
44+
],
45+
)
46+
47+
load("@rules_pkg//:deps.bzl", "rules_pkg_dependencies")
48+
49+
rules_pkg_dependencies()
50+
3751
load("@bazel_skylib//:workspace.bzl", "bazel_skylib_workspace")
3852

3953
bazel_skylib_workspace()
@@ -47,13 +61,27 @@ node_repositories(
4761
package_json = ["//:package.json"],
4862
)
4963

64+
load("@build_bazel_rules_nodejs//nodejs:repositories.bzl", "nodejs_register_toolchains")
65+
66+
# This call sets up another repository for Node 12.x used in integration tests. This
67+
# allows us to ensure our schematic code works with NodeJS v12 LTS. The Node v12.x
68+
# version is not fetched unless explicitly requested by the tests.
69+
nodejs_register_toolchains(
70+
name = "node12",
71+
node_version = "12.20.0",
72+
)
73+
74+
load("//tools:integration.bzl", "create_npm_package_archive_build_file")
75+
5076
yarn_install(
5177
name = "npm",
5278
# We add the postinstall patches file here so that Yarn will rerun whenever
5379
# the file is modified.
5480
data = [
5581
"//:tools/postinstall/apply-patches.js",
5682
],
83+
# Add archive targets for some NPM packages that are needed in integration tests.
84+
manual_build_file_contents = create_npm_package_archive_build_file(),
5785
package_json = "//:package.json",
5886
quiet = False,
5987
yarn_lock = "//:yarn.lock",

‎integration/ng-add/.browserslistrc

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2+
# For additional information regarding the format and rule options, please see:
3+
# https://github.com/browserslist/browserslist#queries
4+
5+
# For the full list of supported browsers by the Angular framework, please see:
6+
# https://angular.io/guide/browser-support
7+
8+
# You can see what browsers were selected by your queries by running:
9+
# npx browserslist
10+
11+
last 1 Chrome version
12+
last 1 Firefox version
13+
last 2 Edge major versions
14+
last 2 Safari major versions
15+
last 2 iOS major versions
16+
Firefox ESR

‎integration/ng-add/.editorconfig

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Editor configuration, see https://editorconfig.org
2+
root = true
3+
4+
[*]
5+
charset = utf-8
6+
indent_style = space
7+
indent_size = 2
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.ts]
12+
quote_type = single
13+
14+
[*.md]
15+
max_line_length = off
16+
trim_trailing_whitespace = false

‎integration/ng-add/.gitignore

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# compiled output
4+
/dist
5+
/tmp
6+
/out-tsc
7+
# Only exists if Bazel was run
8+
/bazel-out
9+
10+
# dependencies
11+
/node_modules
12+
13+
# profiling files
14+
chrome-profiler-events*.json
15+
16+
# IDEs and editors
17+
/.idea
18+
.project
19+
.classpath
20+
.c9/
21+
*.launch
22+
.settings/
23+
*.sublime-workspace
24+
25+
# IDE - VSCode
26+
.vscode/*
27+
!.vscode/settings.json
28+
!.vscode/tasks.json
29+
!.vscode/launch.json
30+
!.vscode/extensions.json
31+
.history/*
32+
33+
# misc
34+
/.sass-cache
35+
/connect.lock
36+
/coverage
37+
/libpeerconnection.log
38+
npm-debug.log
39+
yarn-error.log
40+
testem.log
41+
/typings
42+
43+
# System Files
44+
.DS_Store
45+
Thumbs.db

‎integration/ng-add/BUILD.bazel

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
load("@bazel_skylib//lib:dicts.bzl", "dicts")
2+
load("//tools:integration.bzl", "CLI_PROJECT_MAPPINGS")
3+
load("//tools:defaults.bzl", "node_integration_test")
4+
5+
npmPackageMappings = dicts.add(
6+
CLI_PROJECT_MAPPINGS,
7+
{
8+
"//src/cdk:npm_package_archive": "@angular/cdk",
9+
"//src/material:npm_package_archive": "@angular/material",
10+
},
11+
)
12+
13+
node_integration_test(
14+
name = "test",
15+
srcs = glob(["**/*"]),
16+
commands = [
17+
# Note: We use a cache folder within the integration test as otherwise
18+
# the NPM package mapped archive would be cached in the system.
19+
# See: https://github.com/yarnpkg/yarn/issues/2165.
20+
# TODO(devversion): determine if a solution/workaround could live in the test runner.
21+
"yarn install --cache-folder .yarn_cache_folder/",
22+
"yarn ng add @angular/material",
23+
"yarn test",
24+
],
25+
npm_packages = npmPackageMappings,
26+
tags = [
27+
# Chromium cannot run in Sandbox. For this test, sandbox is disabled.
28+
# Additionally, we need to disable RBE as this test relies on internet
29+
# access for installing the NPM packages.
30+
"no-sandbox",
31+
"no-remote-exec",
32+
],
33+
)
34+
35+
node_integration_test(
36+
name = "test_node12",
37+
srcs = glob(["**/*"]),
38+
commands = [
39+
# Note: We use a cache folder within the integration test as otherwise
40+
# the NPM package mapped archive would be cached in the system.
41+
# See: https://github.com/yarnpkg/yarn/issues/2165.
42+
# TODO(devversion): determine if a solution/workaround could live in the test runner.
43+
"yarn install --cache-folder .yarn_cache_folder/",
44+
"node --version",
45+
"yarn node --version",
46+
"yarn ng add @angular/material",
47+
"yarn test",
48+
],
49+
npm_packages = npmPackageMappings,
50+
tags = [
51+
# Chromium cannot run in Sandbox. For this test, sandbox is disabled.
52+
# Additionally, we need to disable RBE as this test relies on internet
53+
# access for installing the NPM packages.
54+
"no-sandbox",
55+
"no-remote-exec",
56+
],
57+
tool_mappings = {
58+
"@node12_host//:yarn_bin": "yarn",
59+
"@node12_host//:node_bin": "node",
60+
},
61+
)

‎integration/ng-add/README.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# NgAdd
2+
3+
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.0-next.7.
4+
5+
## Development server
6+
7+
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
8+
9+
## Code scaffolding
10+
11+
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12+
13+
## Build
14+
15+
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
16+
17+
## Running unit tests
18+
19+
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20+
21+
## Running end-to-end tests
22+
23+
Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
24+
25+
## Further help
26+
27+
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

‎integration/ng-add/angular.json

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"ng-add": {
7+
"projectType": "application",
8+
"schematics": {
9+
"@schematics/angular:component": {
10+
"style": "scss"
11+
},
12+
"@schematics/angular:application": {
13+
"strict": true
14+
}
15+
},
16+
"root": "",
17+
"sourceRoot": "src",
18+
"prefix": "app",
19+
"architect": {
20+
"build": {
21+
"builder": "@angular-devkit/build-angular:browser",
22+
"options": {
23+
"outputPath": "dist/ng-add",
24+
"index": "src/index.html",
25+
"main": "src/main.ts",
26+
"polyfills": "src/polyfills.ts",
27+
"tsConfig": "tsconfig.app.json",
28+
"inlineStyleLanguage": "scss",
29+
"assets": [
30+
"src/favicon.ico",
31+
"src/assets"
32+
],
33+
"styles": [
34+
"src/styles.scss"
35+
],
36+
"scripts": []
37+
},
38+
"configurations": {
39+
"production": {
40+
"budgets": [
41+
{
42+
"type": "initial",
43+
"maximumWarning": "500kb",
44+
"maximumError": "1mb"
45+
},
46+
{
47+
"type": "anyComponentStyle",
48+
"maximumWarning": "2kb",
49+
"maximumError": "4kb"
50+
}
51+
],
52+
"fileReplacements": [
53+
{
54+
"replace": "src/environments/environment.ts",
55+
"with": "src/environments/environment.prod.ts"
56+
}
57+
],
58+
"outputHashing": "all"
59+
},
60+
"development": {
61+
"buildOptimizer": false,
62+
"optimization": false,
63+
"vendorChunk": true,
64+
"extractLicenses": false,
65+
"sourceMap": true,
66+
"namedChunks": true
67+
}
68+
},
69+
"defaultConfiguration": "production"
70+
},
71+
"serve": {
72+
"builder": "@angular-devkit/build-angular:dev-server",
73+
"configurations": {
74+
"production": {
75+
"browserTarget": "ng-add:build:production"
76+
},
77+
"development": {
78+
"browserTarget": "ng-add:build:development"
79+
}
80+
},
81+
"defaultConfiguration": "development"
82+
},
83+
"extract-i18n": {
84+
"builder": "@angular-devkit/build-angular:extract-i18n",
85+
"options": {
86+
"browserTarget": "ng-add:build"
87+
}
88+
},
89+
"test": {
90+
"builder": "@angular-devkit/build-angular:karma",
91+
"options": {
92+
"main": "src/test.ts",
93+
"polyfills": "src/polyfills.ts",
94+
"tsConfig": "tsconfig.spec.json",
95+
"karmaConfig": "karma.conf.js",
96+
"inlineStyleLanguage": "scss",
97+
"assets": [
98+
"src/favicon.ico",
99+
"src/assets"
100+
],
101+
"styles": [
102+
"src/styles.scss"
103+
],
104+
"scripts": [],
105+
"watch": false
106+
}
107+
}
108+
}
109+
}
110+
},
111+
"defaultProject": "ng-add"
112+
}

0 commit comments

Comments
 (0)