feat(typescript): wire up use_angular_plugin attribute

Add tests and switch away from `ng_module` in the angular example

Author: alexeagle

examples/angular/BUILD.bazel

@@ -2,7 +2,7 @@ load("@k8s_deploy//:defaults.bzl", "k8s_deploy")
 
 package(default_visibility = ["//:__subpackages__"])
 
-# ts_library and ng_module use the `//:tsconfig.json` target
+# ts_library uses the `//:tsconfig.json` target
 # by default. This alias allows omitting explicit tsconfig
 # attribute.
 alias(

examples/angular/README.md

@@ -16,7 +16,7 @@ This example is deployed at https://bazel.angular.io/example
 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 `ng_module` 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_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.
 - **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.

examples/angular/package.json

@@ -8,16 +8,16 @@
         "yarn": ">=1.9.2 <2.0.0"
     },
     "dependencies": {
-        "@angular/animations": "9.0.0",
+        "@angular/animations": "9.1.0",
         "@angular/cdk": "9.0.0",
-        "@angular/common": "9.0.0",
-        "@angular/core": "9.0.0",
-        "@angular/forms": "9.0.0",
+        "@angular/common": "9.1.0",
+        "@angular/core": "9.1.0",
+        "@angular/forms": "9.1.0",
         "@angular/material": "9.0.0",
-        "@angular/platform-browser": "9.0.0",
-        "@angular/platform-browser-dynamic": "9.0.0",
-        "@angular/platform-server": "^9.0.0",
-        "@angular/router": "9.0.0",
+        "@angular/platform-browser": "9.1.0",
+        "@angular/platform-browser-dynamic": "9.1.0",
+        "@angular/platform-server": "^9.1.0",
+        "@angular/router": "9.1.0",
         "@ngrx/store": "9.0.0-beta.0",
         "@nguniversal/express-engine": "^9.0.0",
         "date-fns": "1.30.1",
@@ -29,8 +29,8 @@
     "devDependencies": {
         "@angular/bazel": "9.0.0",
         "@angular/cli": "9.0.0",
-        "@angular/compiler": "9.0.0",
-        "@angular/compiler-cli": "9.0.0",
+        "@angular/compiler": "9.1.0",
+        "@angular/compiler-cli": "9.1.0",
         "@babel/cli": "^7.6.0",
         "@babel/core": "^7.6.0",
         "@babel/preset-env": "^7.6.0",

examples/angular/src/BUILD.bazel

@@ -5,7 +5,6 @@ load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 load("@npm//@babel/cli:index.bzl", "babel")
 load("@npm//history-server:index.bzl", "history_server")
 load("@npm//html-insert-assets:index.bzl", "html_insert_assets")
-load("@npm_angular_bazel//:index.bzl", "ng_module")
 load("@npm_bazel_rollup//:index.bzl", "rollup_bundle")
 load("@npm_bazel_terser//:index.bzl", "terser_minified")
 load("@npm_bazel_typescript//:index.bzl", "ts_config", "ts_devserver", "ts_library")
@@ -44,13 +43,14 @@ ts_library(
     ],
 )
 
-ng_module(
+ts_library(
     name = "src",
     srcs = [
         "main.dev.ts",
         "main.prod.ts",
     ],
     tsconfig = ":tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "//src/app",
         "@npm//@angular/core",

examples/angular/src/app/BUILD.bazel

@@ -1,19 +1,21 @@
-load("@npm_angular_bazel//:index.bzl", "ng_module")
+load("@npm_bazel_typescript//:index.bzl", "ts_library")
 
 package(default_visibility = ["//:__subpackages__"])
 
-ng_module(
+ts_library(
     name = "app",
     srcs = glob(
         include = ["*.ts"],
         exclude = ["app.server.module.ts"],
     ),
-    assets = ["app.component.html"],
+    angular_assets = ["app.component.html"],
     tsconfig = "//src:tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "//src/app/hello-world",
         "//src/app/home",
         "//src/app/todos",
+        "//src/app/todos/reducers",
         "//src/shared/material",
         "@npm//@angular/core",
         "@npm//@angular/platform-browser",
@@ -22,12 +24,14 @@ ng_module(
     ],
 )
 
-ng_module(
+ts_library(
     name = "app_server",
     srcs = ["app.server.module.ts"],
     tsconfig = "//src:tsconfig-server",
+    use_angular_plugin = True,
     deps = [
         ":app",
+        "@npm//@angular/core",
         "@npm//@angular/platform-server",
     ],
 )

examples/angular/src/app/hello-world/BUILD.bazel

@@ -1,5 +1,4 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("@npm_angular_bazel//:index.bzl", "ng_module")
 load("@npm_bazel_karma//:index.bzl", "karma_web_test_suite")
 load("@npm_bazel_typescript//:index.bzl", "ts_library")
 
@@ -10,20 +9,23 @@ sass_binary(
     src = "hello-world.component.scss",
 )
 
-ng_module(
+ts_library(
     name = "hello-world",
     srcs = [
         "hello-world.component.ts",
         "hello-world.module.ts",
     ],
-    assets = [
+    angular_assets = [
         ":hello-world.component.html",
         ":hello-world-styles",
     ],
     tsconfig = "//src:tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "//src/lib/shorten",
         "//src/shared/material",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
         "@npm//@angular/router",
         "@npm//date-fns",
     ],

examples/angular/src/app/home/BUILD.bazel

@@ -1,12 +1,13 @@
-load("@npm_angular_bazel//:index.bzl", "ng_module")
+load("@npm_bazel_typescript//:index.bzl", "ts_library")
 
 package(default_visibility = ["//:__subpackages__"])
 
-ng_module(
+ts_library(
     name = "home",
     srcs = ["home.ts"],
-    assets = ["home.html"],
+    angular_assets = ["home.html"],
     tsconfig = "//src:tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "@npm//@angular/core",
         "@npm//@angular/router",

examples/angular/src/app/todos/BUILD.bazel

@@ -1,5 +1,5 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("@npm_angular_bazel//:index.bzl", "ng_module")
+load("@npm_bazel_typescript//:index.bzl", "ts_library")
 
 package(default_visibility = ["//:__subpackages__"])
 
@@ -8,17 +8,18 @@ sass_binary(
     src = "todos.component.scss",
 )
 
-ng_module(
+ts_library(
     name = "todos",
     srcs = [
         "todos.component.ts",
         "todos.module.ts",
     ],
-    assets = [
+    angular_assets = [
         "todos.component.html",
         ":todos-styles",
     ],
     tsconfig = "//src:tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "//src/app/todos/reducers",
         "//src/shared/material",

examples/angular/src/shared/material/BUILD.bazel

@@ -1,11 +1,12 @@
-load("@npm_angular_bazel//:index.bzl", "ng_module")
+load("@npm_bazel_typescript//:index.bzl", "ts_library")
 
 package(default_visibility = ["//:__subpackages__"])
 
-ng_module(
+ts_library(
     name = "material",
     srcs = glob(["*.ts"]),
     tsconfig = "//src:tsconfig.json",
+    use_angular_plugin = True,
     deps = [
         "@npm//@angular/core",
         "@npm//@angular/material",