feat(examples): build and consume an Angular workspace library

.bazelrc

@@ -5,8 +5,8 @@ import %workspace%/common.bazelrc
 # This lets us glob() up all the files inside the examples to make them inputs to tests
 # To update these lines, just run `yarn bazel:update-deleted-packages`
 # (Note, we cannot use common --deleted_packages because the bazel version command doesn't support it)
-build --deleted_packages=examples/angular,examples/angular/e2e,examples/angular/src/app/home,examples/angular/src/app/hello-world,examples/angular/src/app,examples/angular/src/app/todos,examples/angular/src/app/todos/reducers,examples/angular/src/shared/material,examples/angular/src/lib/shorten,examples/angular/src,examples/angular/src/assets,examples/angular_bazel_architect,examples/angular_view_engine,examples/angular_view_engine/e2e,examples/angular_view_engine/src/app/home,examples/angular_view_engine/src/app/hello-world,examples/angular_view_engine/src/app,examples/angular_view_engine/src/app/todos,examples/angular_view_engine/src/app/todos/reducers,examples/angular_view_engine/src/shared/material,examples/angular_view_engine/src/lib/typography,examples/angular_view_engine/src/lib/shorten,examples/angular_view_engine/src,examples/angular_view_engine/src/assets,examples/app,examples/app/styles,examples/app/test,examples/closure,examples/jest,examples/kotlin,examples/nestjs,examples/nestjs/src,examples/parcel,examples/protocol_buffers,examples/react_webpack,examples/user_managed_deps,examples/vendored_node,examples/vendored_node_and_yarn,examples/web_testing,examples/webapp,examples/worker,e2e/bazel_managed_deps,e2e/fine_grained_symlinks,e2e/jasmine,e2e/node_loader_no_preserve_symlinks,e2e/node_loader_preserve_symlinks,e2e/packages,e2e/symlinked_node_modules_npm,e2e/symlinked_node_modules_yarn,e2e/ts_devserver,e2e/ts_devserver/genrule,e2e/ts_devserver/subpackage,e2e/typescript,e2e/webapp
-query --deleted_packages=examples/angular,examples/angular/e2e,examples/angular/src/app/home,examples/angular/src/app/hello-world,examples/angular/src/app,examples/angular/src/app/todos,examples/angular/src/app/todos/reducers,examples/angular/src/shared/material,examples/angular/src/lib/shorten,examples/angular/src,examples/angular/src/assets,examples/angular_bazel_architect,examples/angular_view_engine,examples/angular_view_engine/e2e,examples/angular_view_engine/src/app/home,examples/angular_view_engine/src/app/hello-world,examples/angular_view_engine/src/app,examples/angular_view_engine/src/app/todos,examples/angular_view_engine/src/app/todos/reducers,examples/angular_view_engine/src/shared/material,examples/angular_view_engine/src/lib/typography,examples/angular_view_engine/src/lib/shorten,examples/angular_view_engine/src,examples/angular_view_engine/src/assets,examples/app,examples/app/styles,examples/app/test,examples/closure,examples/jest,examples/kotlin,examples/nestjs,examples/nestjs/src,examples/parcel,examples/protocol_buffers,examples/react_webpack,examples/user_managed_deps,examples/vendored_node,examples/vendored_node_and_yarn,examples/web_testing,examples/webapp,examples/worker,e2e/bazel_managed_deps,e2e/fine_grained_symlinks,e2e/jasmine,e2e/node_loader_no_preserve_symlinks,e2e/node_loader_preserve_symlinks,e2e/packages,e2e/symlinked_node_modules_npm,e2e/symlinked_node_modules_yarn,e2e/ts_devserver,e2e/ts_devserver/genrule,e2e/ts_devserver/subpackage,e2e/typescript,e2e/webapp
+build --deleted_packages=examples/angular,examples/angular/e2e,examples/angular/src/app/home,examples/angular/src/app/hello-world,examples/angular/src/app,examples/angular/src/app/todos,examples/angular/src/app/todos/reducers,examples/angular/src/shared/material,examples/angular/src/lib/shorten,examples/angular/src,examples/angular/src/assets,examples/angular_bazel_architect,examples/angular_bazel_architect/projects/frontend-lib,examples/angular_view_engine,examples/angular_view_engine/e2e,examples/angular_view_engine/src/app/home,examples/angular_view_engine/src/app/hello-world,examples/angular_view_engine/src/app,examples/angular_view_engine/src/app/todos,examples/angular_view_engine/src/app/todos/reducers,examples/angular_view_engine/src/shared/material,examples/angular_view_engine/src/lib/typography,examples/angular_view_engine/src/lib/shorten,examples/angular_view_engine/src,examples/angular_view_engine/src/assets,examples/app,examples/app/styles,examples/app/test,examples/closure,examples/jest,examples/kotlin,examples/nestjs,examples/nestjs/src,examples/parcel,examples/protocol_buffers,examples/react_webpack,examples/user_managed_deps,examples/vendored_node,examples/vendored_node_and_yarn,examples/web_testing,examples/webapp,examples/worker,e2e/bazel_managed_deps,e2e/fine_grained_symlinks,e2e/jasmine,e2e/node_loader_no_preserve_symlinks,e2e/node_loader_preserve_symlinks,e2e/packages,e2e/symlinked_node_modules_npm,e2e/symlinked_node_modules_yarn,e2e/ts_devserver,e2e/ts_devserver/genrule,e2e/ts_devserver/subpackage,e2e/typescript,e2e/webapp
+query --deleted_packages=examples/angular,examples/angular/e2e,examples/angular/src/app/home,examples/angular/src/app/hello-world,examples/angular/src/app,examples/angular/src/app/todos,examples/angular/src/app/todos/reducers,examples/angular/src/shared/material,examples/angular/src/lib/shorten,examples/angular/src,examples/angular/src/assets,examples/angular_bazel_architect,examples/angular_bazel_architect/projects/frontend-lib,examples/angular_view_engine,examples/angular_view_engine/e2e,examples/angular_view_engine/src/app/home,examples/angular_view_engine/src/app/hello-world,examples/angular_view_engine/src/app,examples/angular_view_engine/src/app/todos,examples/angular_view_engine/src/app/todos/reducers,examples/angular_view_engine/src/shared/material,examples/angular_view_engine/src/lib/typography,examples/angular_view_engine/src/lib/shorten,examples/angular_view_engine/src,examples/angular_view_engine/src/assets,examples/app,examples/app/styles,examples/app/test,examples/closure,examples/jest,examples/kotlin,examples/nestjs,examples/nestjs/src,examples/parcel,examples/protocol_buffers,examples/react_webpack,examples/user_managed_deps,examples/vendored_node,examples/vendored_node_and_yarn,examples/web_testing,examples/webapp,examples/worker,e2e/bazel_managed_deps,e2e/fine_grained_symlinks,e2e/jasmine,e2e/node_loader_no_preserve_symlinks,e2e/node_loader_preserve_symlinks,e2e/packages,e2e/symlinked_node_modules_npm,e2e/symlinked_node_modules_yarn,e2e/ts_devserver,e2e/ts_devserver/genrule,e2e/ts_devserver/subpackage,e2e/typescript,e2e/webapp
 
 # Mock versioning command to test the --stamp behavior
 build --workspace_status_command="echo BUILD_SCM_VERSION 1.2.3"

