Skip to content

Commit b459d6d

Browse files
alan-agius4gregmagolan
alan-agius4
and
gregmagolan
authored
feat(examples): build and consume an Angular workspace library (#1633)
* feat(examples): build and consume an Angular workspace library With this change we now build and consume an Angular library in the Angular application. * chore: update deleted packages * style: bazel lint * style: bazel lint * style: add comment for pkg_npm workaround Co-authored-by: Greg Magolan <gmagolan@gmail.com>
1 parent 13510ad commit b459d6d

25 files changed

+1113
-33
lines changed

‎.bazelrc

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import %workspace%/common.bazelrc
55
# This lets us glob() up all the files inside the examples to make them inputs to tests
66
# To update these lines, just run `yarn bazel:update-deleted-packages`
77
# (Note, we cannot use common --deleted_packages because the bazel version command doesn't support it)
8-
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
9-
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
8+
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
9+
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
1010

1111
# Mock versioning command to test the --stamp behavior
1212
build --workspace_status_command="echo BUILD_SCM_VERSION 1.2.3"

‎examples/angular_bazel_architect/BUILD.bazel

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
load("@npm//@angular-devkit/architect-cli:index.bzl", "architect", "architect_test")
22

3+
exports_files([
4+
"tsconfig.json",
5+
"angular.json",
6+
])
7+
38
architect(
49
name = "build",
510
args = [
@@ -9,8 +14,7 @@ architect(
914
configuration_env_vars = ["NG_BUILD_CACHE"],
1015
data = glob(
1116
[
12-
"src/*",
13-
"src/**",
17+
"src/**/*",
1418
],
1519
exclude = [
1620
"src/**/*.spec.ts",
@@ -22,12 +26,16 @@ architect(
2226
"tsconfig.app.json",
2327
"tsconfig.json",
2428
"@npm//mime",
29+
"@npm//zone.js",
30+
"@npm//tslib",
31+
"@npm//typescript",
2532
"@npm//@angular/cli",
2633
"@npm//@angular/core",
2734
"@npm//@angular/router",
2835
"@npm//@angular/platform-browser-dynamic",
2936
"@npm//@angular-devkit/architect-cli",
3037
"@npm//@angular-devkit/build-angular",
38+
"//projects/frontend-lib:npm_package",
3139
],
3240
output_dir = True,
3341
)
@@ -37,8 +45,7 @@ architect_test(
3745
args = ["frontend:test"],
3846
configuration_env_vars = ["NG_BUILD_CACHE"],
3947
data = glob([
40-
"src/*",
41-
"src/**",
48+
"src/**/*",
4249
]) + [
4350
"angular.json",
4451
"karma.conf.js",
@@ -51,11 +58,13 @@ architect_test(
5158
"@npm//@angular/router",
5259
"@npm//@angular/platform-browser-dynamic",
5360
"@npm//@angular-devkit/build-angular",
61+
"@npm//zone.js",
5462
"@npm//karma",
5563
"@npm//karma-chrome-launcher",
5664
"@npm//karma-coverage-istanbul-reporter",
5765
"@npm//karma-jasmine",
5866
"@npm//karma-jasmine-html-reporter",
67+
"//projects/frontend-lib:npm_package",
5968
],
6069
tags = [
6170
"browser:chromium-local",
@@ -96,9 +105,12 @@ architect_test(
96105
"@npm//protractor",
97106
"@npm//jasmine-spec-reporter",
98107
"@npm//ts-node",
108+
"@npm//tslib",
109+
"@npm//typescript",
99110
"@npm//@types/jasmine",
100111
"@npm//@types/jasminewd2",
101112
"@npm//@types/node",
113+
"//projects/frontend-lib:npm_package",
102114
],
103115
tags = [
104116
"browser:chromium-local",
@@ -158,6 +170,7 @@ architect(
158170
"@npm//@angular/router",
159171
"@npm//@angular/platform-browser-dynamic",
160172
"@npm//@angular-devkit/build-angular",
173+
"//projects/frontend-lib:npm_package",
161174
],
162175
tags = ["ibazel_notify_changes"],
163176
)

‎examples/angular_bazel_architect/angular.json

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,49 @@
128128
}
129129
}
130130
}
131-
}},
131+
},
132+
"frontend-lib": {
133+
"projectType": "library",
134+
"root": "projects/frontend-lib",
135+
"sourceRoot": "projects/frontend-lib/src",
136+
"prefix": "lib",
137+
"architect": {
138+
"build": {
139+
"builder": "@angular-devkit/build-ng-packagr:build",
140+
"options": {
141+
"tsConfig": "projects/frontend-lib/tsconfig.lib.json",
142+
"project": "projects/frontend-lib/ng-package.js"
143+
},
144+
"configurations": {
145+
"production": {
146+
"tsConfig": "projects/frontend-lib/tsconfig.lib.prod.json"
147+
}
148+
}
149+
},
150+
"test": {
151+
"builder": "@angular-devkit/build-angular:karma",
152+
"options": {
153+
"preserveSymlinks": true,
154+
"watch": false,
155+
"main": "projects/frontend-lib/src/test.ts",
156+
"tsConfig": "projects/frontend-lib/tsconfig.spec.json",
157+
"karmaConfig": "projects/frontend-lib/karma.conf.js"
158+
}
159+
},
160+
"lint": {
161+
"builder": "@angular-devkit/build-angular:tslint",
162+
"options": {
163+
"tsConfig": [
164+
"projects/frontend-lib/tsconfig.lib.json",
165+
"projects/frontend-lib/tsconfig.spec.json"
166+
],
167+
"exclude": [
168+
"**/node_modules/**"
169+
]
170+
}
171+
}
172+
}
173+
}
174+
},
132175
"defaultProject": "frontend"
133176
}

