Converting an Angular CLI workspace

This doc shows how to manually add a working Bazel setup to an existing application created by Angular CLI.

In the future, we expect that a command like ng add @angular/bazel will do these steps for you, and you'll only need to interact with the ng command for build, test, serve, etc

Prerequisites

Install Bazel: https://docs.bazel.build/versions/master/install.html

Install ibazel (watch mode for Bazel): yarn global add @bazel/ibazel or npm install -g @bazel/ibazel

Instructions below assume your project uses yarn.

Known issue on Mac: "Too many open files" error, will be fixed in next release.

Modify your project

Copy files

Copy these files to your workspace folder (next to angular-cli.json) from https://github.com/alexeagle/canonical-angularcli-app/tree/master

• .bazelrc
• WORKSPACE
• BUILD.bazel
• src/BUILD.bazel
• e2e/BUILD.bazel
• e2e/protractor.on-prepare.js

Install npm dependencies

yarn add -D typescript@3.1 @bazel/typescript @bazel/ibazel

Switch to AOT bootstrap

Update your application bootstrap to use AOT style. Import from @angular/platform-browser rather than @angular/platform-browser-dynamic. (Angular CLI does this transformation behind the scenes for prod builds. Under Bazel we always do AOT so we can be more explicit and less magical)

Note, we are going to import from generated code. After the first build, you can adjust the paths in your tsconfig.json to point your editor to the generated code to make the red squiggles go away. When Angular ships the new Ivy compiler, we'll stop importing generated code.

https://github.com/alexeagle/canonical-angularcli-app/commit/236406851409a88e85b3cdc9e6eaa250061fd7cc#diff-8cfead41d88ad47d44509a8ab0a109ad

Add script tags in index.html

Angular CLI transforms your html file to add script tags. Under Bazel we prefer to be more explicit.

Just add after your bootstrap element <app-root>:

<script src="/zone.min.js"></script>
<script src="/bundle.min.js"></script>

like https://github.com/alexeagle/canonical-angularcli-app/commit/06151761ded53d22a2d03b9e6d67c31f045559af#diff-e249faefed5757034596c5096d33dab6

Update Karma tests: initialize TestBed

In every *.spec.ts file, add:

import {BrowserDynamicTestingModule, platformBrowserDynamicTesting} from '@angular/platform-browser-dynamic/testing';
try {
  TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
} catch {
  // Ignore exceptions when calling it multiple times.
}

like https://github.com/alexeagle/canonical-angularcli-app/commit/ed5638193c4fc0219d7e5b41c539aee2b8aeb724#diff-d5d984b316bea5c337b5e6f7b6448f62

Clean up (optional)

If you don't plan to use Angular CLI anymore, you can delete some files that are no longer referenced:

• e2e/protractor-conf.js
• src/karma.conf.js
• src/test.ts

Using Bazel

https://github.com/alexeagle/angular-bazel-example/tree/cli is a demo of how you'll be able to use the ng command soon. In the meantime you should be able to run these commands:

• Development server, watching sources ibazel run src:devserver (instead of ng serve)
• Run unit tests: bazel test //src/... (instead of ng test)
• Build the production bundle: bazel build src:bundle (instead of ng build --prod - note that under Bazel we never do JIT so all bundles are for production)
• Run protractor tests: bazel test e2e:all (instead of ng e2e)

Many commands are unchanged, such as ng lint, ng generate, etc.

To see the outputs, we recommend running: ln -s $(bazel info bazel-bin) dist so that you get a dist folder matching the output from ng commands.

TODO

• Turn this into a schematic that works with ng add
• Eliminate the need to edit sources if possible, especially adding the TestBed initializer