examples/angular_bazel_architect/BUILD.bazel

@@ -1,5 +1,10 @@
 load("@npm//@angular-devkit/architect-cli:index.bzl", "architect", "architect_test")
 
+exports_files([
+    "tsconfig.json",
+    "angular.json",
+])
+
 architect(
     name = "build",
     args = [
@@ -9,8 +14,7 @@ architect(
     configuration_env_vars = ["NG_BUILD_CACHE"],
     data = glob(
         [
-            "src/*",
-            "src/**",
+            "src/**/*",
         ],
         exclude = [
             "src/**/*.spec.ts",
@@ -22,12 +26,16 @@ architect(
         "tsconfig.app.json",
         "tsconfig.json",
         "@npm//mime",
+        "@npm//zone.js",
+        "@npm//tslib",
+        "@npm//typescript",
         "@npm//@angular/cli",
         "@npm//@angular/core",
         "@npm//@angular/router",
         "@npm//@angular/platform-browser-dynamic",
         "@npm//@angular-devkit/architect-cli",
         "@npm//@angular-devkit/build-angular",
+        "//projects/frontend-lib:npm_package",
     ],
     output_dir = True,
 )
@@ -37,8 +45,7 @@ architect_test(
     args = ["frontend:test"],
     configuration_env_vars = ["NG_BUILD_CACHE"],
     data = glob([
-        "src/*",
-        "src/**",
+        "src/**/*",
     ]) + [
         "angular.json",
         "karma.conf.js",
@@ -51,11 +58,13 @@ architect_test(
         "@npm//@angular/router",
         "@npm//@angular/platform-browser-dynamic",
         "@npm//@angular-devkit/build-angular",
+        "@npm//zone.js",
         "@npm//karma",
         "@npm//karma-chrome-launcher",
         "@npm//karma-coverage-istanbul-reporter",
         "@npm//karma-jasmine",
         "@npm//karma-jasmine-html-reporter",
+        "//projects/frontend-lib:npm_package",
     ],
     tags = [
         "browser:chromium-local",
@@ -96,9 +105,12 @@ architect_test(
         "@npm//protractor",
         "@npm//jasmine-spec-reporter",
         "@npm//ts-node",
+        "@npm//tslib",
+        "@npm//typescript",
         "@npm//@types/jasmine",
         "@npm//@types/jasminewd2",
         "@npm//@types/node",
+        "//projects/frontend-lib:npm_package",
     ],
     tags = [
         "browser:chromium-local",
@@ -158,6 +170,7 @@ architect(
         "@npm//@angular/router",
         "@npm//@angular/platform-browser-dynamic",
         "@npm//@angular-devkit/build-angular",
+        "//projects/frontend-lib:npm_package",
     ],
     tags = ["ibazel_notify_changes"],
 )

examples/angular_bazel_architect/angular.json

@@ -128,6 +128,49 @@
           }
         }
       }
-    }},
+    },
+    "frontend-lib": {
+      "projectType": "library",
+      "root": "projects/frontend-lib",
+      "sourceRoot": "projects/frontend-lib/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "projects/frontend-lib/tsconfig.lib.json",
+            "project": "projects/frontend-lib/ng-package.js"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/frontend-lib/tsconfig.lib.prod.json"
+            }
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "preserveSymlinks": true,
+            "watch": false,
+            "main": "projects/frontend-lib/src/test.ts",
+            "tsConfig": "projects/frontend-lib/tsconfig.spec.json",
+            "karmaConfig": "projects/frontend-lib/karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "projects/frontend-lib/tsconfig.lib.json",
+              "projects/frontend-lib/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
   "defaultProject": "frontend"
 }

