build(devtools): use ng-dev stamp tooling to stamp the latest git SHA in devtools

Previously, we were using ngx-build-plus with a custom webpack config to determine the git SHA at runtime.

Now, after migrating to bazel and transfering to angular/angular, this commit uses ng-dev to stamp the latest git SHA directly in angular devtools' application environment.

This commit also removes the old webpack configs.

devtools/.bazelrc

@@ -1,3 +1,7 @@
 import ../.bazelrc
 
 build --flag_alias=partial_compilation=@npm//@angular/bazel/src:partial_compilation
+
+# Snapshots should also be stamped with version control information.
+build --workspace_status_command="yarn -s ng-dev release build-env-stamp --mode=snapshot"
+build --stamp

devtools/BUILD.bazel

@@ -1,4 +1,3 @@
-load("//tools:typescript.bzl", "ts_test_project")
 load("@npm//@bazel/typescript:index.bzl", "ts_config")
 
 package(default_visibility = ["//visibility:public"])
@@ -8,17 +7,6 @@ exports_files([
     "cypress.json",
 ])
 
-ts_test_project(
-    name = "initialize_testbed",
-    srcs = [
-        "initialize_testbed.ts",
-    ],
-    deps = [
-        "@npm//@angular/core",
-        "@npm//@angular/platform-browser-dynamic",
-    ],
-)
-
 ts_config(
     name = "tsconfig-spec",
     src = "tsconfig.spec.json",

devtools/angular.json

@@ -73,10 +73,6 @@
                 {
                   "replace": "src/environments/environment.ts",
                   "with": "src/environments/environment.e2e.ts"
-                },
-                {
-                  "replace": "src/app/app.module.ts",
-                  "with": "src/app/app.e2e.module.ts"
                 }
               ]
             }