‎examples/angular_bazel_architect/karma.conf.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,10 @@ module.exports = function(config) {
66
basePath: '',
77
frameworks: ['jasmine', '@angular-devkit/build-angular'],
88
plugins: [
9-
require('karma-jasmine'), require('karma-chrome-launcher'),
10-
require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'),
9+
require('karma-jasmine'),
10+
require('karma-chrome-launcher'),
11+
require('karma-jasmine-html-reporter'),
12+
require('karma-coverage-istanbul-reporter'),
1113
require('@angular-devkit/build-angular/plugins/karma')
1214
],
1315
client: {

‎examples/angular_bazel_architect/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
},
3030
"devDependencies": {
3131
"@angular-devkit/build-angular": "0.900.1",
32+
"@angular-devkit/build-ng-packagr": "0.900.1",
3233
"@angular/cli": "9.0.1",
3334
"@angular/compiler-cli": "9.0.0",
3435
"@angular/language-service": "9.0.0",
@@ -47,6 +48,7 @@
4748
"karma-coverage-istanbul-reporter": "~2.0.1",
4849
"karma-jasmine": "~2.0.1",
4950
"karma-jasmine-html-reporter": "^1.4.0",
51+
"ng-packagr": "^9.0.0",
5052
"protractor": "~5.4.0",
5153
"ts-node": "~7.0.0",
5254
"tslint": "~5.15.0",

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

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
load("@build_bazel_rules_nodejs//:index.bzl", "pkg_npm")
2+
load("@npm//@angular-devkit/architect-cli:index.bzl", "architect", "architect_test")
3+
4+
package(default_visibility = ["//visibility:public"])
5+
6+
architect(
7+
name = "build",
8+
args = [
9+
"frontend-lib:build",
10+
"--",
11+
"$(@D)",
12+
],
13+
data = glob(
14+
[
15+
"src/**/*",
16+
],
17+
exclude = [
18+
"src/**/*.spec.ts",
19+
"src/test.ts",
20+
],
21+
) + [
22+
"ng-package.js",
23+
"package.json",
24+
"tsconfig.lib.json",
25+
"tsconfig.lib.prod.json",
26+
"@angular_bazel_architect//:angular.json",
27+
"@angular_bazel_architect//:tsconfig.json",
28+
"@npm//@angular/cli",
29+
"@npm//@angular/core",
30+
"@npm//zone.js",
31+
"@npm//tslib",
32+
"@npm//typescript",
33+
"@npm//@angular-devkit/architect-cli",
34+
"@npm//@angular-devkit/build-ng-packagr",
35+
],
36+
output_dir = True,
37+
)
38+
39+
architect_test(
40+
name = "test",
41+
args = ["frontend-lib:test"],
42+
data = glob([
43+
"src/**/*",
44+
]) + [
45+
"karma.conf.js",
46+
"tsconfig.spec.json",
47+
"@angular_bazel_architect//:angular.json",
48+
"@angular_bazel_architect//:tsconfig.json",
49+
"@npm//@types/jasmine",
50+
"@npm//@types/node",
51+
"@npm//@angular/cli",
52+
"@npm//@angular/core",
53+
"@npm//@angular/platform-browser-dynamic",
54+
"@npm//@angular-devkit/build-angular",
55+
"@npm//tslib",
56+
"@npm//typescript",
57+
"@npm//zone.js",
58+
"@npm//karma",
59+
"@npm//karma-chrome-launcher",
60+
"@npm//karma-coverage-istanbul-reporter",
61+
"@npm//karma-jasmine",
62+
"@npm//karma-jasmine-html-reporter",
63+
],
64+
tags = [
65+
"browser:chromium-local",
66+
# This fails locally on macos buildkite trying to capture Chrome.
67+
# Tested locally on OSX and it works so it is something to do with the
68+
# buildkite osx machine chrome version/configuration.
69+
# ==================== Test output for //:test:
70+
# 29 01 2020 23:31:42.804:INFO [karma-server]: Karma v4.1.0 server started at http://0.0.0.0:9876/
71+
# 29 01 2020 23:31:42.806:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox with concurrency unlimited
72+
# 29 01 2020 23:31:42.808:INFO [launcher]: Starting browser ChromeHeadless
73+
# 29 01 2020 23:32:42.815:WARN [launcher]: ChromeHeadless have not captured in 60000 ms, killing.
74+
# 29 01 2020 23:32:44.818:WARN [launcher]: ChromeHeadless was not killed in 2000 ms, sending SIGKILL.
75+
# 29 01 2020 23:32:46.822:WARN [launcher]: ChromeHeadless was not killed by SIGKILL in 2000 ms, continuing.
76+
"no-bazelci-mac",
77+
],
78+
)
79+
80+
pkg_npm(
81+
name = "npm_package",
82+
package_name = "frontend-lib",
83+
# This is a workaround for the Linker When using `output_dir = True`.
84+
# the ':build' target dependency has an output directory so it will end up at 'npm_package/build' instead of
85+
# the root of the pkg_npm output directory.
86+
nested_packages = [":build"],
87+
)

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# FrontendLib
2+
3+
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.0.
4+
5+
## Code scaffolding
6+
7+
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`.
8+
> Note: Don't forget to add `--project frontend-lib` or else it will be added to the default project in your `angular.json` file.
9+
10+
## Build
11+
12+
Run `ng build frontend-lib` to build the project. The build artifacts will be stored in the `dist/` directory.
13+
14+
## Publishing
15+
16+
After building your library with `ng build frontend-lib`, go to the dist folder `cd dist/frontend-lib` and run `npm publish`.
17+
18+
## Running unit tests
19+
20+
Run `ng test frontend-lib` to execute the unit tests via [Karma](https://karma-runner.github.io).
21+
22+
## Further help
23+
24+
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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// Karma configuration file, see link for more information
2+
// https://karma-runner.github.io/1.0/config/configuration-file.html
3+
4+
module.exports = function (config) {
5+
config.set({
6+
basePath: '',
7+
frameworks: ['jasmine', '@angular-devkit/build-angular'],
8+
plugins: [
9+
require('karma-jasmine'),
10+
require('karma-chrome-launcher'),
11+
require('karma-jasmine-html-reporter'),
12+
require('karma-coverage-istanbul-reporter'),
13+
require('@angular-devkit/build-angular/plugins/karma')
14+
],
15+
client: {
16+
clearContext: false // leave Jasmine Spec Runner output visible in browser
17+
},
18+
coverageIstanbulReporter: {
19+
dir: require('path').join(__dirname, '../../coverage/frontend-lib'),
20+
reports: ['html', 'lcovonly', 'text-summary'],
21+
fixWebpackSourcePaths: true
22+
},
23+
reporters: ['progress', 'kjhtml'],
24+
port: 9876,
25+
colors: true,
26+
logLevel: config.LOG_INFO,
27+
autoWatch: true,
28+
customLaunchers: {
29+
ChromeHeadlessNoSandbox: {
30+
base: 'ChromeHeadless',
31+
flags: ['--no-sandbox', '--disable-gpu', '--disable-dev-shm-usage']
32+
}
33+
},
34+
browsers: ['ChromeHeadlessNoSandbox'],
35+
singleRun: false,
36+
restartOnFileChange: true
37+
});
38+
};

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
2+
const { resolve } = require('path');
3+
4+
module.exports = {
5+
dest: resolve(process.argv.pop()),
6+
lib: {
7+
entryFile: 'src/public-api.ts'
8+
}
9+
}
10+

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"name": "frontend-lib",
3+
"version": "0.0.1",
4+
"peerDependencies": {
5+
"@angular/common": "^9.0.0",
6+
"@angular/core": "^9.0.0",
7+
"tslib": "^1.10.0"
8+
}
9+
}

0 commit comments

Comments
 (0)