examples/angular_bazel_architect/karma.conf.js

@@ -6,8 +6,10 @@ module.exports = function(config) {
     basePath: '',
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
-      require('karma-jasmine'), require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'),
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
       require('@angular-devkit/build-angular/plugins/karma')
     ],
     client: {

examples/angular_bazel_architect/package.json

@@ -29,6 +29,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "0.900.1",
+    "@angular-devkit/build-ng-packagr": "0.900.1",
     "@angular/cli": "9.0.1",
     "@angular/compiler-cli": "9.0.0",
     "@angular/language-service": "9.0.0",
@@ -47,6 +48,7 @@
     "karma-coverage-istanbul-reporter": "~2.0.1",
     "karma-jasmine": "~2.0.1",
     "karma-jasmine-html-reporter": "^1.4.0",
+    "ng-packagr": "^9.0.0",
     "protractor": "~5.4.0",
     "ts-node": "~7.0.0",
     "tslint": "~5.15.0",

examples/angular_bazel_architect/projects/frontend-lib/BUILD.bazel

@@ -0,0 +1,87 @@
+load("@build_bazel_rules_nodejs//:index.bzl", "pkg_npm")
+load("@npm//@angular-devkit/architect-cli:index.bzl", "architect", "architect_test")
+
+package(default_visibility = ["//visibility:public"])
+
+architect(
+    name = "build",
+    args = [
+        "frontend-lib:build",
+        "--",
+        "$(@D)",
+    ],
+    data = glob(
+        [
+            "src/**/*",
+        ],
+        exclude = [
+            "src/**/*.spec.ts",
+            "src/test.ts",
+        ],
+    ) + [
+        "ng-package.js",
+        "package.json",
+        "tsconfig.lib.json",
+        "tsconfig.lib.prod.json",
+        "@angular_bazel_architect//:angular.json",
+        "@angular_bazel_architect//:tsconfig.json",
+        "@npm//@angular/cli",
+        "@npm//@angular/core",
+        "@npm//zone.js",
+        "@npm//tslib",
+        "@npm//typescript",
+        "@npm//@angular-devkit/architect-cli",
+        "@npm//@angular-devkit/build-ng-packagr",
+    ],
+    output_dir = True,
+)
+
+architect_test(
+    name = "test",
+    args = ["frontend-lib:test"],
+    data = glob([
+        "src/**/*",
+    ]) + [
+        "karma.conf.js",
+        "tsconfig.spec.json",
+        "@angular_bazel_architect//:angular.json",
+        "@angular_bazel_architect//:tsconfig.json",
+        "@npm//@types/jasmine",
+        "@npm//@types/node",
+        "@npm//@angular/cli",
+        "@npm//@angular/core",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@angular-devkit/build-angular",
+        "@npm//tslib",
+        "@npm//typescript",
+        "@npm//zone.js",
+        "@npm//karma",
+        "@npm//karma-chrome-launcher",
+        "@npm//karma-coverage-istanbul-reporter",
+        "@npm//karma-jasmine",
+        "@npm//karma-jasmine-html-reporter",
+    ],
+    tags = [
+        "browser:chromium-local",
+        # This fails locally on macos buildkite trying to capture Chrome.
+        # Tested locally on OSX and it works so it is something to do with the
+        # buildkite osx machine chrome version/configuration.
+        # ==================== Test output for //:test:
+        # 29 01 2020 23:31:42.804:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
+        # 29 01 2020 23:31:42.806:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox with concurrency unlimited
+        # 29 01 2020 23:31:42.808:INFO [launcher]: Starting browser ChromeHeadless
+        # 29 01 2020 23:32:42.815:WARN [launcher]: ChromeHeadless have not captured in 60000 ms, killing.
+        # 29 01 2020 23:32:44.818:WARN [launcher]: ChromeHeadless was not killed in 2000 ms, sending SIGKILL.
+        # 29 01 2020 23:32:46.822:WARN [launcher]: ChromeHeadless was not killed by SIGKILL in 2000 ms, continuing.
+        "no-bazelci-mac",
+    ],
+)
+
+pkg_npm(
+    name = "npm_package",
+    package_name = "frontend-lib",
+    # This is a workaround for the Linker When using `output_dir = True`.
+    # the ':build' target dependency has an output directory so it will end up at 'npm_package/build' instead of
+    # the root of the pkg_npm output directory.
+    nested_packages = [":build"],
+)

examples/angular_bazel_architect/projects/frontend-lib/README.md

@@ -0,0 +1,24 @@
+# FrontendLib
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project frontend-lib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project frontend-lib`.
+> Note: Don't forget to add `--project frontend-lib` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build frontend-lib` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build frontend-lib`, go to the dist folder `cd dist/frontend-lib` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test frontend-lib` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

examples/angular_bazel_architect/projects/frontend-lib/karma.conf.js

@@ -0,0 +1,38 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../coverage/frontend-lib'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox', '--disable-gpu', '--disable-dev-shm-usage']
+      }
+    },
+    browsers: ['ChromeHeadlessNoSandbox'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

examples/angular_bazel_architect/projects/frontend-lib/ng-package.js

@@ -0,0 +1,10 @@
+
+const { resolve } = require('path');
+
+module.exports = {
+  dest: resolve(process.argv.pop()),
+  lib: {
+    entryFile: 'src/public-api.ts'
+  }
+}
+

examples/angular_bazel_architect/projects/frontend-lib/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "frontend-lib",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^9.0.0",
+    "@angular/core": "^9.0.0",
+    "tslib": "^1.10.0"
+  }
+}

examples/angular_bazel_architect/projects/frontend-lib/src/lib/frontend-lib.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FrontendLibComponent } from './frontend-lib.component';
+
+describe('FrontendLibComponent', () => {
+  let component: FrontendLibComponent;
+  let fixture: ComponentFixture<FrontendLibComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FrontendLibComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FrontendLibComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

examples/angular_bazel_architect/projects/frontend-lib/src/lib/frontend-lib.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'lib-frontend-lib',
+  template: `
+    <p>
+      frontend-lib works!
+    </p>
+  `,
+  styles: []
+})
+export class FrontendLibComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}