feat(examples): change angular example to ts_project (#2209)

examples/BUILD.bazel

@@ -19,7 +19,6 @@ example_integration_test(
     timeout = "long",
     npm_packages = {
         "//packages/angular:npm_package": "@bazel/angular",
-        "//packages/concatjs:npm_package": "@bazel/concatjs",
         "//packages/protractor:npm_package": "@bazel/protractor",
         "//packages/rollup:npm_package": "@bazel/rollup",
         "//packages/terser:npm_package": "@bazel/terser",

examples/angular/BUILD.bazel

@@ -4,14 +4,6 @@ package(default_visibility = ["//:__subpackages__"])
 
 exports_files(["favicon.ico"])
 
-# ts_library uses the `//:tsconfig.json` target
-# by default. This alias allows omitting explicit tsconfig
-# attribute.
-alias(
-    name = "tsconfig.json",
-    actual = "//src:tsconfig.json",
-)
-
 k8s_deploy(
     name = "deploy",
     images = {

examples/angular/README.md

@@ -11,15 +11,14 @@ This example demonstrates the Google-internal toolchain, which is fast but not v
 This example is a monorepo, meant to show many different features and integrations that we expect are generally useful for enterprise use cases.
 
 - **Angular CLI**: you can use the `ng` command to run build, serve, test, and e2e
-- **Angular Libraries**: to maximize build incrementality, each Angular module is compiled as a separate step. This lets us re-use Angular libraries without having to publish them as npm packages. See `src/todos` for a typical `NgModule` compiled as a library for use in the application, using the `ts_library` rule in the `BUILD.bazel` file.
-- **TypeScript Libraries**: see `src/lib` for a trivial example of a pure-TS library that's consumed in the application, using the `ts_library` rule in the `BUILD.bazel` file.
+- **Angular Libraries**: to maximize build incrementality, each Angular module is compiled as a separate step. This lets us re-use Angular libraries without having to publish them as npm packages. See `src/todos` for a typical `NgModule` compiled as a library for use in the application, using the `ts_project` rule in the `BUILD.bazel` file.
+- **TypeScript Libraries**: see `src/lib` for a trivial example of a pure-TS library that's consumed in the application, using the `ts_project` rule in the `BUILD.bazel` file.
 - **Sass**: we use Sass for all styling. Angular components import Sass files, and these are built by Bazel as independent processes calling the modern Sass compiler (written in Dart).
 - **Material design**: see `src/material` where we collect the material modules we use.
 - **Redux-style state management**: see `src/reducers` where we use the [NgRx Store](https://ngrx.io/guide/store).
 - **Lazy loading**: in production mode, the application is served in chunks. Run `ng serve --prod`
 - **Differential loading**: in production mode, we load a pair of `<script>` tags. Modern browsers will load code in the ES2015 syntax, which is smaller and requires fewer polyfills. Older browsers will load ES5 syntax.
 - **Docker**: see below where we package up the production app for deployment on Kubernetes.
-- **Server Side Rendering**: with the help of Angular Universal you can render your application on the server
 - **Progressive Web App**: support for service worker and the app can be installed on phones and desktops (also has 90+ Lighthouse score)
 
 This example is deployed at https://bazel.angular.io/example
@@ -78,7 +77,7 @@ $ bazel test //e2e/...
 ```
 
 In this example, there is a unit test for the `hello-world` component which uses
-the `karma_web_test_suite` rule. There are also protractor e2e tests for both the
+the `@npm//karma` and `web_test_suite` rule. There are also protractor e2e tests for both the
 `prodserver` and `devserver` which use the `protractor_web_test_suite` rule.
 
 Note that Bazel will only re-run the tests whose inputs changed since the last run.
@@ -94,15 +93,6 @@ bundlers can be integrated with Bazel.
 $ ng serve --prod
 # or
 $ bazel run //src:prodserver
-```
-
-You can also use server side rendering.
-
-```bash
-$ yarn server-ssr
-# or
-$ bazel run //src:universal_server
-```
 
 ### Code splitting
 
@@ -115,14 +105,6 @@ Note: code splitting is _not_ supported in development mode yet so the
 `import()` statements will resolve to modules that are served in the initial
 JS payload.
 
-### Prerendering
-
-The production build has a number of routes prerendered to `index.html` files. 
-This is similar to the process used in Angular Universal. The `ng_prerender` macro in the `tools` directory is
-used to run the application during the build, and output the `index.html` files for the requested routes.
-
-A smoke test is also included with `ng_prerender_test` macro, which checks key elements in the prerendered output. 
-
 ## Npm dependencies
 
 Having a local `node_modules` folder setup by `yarn` or `npm` is not
@@ -154,8 +136,10 @@ The application is currently live at http://35.197.115.230/
 To run it under docker:
 
 ```
+
 $ bazel run src:nodejs_image -- --norun
 $ docker run --rm -p 8080:8080 bazel/src:nodejs_image
+
 ```
 
 Deploy to production:
@@ -171,12 +155,23 @@ Deploy to production:
 Tips:
 
 ```
+
 # Run the binary without docker
-$ bazel run src:nodejs_image.binary
- # What's in the image?
-$ bazel build src:nodejs_image && file-roller dist/bin/src/nodejs_image-layer.tar
- # Tear down all running docker containers
+
+\$ bazel run src:nodejs_image.binary
+
+# What's in the image?
+
+\$ bazel build src:nodejs_image && file-roller dist/bin/src/nodejs_image-layer.tar
+
+# Tear down all running docker containers
+
 $ docker rm -f $(docker ps -aq)
- # Hop into the running image on kubernetes
-$ kubectl exec angular-bazel-example-prod-3285254973-ncv3g  -it -- /bin/bash
+
+# Hop into the running image on kubernetes
+
+\$ kubectl exec angular-bazel-example-prod-3285254973-ncv3g -it -- /bin/bash
+
+```
+
 ```

examples/angular/WORKSPACE

@@ -53,7 +53,7 @@ http_archive(
 load("@build_bazel_rules_nodejs//:index.bzl", "node_repositories", "yarn_install")
 
 node_repositories(
-    node_version = "12.13.0",
+    node_version = "12.14.1",
 )
 
 # Setup the Node.js toolchain & install our npm dependencies into @npm
@@ -68,7 +68,7 @@ load("@npm//@bazel/protractor:package.bzl", "npm_bazel_protractor_dependencies")
 
 npm_bazel_protractor_dependencies()
 
-# Load karma_web_test dependencies
+# Load web_test_suite
 http_archive(
     name = "io_bazel_rules_webtesting",
     sha256 = "e9abb7658b6a129740c0b3ef6f5a2370864e102a5ba5ffca2cea565829ed825a",
@@ -87,6 +87,11 @@ browser_repositories(
     firefox = True,
 )
 
+# Setup esbuild repositories
+load("@build_bazel_rules_nodejs//toolchains/esbuild:esbuild_repositories.bzl", "esbuild_repositories")
+
+esbuild_repositories()
+
 # Setup the rules_sass toolchain
 load("@io_bazel_rules_sass//sass:sass_repositories.bzl", "sass_repositories")
 

examples/angular/angular.json

@@ -51,8 +51,8 @@
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
+              "src/tsconfig.json",
+              "src/tsconfig-test.json"
             ],
             "exclude": [
               "**/node_modules/**"

examples/angular/e2e/BUILD.bazel

@@ -1,27 +1,30 @@
 load("@npm//@bazel/protractor:index.bzl", "protractor_web_test_suite")
-load("@npm//@bazel/typescript:index.bzl", "ts_library")
+load("//tools:typescript.bzl", "ts_test_project")
 
-ts_library(
+ts_test_project(
     name = "e2e",
-    testonly = 1,
-    srcs = glob(["src/*.ts"]),
-    tsconfig = "//src:tsconfig-test",
-    deps = [
-        "@npm//@types/jasmine",
-        "@npm//jasmine",
-        "@npm//protractor",
-    ],
+    srcs = glob(["**/*.ts"]),
+    tsconfig = {},
+    deps = ["@npm//protractor"],
 )
 
 protractor_web_test_suite(
     name = "prodserver_test",
+    srcs = [
+        "src/app.e2e-spec.js",
+        "src/app.po.js",
+    ],
     on_prepare = ":protractor.on-prepare.js",
     server = "//src:prodserver",
     deps = [":e2e"],
 )
 
 protractor_web_test_suite(
     name = "devserver_test",
+    srcs = [
+        "src/app.e2e-spec.js",
+        "src/app.po.js",
+    ],
     on_prepare = ":protractor.on-prepare.js",
     server = "//src:devserver",
     deps = [":e2e"],

examples/angular/e2e/protractor.on-prepare.js

@@ -17,7 +17,7 @@ module.exports = function(config) {
   // is the configured.
   const isProdserver = path.basename(config.server, path.extname(config.server)) === 'prodserver';
   return protractorUtils
-      .runServer(config.workspace, config.server, isProdserver ? '-p' : '-port', [])
+      .runServer(config.workspace, config.server, '-p', [])
       .then(serverSpec => {
         // Example app is hosted under `/example` in the prodserver and under `/` in devserver
         const serverUrl = `http://localhost:${serverSpec.port}` + (isProdserver ? '/example' : '');

examples/angular/package.json

@@ -4,23 +4,22 @@
     "description": "Demo of building Angular apps with Bazel",
     "license": "Apache-2.0",
     "engines": {
-        "node": ">=10.9.0 <=14.16.1",
+        "node": ">=12.14.1 <=14.16.1",
         "yarn": ">=1.9.2 <2.0.0"
     },
     "dependencies": {
-        "@angular/animations": "11.2.12",
-        "@angular/cdk": "11.2.11",
-        "@angular/common": "11.2.12",
-        "@angular/core": "11.2.12",
-        "@angular/forms": "11.2.12",
-        "@angular/material": "11.2.11",
-        "@angular/platform-browser": "11.2.12",
-        "@angular/platform-browser-dynamic": "11.2.12",
-        "@angular/platform-server": "11.2.12",
-        "@angular/router": "11.2.12",
-        "@angular/service-worker": "11.2.12",
-        "@ngrx/store": "^11.0.1",
-        "@nguniversal/express-engine": "^11.2.1",
+        "@angular/animations": "12.2.7",
+        "@angular/cdk": "12.2.7",
+        "@angular/common": "12.2.7",
+        "@angular/core": "12.2.7",
+        "@angular/forms": "12.2.7",
+        "@angular/material": "12.2.7",
+        "@angular/platform-browser": "12.2.7",
+        "@angular/platform-browser-dynamic": "12.2.7",
+        "@angular/platform-server": "12.2.7",
+        "@angular/router": "12.2.7",
+        "@angular/service-worker": "12.2.7",
+        "@ngrx/store": "12.4.0",
         "date-fns": "1.30.1",
         "domino": "^2.1.2",
         "reflect-metadata": "^0.1.2",
@@ -30,16 +29,16 @@
         "zone.js": "^0.11.4"
     },
     "devDependencies": {
-        "@angular/cli": "11.2.11",
-        "@angular/compiler": "11.2.12",
-        "@angular/compiler-cli": "11.2.12",
+        "@angular/cli": "12.2.7",
+        "@angular/compiler": "12.2.7",
+        "@angular/compiler-cli": "12.2.7",
         "@babel/cli": "^7.6.0",
         "@babel/core": "^7.6.0",
         "@babel/preset-env": "^7.6.0",
         "@bazel/angular": "^4.3.0",
         "@bazel/benchmark-runner": "^0.1.0",
         "@bazel/buildifier": "^4.2.1",
-        "@bazel/concatjs": "^4.3.0",
+        "@bazel/esbuild": "^4.3.0",
         "@bazel/ibazel": "^0.15.10",
         "@bazel/protractor": "^4.3.0",
         "@bazel/rollup": "^4.3.0",
@@ -50,34 +49,30 @@
         "@types/jasmine": "3.4.0",
         "@types/node": "6.14.6",
         "core-js": "2.6.9",
-        "express": "^4.14.0",
         "firebase-tools": "7.1.0",
         "history-server": "^1.3.1",
         "html-insert-assets": "^0.14.2",
         "jasmine": "2.8.0",
-        "karma": "~4.1.0",
-        "karma-chrome-launcher": "2.2.0",
-        "karma-firefox-launcher": "1.1.0",
-        "karma-jasmine": "2.0.1",
-        "karma-junit-reporter": "2.0.1",
-        "karma-requirejs": "1.1.0",
-        "karma-sourcemap-loader": "0.3.7",
+        "karma": "^6.3.2",
+        "karma-chrome-launcher": "^3.1.0",
+        "karma-firefox-launcher": "^2.1.0",
+        "karma-jasmine": "^4.0.1",
+        "karma-junit-reporter": "^2.0.1",
+        "karma-sourcemap-loader": "^0.3.8",
         "protractor": "^5.4.2",
-        "requirejs": "2.3.6",
         "rollup": "^2.3.4",
         "terser": "4.3.1",
-        "typescript": "4.1.5"
+        "typescript": "<4.4.0"
     },
     "scripts": {
         "build": "bazel build //src:prodapp",
         "serve": "ibazel run //src:devserver",
         "deploy": "ng build && firebase deploy",
         "serve-prod": "bazel run //src:prodserver",
-        "serve-ssr": "bazel run //src:universal_server",
         "e2e": "bazel test //e2e:all",
         "test": "bazel test //src/...",
         "benchmark": "ibazel-benchmark-runner //src:devserver src/app/hello-world/hello-world.component.ts --url=http://localhost:5432",
-        "postinstall": "ngcc",
+        "postinstall": "node_modules/.bin/ngcc --async --properties fesm2015",
         "generate": "node tools/generator/index.js",
         "generate:clean": "node tools/generator/index.js --clean"
     }