@@ -85,7 +81,6 @@
         "serve": {
           "builder": "ngx-build-plus:dev-server",
           "options": {
-            "extraWebpackConfig": "shell-dev-webpack.config.js",
             "browserTarget": "shell-dev:build"
           },
           "configurations": {
@@ -154,7 +149,6 @@
           "builder": "ngx-build-plus:browser",
           "options": {
             "outputPath": "dist/shell-chrome",
-            "extraWebpackConfig": "projects/shell-chrome/shell-chrome-webpack.config.js",
             "index": "projects/shell-chrome/src/index.html",
             "main": "projects/shell-chrome/src/main.ts",
             "polyfills": "projects/shell-chrome/src/polyfills.ts",

devtools/initialize_testbed.ts

@@ -1,10 +0,0 @@
-/**
- * @fileoverview Provides a script to initialize TestBed before tests are run.
- * This file should be included in the "runtime_deps" of a "karma_web_test_suite"
- * rule.
- */
- import {TestBed} from '@angular/core/testing';
- import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
- 
- TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
- 

devtools/package.json

@@ -19,8 +19,9 @@
     "cy:run": "yarn cypress run",
     "cy:open": "yarn cypress open",
     "cy:watch": "start-server-and-test start http-get://localhost:4200 cy:open",
-    "cy:ci": "start-server-and-test start http-get://localhost:4200 cy:run",
-    "test:ci": "bazelisk --bazelrc=../.circleci/bazel.linux.rc test //...",
+    "start:ci": "bazelisk run src:devserver",
+    "cy:ci": "start-server-and-test start:ci http-get://localhost:4200 cy:run",
+    "test:ci": "bazelisk test //...",
     "build:chrome:ci": "bazelisk build projects/shell-chrome/src:prodapp",
     "prettier": "prettier --write \"{,!(node_modules|dist|build|coverage)/**/}*.{js,jsx,ts,tsx,json}\"",
     "prettier:fix": "pretty-quick --staged"
@@ -45,7 +46,6 @@
     "@babel/cli": "^7.16.0",
     "@babel/core": "^7.16.0",
     "@types/node": "^16.7.1",
-    "ajv-formats": "^2.1.1",
     "d3": "^5.7.0",
     "memo-decorator": "^2.0.1",
     "ngx-flamegraph": "0.0.10",

devtools/packages.bzl

@@ -1,33 +1,3 @@
-# Each individual package uses a placeholder for the version of Angular to ensure they're
-# all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
-# version for the placeholders.
-ANGULAR_PACKAGE_VERSION = "^13.0.0 || ^14.0.0-0"
-MDC_PACKAGE_VERSION = "14.0.0-canary.1af7c1c4a.0"
-TSLIB_PACKAGE_VERSION = "^2.3.0"
-RXJS_PACKAGE_VERSION = "^6.5.3 || ^7.4.0"
-
-# Each placeholder is used to stamp versions during the build process, replacing the key with it's
-# value pair. These replacements occur during building of `npm_package` and `ng_package` stamping in
-# the peer dependencies and versions, primarily in `package.json`s.
-NPM_PACKAGE_SUBSTITUTIONS = {
-    # Version of `material-components-web`
-    "0.0.0-MDC": MDC_PACKAGE_VERSION,
-    # Version of `@angular/core`
-    "0.0.0-NG": ANGULAR_PACKAGE_VERSION,
-    # Version of `tslib`
-    "0.0.0-TSLIB": TSLIB_PACKAGE_VERSION,
-    # Version of the local package being built, generated via the `--workspace_status_command` flag.
-    "0.0.0-PLACEHOLDER": "{BUILD_SCM_VERSION}",
-    # Version of `rxjs`
-    "0.0.0-RXJS": RXJS_PACKAGE_VERSION,
-}
-
-NO_STAMP_NPM_PACKAGE_SUBSTITUTIONS = dict(NPM_PACKAGE_SUBSTITUTIONS, **{
-    # When building NPM packages for tests (where stamping is disabled),
-    # we use `0.0.0` for the version placeholder.
-    "0.0.0-PLACEHOLDER": "0.0.0",
-})
-
 # List of MDC packages.
 MDC_PACKAGES = [
     "@material/animation",

devtools/projects/ng-devtools/src/lib/application-environment/index.ts

@@ -1,14 +1,10 @@
-export interface Process {
-  env: Env;
-}
-
 interface Env {
   LATEST_SHA: string;
 }
 
 export interface Environment {
   production: boolean;
-  process: Process;
+  LATEST_SHA: string;
 }
 
 export abstract class ApplicationEnvironment {

devtools/projects/ng-devtools/src/lib/devtools-tabs/devtools-tabs.component.ts

@@ -59,7 +59,7 @@ export class DevToolsTabsComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   get latestSHA(): string {
-    return this._applicationEnvironment.environment.process.env.LATEST_SHA;
+    return this._applicationEnvironment.environment.LATEST_SHA.slice(0, 8);
   }
 
   changeTab(tab: 'Profiler' | 'Components' | 'Router Tree'): void {

devtools/projects/shell-chrome/shell-chrome-webpack.config.js

@@ -1,30 +0,0 @@
-const webpack = require('webpack');
-
-module.exports = {
-  entry: {
-    // Use library so that the background script can invoke the content
-    // script multiple times. Alternatively, webpack is preventing us to do so.
-    'content-script': {
-      import: 'projects/shell-chrome/src/app/content-script.ts',
-      library: {
-        name: '___devToolsContentScript',
-        type: 'umd',
-        umdNamedDefine: true,
-      },
-    },
-    'ng-validate': 'projects/shell-chrome/src/app/ng-validate.ts',
-    background: 'projects/shell-chrome/src/app/background.ts',
-    backend: 'projects/shell-chrome/src/app/backend.ts',
-    devtools: 'projects/shell-chrome/src/devtools.ts',
-  },
-  output: {
-    chunkLoadingGlobal: '___ngDevToolsRuntime',
-  },
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        LATEST_SHA: JSON.stringify(process.env.LATEST_SHA),
-      },
-    }),
-  ],
-};

devtools/projects/shell-chrome/src/BUILD.bazel

@@ -330,4 +330,5 @@ pkg_web(
     additional_root_paths = [
         "projects/ng-devtools/src/lib",
     ],
+    substitutions = {"BUILD_SCM_COMMIT_SHA": "{BUILD_SCM_COMMIT_SHA}"},
 )

devtools/projects/shell-chrome/src/environments/environment.prod.ts

@@ -1,9 +0,0 @@
-export const environment = {
-  production: true,
-  process: {
-    env: {
-      // todo(aleksanderbodurri): when devtools is merged into the main angular repo, use stamping tooling to inject the latest SHA into the environment
-      LATEST_SHA: '',
-    },
-  },
-};

devtools/projects/shell-chrome/src/environments/environment.ts

@@ -1,10 +1,4 @@
 export const environment = {
   production: false,
-  process: {
-    env: {
-      // todo(aleksanderbodurri): when devtools is merged into the main angular repo,
-      // use stamping tooling to inject the latest SHA into the environment
-      LATEST_SHA: '',
-    },
-  },
+  LATEST_SHA: 'BUILD_SCM_COMMIT_SHA', // Stamped at build time by bazel
 };

devtools/shell-dev-webpack.config.js

@@ -1,11 +0,0 @@
-const webpack = require('webpack');
-
-module.exports = {
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        LATEST_SHA: JSON.stringify(process.env.LATEST_SHA),
-      },
-    }),
-  ],
-};

