{"id":13659433,"url":"https://github.com/angular/angular-bazel-example","last_synced_at":"2025-10-06T11:31:01.798Z","repository":{"id":65977135,"uuid":"97881987","full_name":"angular/angular-bazel-example","owner":"angular","description":"MOVED to the bazel nodejs monorepo  👉","archived":true,"fork":false,"pushed_at":"2019-09-12T22:21:57.000Z","size":3063,"stargazers_count":350,"open_issues_count":0,"forks_count":84,"subscribers_count":38,"default_branch":"master","last_synced_at":"2024-07-31T07:15:55.684Z","etag":null,"topics":["angular","bazel","build","typescript"],"latest_commit_sha":null,"homepage":"https://github.com/bazelbuild/rules_nodejs/tree/master/examples/angular","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/angular.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-20T22:07:16.000Z","updated_at":"2024-03-20T16:36:57.000Z","dependencies_parsed_at":"2023-02-19T19:00:35.527Z","dependency_job_id":null,"html_url":"https://github.com/angular/angular-bazel-example","commit_stats":null,"previous_names":["alexeagle/angular-bazel-example"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular%2Fangular-bazel-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular%2Fangular-bazel-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular%2Fangular-bazel-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angular%2Fangular-bazel-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angular","download_url":"https://codeload.github.com/angular/angular-bazel-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219877267,"owners_count":16554853,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","bazel","build","typescript"],"created_at":"2024-08-02T05:01:08.627Z","updated_at":"2025-10-06T11:30:56.397Z","avatar_url":"https://github.com/angular.png","language":"TypeScript","readme":"[![CircleCI](https://circleci.com/gh/angular/angular-bazel-example.svg?style=svg)](https://circleci.com/gh/angular/angular-bazel-example)\n\n# Moved to rules_nodejs monorepo: https://github.com/bazelbuild/rules_nodejs/tree/master/examples/angular\n\n**Readme content is preserved below to avoid breaking links**\n\n**This is experimental, as part of Angular Labs! There may be breaking changes.**\n\nThis is part of the ABC project. The overall goal is to make it possible to\ndevelop Angular applications the same way we do at Google.\n\nLearn more about Bazel and Angular at https://bazel.angular.io\n\nThis example is deployed at https://bazel.angular.io/example\n\n## Guide to the example\n\nThis example is a monorepo, meant to show many different features and integrations that we expect are generally useful for enterprise use cases.\n\n- **Angular CLI**: you can use the `ng` command to run build, serve, test, and e2e\n- **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.\n- **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.\n- **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).\n- **Material design**: see `src/material` where we collect the material modules we use.\n- **Redux-style state management**: see `src/reducers` where we use the [NgRx Store](https://ngrx.io/guide/store).\n- **Lazy loading**: in production mode, the application is served in chunks. Run `ng serve --prod`\n- **Differential loading**: in production mode, we load a pair of `\u003cscript\u003e` tags. Modern browsers will load code in the ES2015 syntax, which is smaller and requires fewer polyfills. Older browsers will load ES5 syntax.\n- **Docker**: see below where we package up the production app for deployment on Kubernetes.\n\n## Installation\n\nYou only need to install one build tool, and which one you choose typically depends on what kind of development you do most often.\n\nIf you're a frontend developer, you should install NodeJS and yarn.\nThe `package.json` file has an `engines` section which indicates the range of NodeJS and yarn versions that you could use.\nYou simply run `yarn` commands shown below, and don't need to install Bazel or any other dependencies.\n\nIf you're a full-stack developer, you might be using Bazel for your backend already.\nIn this case, you should install Bazel following instructions at http://bazel.build.\nAlso install `ibazel`, which is a watch mode for Bazel not included in the standard distribution. See https://github.com/bazelbuild/bazel-watcher#installation.\nThe `WORKSPACE` file has a `check_bazel_version` call which will print an error if your Bazel version is not in the supported range.\nYou simply run `bazel` commands shown below, and don't need to install NodeJS, yarn, or any other dependencies.\n\n## Development\n\nFirst we'll run the development server:\n\n```bash\n$ ng serve\n# or\n$ ibazel run //src:devserver\n```\n\nThis runs in \"watch mode\", which means it will watch any files that are inputs to the devserver, and when they change it will ask Bazel to re-build them.\nWhen the re-build is finished, it will trigger a LiveReload in the browser.\n\nThis command prints a URL on the terminal. Open that page to see the demo app\nrunning. Now you can edit one of the source files (`src/lib/file.ts` is an easy\none to understand and see the effect). As soon as you save a change, the app\nshould refresh in the browser with the new content. Our intent is that this time\nis less than two seconds, even for a large application.\n\nControl-C twice to kill the devserver.\n\n## Testing\n\nWe can also run all the unit tests:\n\n```bash\n$ ng test\n# or\n$ bazel test //src/...\n```\n\nOr run the end-to-end tests:\n\n```bash\n$ ng e2e\n# or\n$ bazel test //e2e/...\n```\n\nIn this example, there is a unit test for the `hello-world` component which uses\nthe `ts_web_test_suite` rule. There are also protractor e2e tests for both the\n`prodserver` and `devserver` which use the `protractor_web_test_suite` rule.\n\nNote that Bazel will only re-run the tests whose inputs changed since the last run.\n\n## Production\n\nWe can run the application in production mode, where the code has been bundled\nand optimized. This can be slower than the development mode, because any change\nrequires re-optimizing the app. This example uses Rollup and Uglify, but other\nbundlers can be integrated with Bazel.\n\n```bash\n$ ng serve --prod\n# or\n$ bazel run //src:prodserver\n```\n\n### Code splitting\n\nThe production bundle is code split and routes such as `/` and `/todos`\nare lazy loaded. Code splitting is handled by the rollup_bundle rule\nwhich now supports the new code splitting feature in rollup.\n\nNote: code splitting is _not_ supported in development mode yet so the\n`//src:devserver` target does not serve a code split bundle. The dynamic\n`import()` statements will resolve to modules that are served in the initial\nJS payload.\n\n## Npm dependencies\n\nHaving a local `node_modules` folder setup by `yarn` or `npm` is not\nnecessary when building this example with Bazel. This example makes use\nof Bazel managed npm dependencies (https://github.com/bazelbuild/rules_nodejs#using-bazel-managed-dependencies)\nwhich means Bazel will setup the npm dependencies in your `package.json` for you\noutside of your local workspace for use in the build.\n\nHowever, you may still want to run `yarn` or `npm` to manually\nsetup a local `node_modules` folder for editor and tooling support.\n\n## Deployment\n\n### Firebase\n\nWe use the standard firebase deploy command.\n\nRun `yarn deploy` to release changes to bazel.angular.io.\n\n### Kubernetes Engine\nWe use Bazel's docker support to package up our production server for deployment.\nEach 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.\nThis example is configured to run on Google Kubernetes Engine, so we can have an elastic pool of backend machines behind a load balancer.\nThis 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.\n\nThe application is currently live at http://35.197.115.230/\n\nTo run it under docker:\n\n```\n$ bazel run src:nodejs_image -- --norun\n$ docker run --rm -p 8080:8080 bazel/src:nodejs_image\n```\n\nDeploy to production:\n\n1. Install gcloud and kubectl\n1. Authenticate to the Google Container Registry\n    `gcloud auth configure-docker`\n1. Authenticate to Kubernetes Engine\n    `gcloud container clusters get-credentials angular-bazel-example --zone=us-west1-a`\n1. For the first deployment: `bazel run :deploy.create`\n1. To update: `bazel run :deploy.replace`\n\nTips:\n\n```\n# Run the binary without docker\n$ bazel run src:nodejs_image.binary\n # What's in the image?\n$ bazel build src:nodejs_image \u0026\u0026 file-roller dist/bin/src/nodejs_image-layer.tar\n # Tear down all running docker containers\n$ docker rm -f $(docker ps -aq)\n # Hop into the running image on kubernetes\n$ kubectl exec angular-bazel-example-prod-3285254973-ncv3g  -it -- /bin/bash\n```\n","funding_links":[],"categories":["TypeScript (19)"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular%2Fangular-bazel-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangular%2Fangular-bazel-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangular%2Fangular-bazel-example/lists"}