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

alan-agius4 · 2020-02-12T16:02:19Z

With this change we now build and consume an Angular library
in the Angular application.

alexeagle · 2020-02-13T15:22:07Z

examples/angular_bazel_architect/BUILD.bazel

@@ -9,8 +14,7 @@ architect(
    configuration_env_vars = ["NG_BUILD_CACHE"],
    data = glob(
        [
-            "src/*",
-            "src/**",
+            "src/**/*"


note these are not equivalent - starlark globbing ** doesn't match zero segments

Oh good to know that.

@alexeagle I double checked the docs again and it seems that ** does match zero segments

From https://docs.bazel.build/versions/master/be/functions.html#glob

/bar//*.txt matches every .txt file in every subdirectory of this package, if at least one directory on the resulting path is called bar, such as xxx/bar/yyy/zzz/a.txt or bar/a.txt (remember that ** also matches zero segments) or bar/zzz/a.txt

alexeagle · 2020-02-13T15:26:39Z

examples/angular_bazel_architect/BUILD.bazel

        "@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:build"


ooh, this is the dream, the missing dependency edge! ng serve is sufficient workflow to get updates to libs

Still facing an issue with the linker. The one we discussed yesterday. And the ci failure which I am unable to reproduce locally.

ng serve is sufficient workflow to get updates to libs
This depends if we will follow the Angular CLI or Nx model. Angular CLI uses pre-compiled libraries. NX uses ts path mappings. Both of them have pros and cons.

gregmagolan · 2020-04-02T20:11:22Z

Linker is working correctly and linking to the pkg_npm output directory. The trouble is that the :build architect() dep has an output directory of its own so it ends up at npm_package/build instead of at the root of the pkg_npm output dir.

I will think about the principled solution to this kind of dep but for now the nested_packages attribute can be used as it assumes that the dep is a directory artifact and the package re-roots it:

pkg_npm(
    name = "npm_package",
    package_name = "frontend-lib",
    nested_packages = [":build"],
)

gregmagolan · 2020-04-02T20:15:26Z

Next error hit is a typescript error:

ERROR: /Users/greg/google/rules_nodejs/examples/angular_bazel_architect/BUILD.bazel:8:1: Action build failed (Exit 1) architect.sh failed: error executing command bazel-out/host/bin/external/npm/@angular-devkit/architect-cli/bin/architect.sh frontend:build '--outputPath=bazel-out/darwin-fastbuild/bin/build' ... (remaining 2 argument(s) skipped)
Use --sandbox_debug to see verbose messages from the sandbox
frontend:build: 
ERROR in error TS5066: Substitutions for pattern 'frontend-lib' shouldn't be an empty array.
Exiting with code  1 Error
    at process.exit (/private/var/tmp/_bazel_greg/075db00dcb14c740d4643ebd000855c1/sandbox/darwin-sandbox/11/execroot/angular_bazel_architect/bazel-out/host/bin/external/npm/@angular-devkit/architect-cli/bin/architect.sh.runfiles/npm/node_modules/@angular-devkit/architect-cli/bin/architect.js:76:55)
    at /private/var/tmp/_bazel_greg/075db00dcb14c740d4643ebd000855c1/sandbox/darwin-sandbox/11/execroot/angular_bazel_architect/bazel-out/host/bin/external/npm/@angular-devkit/architect-cli/bin/architect.sh.runfiles/npm/node_modules/@angular-devkit/architect-cli/bin/architect.js:167:13
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
FAILURE
Result: {
    "success": false,
    "baseOutputPath": "/private/var/tmp/_bazel_greg/075db00dcb14c740d4643ebd000855c1/sandbox/darwin-sandbox/11/execroot/angular_bazel_architect/bazel-out/darwin-fastbuild/bin/build",
    "outputPath": "/private/var/tmp/_bazel_greg/075db00dcb14c740d4643ebd000855c1/sandbox/darwin-sandbox/11/execroot/angular_bazel_architect/bazel-out/darwin-fastbuild/bin/build",
    "outputPaths": [
        "/private/var/tmp/_bazel_greg/075db00dcb14c740d4643ebd000855c1/sandbox/darwin-sandbox/11/execroot/angular_bazel_architect/bazel-out/darwin-fastbuild/bin/build"
    ],
    "target": {
        "project": "frontend",
        "target": "build"
    }
}
Logs:
INFO: Elapsed time: 16.846s, Critical Path: 15.88s
INFO: 1 process: 1 remote cache hit.
FAILED: Build did NOT complete successfully

For reference: https://github.com/Microsoft/TypeScript/pull/9909/files & microsoft/TypeScript#9772

gregmagolan · 2020-04-02T20:30:39Z

@googlebot I consent.

googlebot · 2020-04-02T21:05:11Z

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

gregmagolan · 2020-04-02T21:20:51Z

All looks good now with the pkg_npm fix and paths fixes except the //projects/frontend-lib:test test hangs after succeeding for me locally:

Executing tests from //projects/frontend-lib:test
-----------------------------------------------------------------------------

02 04 2020 21:15:16.699:WARN [karma]: No captured browser, open http://localhost:9876/
02 04 2020 21:15:16.721:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
02 04 2020 21:15:16.721:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox with concurrency unlimited
02 04 2020 21:15:16.723:INFO [launcher]: Starting browser ChromeHeadless
02 04 2020 21:15:19.059:WARN [karma]: No captured browser, open http://localhost:9876/
02 04 2020 21:15:19.180:INFO [HeadlessChrome 80.0.3987 (Mac OS X 10.15.4)]: Connected on socket x9Jbc_pEDpn33dvRAAAA with id 6324597
HeadlessChrome 80.0.3987 (Mac OS X 10.15.4): Executed 2 of 2 SUCCESS (0.043 secs / 0.03 secs)
TOTAL: 2 SUCCESS
TOTAL: 2 SUCCESS
SUCCESS
Result: {
    "success": true,
    "target": {
        "project": "frontend-lib",
        "target": "test"
    }
}

Logs:

It sits at that point and never exits. The :test target has similar output and exits right after the Logs: line:

Executing tests from //:test
-----------------------------------------------------------------------------



02 04 2020 21:18:25.621:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
02 04 2020 21:18:25.622:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox with concurrency unlimited
02 04 2020 21:18:25.625:INFO [launcher]: Starting browser ChromeHeadless
02 04 2020 21:18:28.494:INFO [HeadlessChrome 80.0.3987 (Mac OS X 10.15.4)]: Connected on socket mUWdx92yY8YbsxCPAAAA with id 16352440
WARN: ''router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
HeadlessChrome 80.0.3987 (Mac OS X 10.15.4): Executed 0 of 4 SUCCESS (0 secs / 0 secs)
WARN: ''router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
WARN: ''router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
HeadlessChrome 80.0.3987 (Mac OS X 10.15.4): Executed 1 of 4 SUCCESS (0 secs / 0.097 secs)
WARN: ''router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
WARN: ''router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
HeadlessChrome 80.0.3987 (Mac OS X 10.15.4): Executed 2 of 4 SUCCESS (0 secs / 0.116 secs)
WARN: ''router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
WARN: ''router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
HeadlessChrome 80.0.3987 (Mac OS X 10.15.4): Executed 3 of 4 SUCCESS (0 secs / 0.13 secs)
WARN: ''router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
HeadlessChrome 80.0.3987 (Mac OS X 10.15.4): Executed 4 of 4 SUCCESS (0.197 secs / 0.141 secs)
TOTAL: 4 SUCCESS
TOTAL: 4 SUCCESS
SUCCESS
Result: {
    "success": true,
    "target": {
        "project": "frontend",
        "target": "test"
    }
}

Logs:

With this change we now build and consume an Angular library in the Angular application.

gregmagolan

LGTM. Thanks @alan-agius4 !

googlebot added the cla: yes label Feb 12, 2020

alan-agius4 force-pushed the ng-packagr-bazel branch 6 times, most recently from 9b163b7 to 5d70941 Compare February 13, 2020 11:31

alexeagle reviewed Feb 13, 2020

View reviewed changes

alan-agius4 closed this Mar 31, 2020

alan-agius4 force-pushed the ng-packagr-bazel branch from 5d70941 to cd8520d Compare March 31, 2020 11:05

alan-agius4 reopened this Mar 31, 2020

gregmagolan force-pushed the ng-packagr-bazel branch from 235743a to 8872179 Compare April 2, 2020 19:58

This comment has been minimized.

Sign in to view

googlebot added cla: no and removed cla: yes labels Apr 2, 2020

googlebot added cla: yes and removed cla: no labels Apr 2, 2020

alan-agius4 force-pushed the ng-packagr-bazel branch from 81a0744 to 8d3637e Compare April 3, 2020 08:22

alan-agius4 changed the title ~~wip! ng-packagr architect~~ feat(examples): build and consume an Angular workspace library Apr 3, 2020

alan-agius4 marked this pull request as ready for review April 3, 2020 08:40

alan-agius4 requested review from gregmagolan and soldair as code owners April 3, 2020 08:40

alan-agius4 and others added 3 commits April 3, 2020 10:43

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

d0f7d96

With this change we now build and consume an Angular library in the Angular application.

chore: update deleted packages

25a47aa

style: bazel lint

352d728

gregmagolan and others added 2 commits April 3, 2020 10:44

style: bazel lint

25a104a

style: add comment for pkg_npm workaround

45dc696

alan-agius4 force-pushed the ng-packagr-bazel branch from 8d3637e to 45dc696 Compare April 3, 2020 08:47

alan-agius4 added the examples label Apr 3, 2020

alan-agius4 requested a review from alexeagle April 3, 2020 08:49

gregmagolan approved these changes Apr 3, 2020

View reviewed changes

gregmagolan merged commit b459d6d into bazel-contrib:master Apr 3, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

alan-agius4 commented Feb 12, 2020 •

edited

Loading

alexeagle Feb 13, 2020

alan-agius4 Feb 13, 2020

alan-agius4 Feb 14, 2020 •

edited

Loading

alexeagle Feb 13, 2020

alan-agius4 Feb 13, 2020

This comment has been minimized.

gregmagolan commented Apr 2, 2020

gregmagolan commented Apr 2, 2020

gregmagolan commented Apr 2, 2020

googlebot commented Apr 2, 2020

gregmagolan commented Apr 2, 2020 •

edited

Loading

gregmagolan left a comment

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

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

Conversation

alan-agius4 commented Feb 12, 2020 • edited Loading

alexeagle Feb 13, 2020

Choose a reason for hiding this comment

alan-agius4 Feb 13, 2020

Choose a reason for hiding this comment

alan-agius4 Feb 14, 2020 • edited Loading

Choose a reason for hiding this comment

alexeagle Feb 13, 2020

Choose a reason for hiding this comment

alan-agius4 Feb 13, 2020

Choose a reason for hiding this comment

This comment has been minimized.

gregmagolan commented Apr 2, 2020

gregmagolan commented Apr 2, 2020

gregmagolan commented Apr 2, 2020

googlebot commented Apr 2, 2020

gregmagolan commented Apr 2, 2020 • edited Loading

gregmagolan left a comment

Choose a reason for hiding this comment

alan-agius4 commented Feb 12, 2020 •

edited

Loading

alan-agius4 Feb 14, 2020 •

edited

Loading

gregmagolan commented Apr 2, 2020 •

edited

Loading