Skip to content
This repository was archived by the owner on Apr 4, 2025. It is now read-only.

Commit 85d5969

Browse files
alexeaglealexeagle
committed
Update docs
1 parent c0212e6 commit 85d5969

5 files changed

Lines changed: 38 additions & 5 deletions

File tree

‎README.md‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
[![CircleCI](https://circleci.com/gh/alexeagle/angular-bazel-example.svg?style=svg)](https://circleci.com/gh/alexeagle/angular-bazel-example)
1+
[![CircleCI](https://circleci.com/gh/angular/angular-bazel-example.svg?style=svg)](https://circleci.com/gh/angular/angular-bazel-example)
22

33
# Example of building an Angular app with Bazel
44

5-
**This is experimental! There may be breaking changes.**
5+
**This is experimental, as part of Angular Labs! There may be breaking changes.**
66

77
This is part of the ABC project. The overall goal is to make it possible to
88
develop Angular applications the same way we do at Google.
@@ -13,6 +13,18 @@ this works.
1313

1414
Follow https://github.com/angular/angular/issues/19058 for updates.
1515

16+
## Guide to the example
17+
18+
This example is a monorepo, meant to show many different features and integrations that we expect are generally useful for enterprise use cases.
19+
20+
- **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.
21+
- **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.
22+
- **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).
23+
- **Material design**: see `src/material` where we collect the material modules we use.
24+
- **Redux-style state management**: see `src/reducers` where we use the [NgRx Store](https://ngrx.io/guide/store).
25+
- **Lazy loading**: in production mode, the application is served in chunks.
26+
- **Docker**: see below where we package up the production app for deployment on Kubernetes.
27+
1628
## Installation
1729

1830
You only need to install one build tool, and which one you choose typically depends on what kind of development you do most often.
@@ -114,7 +126,12 @@ setup a local `node_modules` folder for editor and tooling support.
114126

115127
## Deployment
116128

117-
Run it under docker:
129+
We use Bazel's docker support to package up our production server for deployment.
130+
Each time the app changes, we'll get a slim new docker layer with just the modified files, keeping the round-trip for deployment incremental and fast.
131+
This example is configured to run on Google Kubernetes Engine, so we can have an elastic pool of backend machines behind a load balancer.
132+
This setup is more expensive to operate than something like Firebase Functions where the backend code is spun up on-demand, but is also more adaptable to scenarios like backend servers that need to run other binaries on the machine.
133+
134+
To run it under docker:
118135

119136
```
120137
$ bazel run src:nodejs_image -- --norun

‎src/hello-world/hello-world.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {msg} from '../lib/file';
44
@Component({
55
selector: 'hello-world',
66
templateUrl: 'hello-world.component.html',
7-
styleUrls: ['./hello-world.component.css']
7+
styleUrls: ['./hello-world.component.scss']
88
})
99
export class HelloWorldComponent {
1010
name: string = msg;

‎src/rxjs_shims.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9+
/**
10+
* @fileoverview these provide named UMD modules so that we can bundle
11+
* the application along with rxjs using the concatjs bundler.
12+
*/
13+
914
// rxjs/operators
1015
(function(factory) {
1116
if (typeof module === 'object' && typeof module.exports === 'object') {

‎src/todos/todos.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {ADD_TODO, DELETE_TODO, TOGGLE_DONE, UPDATE_TODO} from '../reducers/reduc
77
@Component({
88
selector: 'todos',
99
templateUrl: './todos.component.html',
10-
styleUrls: ['./todos.component.css']
10+
styleUrls: ['./todos.component.scss']
1111
})
1212
export class TodosComponent implements OnInit {
1313
todos$: Observable<any>;

‎src/tsconfig.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,28 @@
11
{
22
"compilerOptions": {
3+
// Allow uses of these JS APIs
34
"lib": [
45
"dom",
56
"es5",
67
"es2015.collection",
78
"es2015.iterable",
89
"es2015.promise"
910
],
11+
// Allow type-checking to succeed when we import from generated files
12+
// This lets us write out Angular AOT bootstrap by importing the
13+
// ngfactory file.
14+
// Under Angular Ivy, this is unneeded.
1015
"rootDirs": [
1116
".",
1217
"../dist/bin/src",
1318
],
19+
// Permit decorator syntax
1420
"experimentalDecorators": true,
21+
// Don't scan the node_modules/@types folder for ambient types.
22+
// This would force us to have all the types in the dependencies of
23+
// each library.
24+
// Instead we'll be explicit about declaring ambient type dependencies
25+
// using the ///<reference types=""/> syntax.
1526
"types": []
1627
}
1728
}

0 commit comments

Comments
 (0)