devtools/src/BUILD.bazel

@@ -323,6 +323,7 @@ pkg_web(
         ":bundle-es2015",
         ":inject_scripts_for_dev",
     ],
+    substitutions = {"BUILD_SCM_COMMIT_SHA": "{BUILD_SCM_COMMIT_SHA}"},
 )
 
 history_server(

devtools/src/app/BUILD.bazel

@@ -30,26 +30,3 @@ ng_ts_project(
         "@npm//@angular/router",
     ],
 )
-
-# ng_ts_project(
-#     name = "app-e2e",
-#     srcs = [
-#         "app.component.ts",
-#         "app.e2e.module.ts",
-#     ],
-#     angular_assets = [
-#         "app.component.html",
-#         ":app-component-styles"
-#     ],
-#     deps = [
-#         "//src/app/devtools-app",
-#         "//src/app/demo-app",
-#         "//src:demo-application-operations",
-#         "//src:demo-application-environment",
-#         "//projects/ng-devtools",
-#         "@npm//@angular/core",
-#         "@npm//@angular/router",
-#         "@npm//@angular/platform-browser",
-#     ],
-#     tsconfig = "//:tsconfig.json",
-# )

devtools/src/environments/BUILD.bazel

@@ -5,8 +5,6 @@ package(default_visibility = ["//visibility:public"])
 ts_project(
     name = "environments",
     srcs = [
-        "environment.e2e.ts",
-        "environment.prod.ts",
         "environment.ts",
     ],
     tsconfig = "//:tsconfig.json",

devtools/src/environments/environment.e2e.ts

@@ -1,12 +0,0 @@
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-
-export const environment = {
-  production: false,
-  process: {
-    env: {
-      // todo(aleksanderbodurri): when devtools is merged into the main angular repo, use stamping tooling to inject the latest SHA into the environment
-      LATEST_SHA: '',
-    },
-  },
-  animationModule: NoopAnimationsModule,
-};

devtools/src/environments/environment.prod.ts

@@ -1,12 +0,0 @@
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-export const environment = {
-  production: true,
-  process: {
-    env: {
-      // todo(aleksanderbodurri): when devtools is merged into the main angular repo, use stamping tooling to inject the latest SHA into the environment
-      LATEST_SHA: '',
-    },
-  },
-  animationModule: BrowserAnimationsModule,
-};

devtools/src/environments/environment.ts

@@ -2,12 +2,5 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 export const environment = {
   production: false,
-  process: {
-    env: {
-      // todo(aleksanderbodurri): when devtools is merged into the main angular repo,
-      // use stamping tooling to inject the latest SHA into the environment
-      LATEST_SHA: '',
-    },
-  },
-  animationModule: BrowserAnimationsModule,
+  LATEST_SHA: 'BUILD_SCM_COMMIT_SHA', // Stamped at build time by bazel
 };

devtools/yarn.lock

@@ -3035,7 +3035,7 @@ ajv-errors@^1.0.0:
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
   integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
 
-ajv-formats@2.1.1, ajv-formats@^2.1.1:
+ajv-formats@2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ajv-formats/-/ajv-formats-2.1.1.tgz#6e669400659eb74973bbf2e33327180a0996b520"
   integrity sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==