Publishing Libraries

WIP: these instructions are incomplete; they are part of the Angular v6 release which is scheduled for early April 2018

These instructions assume you have some Angular library code, and want to opt-in to the Bazel-based build tooling.

You must use Angular 6.0.0-rc.0 or higher.

Example

The canonical example for building an Angular library with Bazel is https://github.com/juristr/ngx-tabs-libdemo/tree/bazel

Getting started

See the main Getting Started page for background on using Bazel to build Angular apps.

1. Install the current version of Bazel on your machine: https://docs.bazel.build/versions/master/install.html
2. Copy the /WORKSPACE file from the example to your project root, editing the workspace(name = ...) at the top.
3. Copy the /BUILD.bazel file from the example to your project root. Rename the ng_package rule to match the name you use to publish to npm.
4. Under Angular CLI, edit the .architect.json file to call bazel ... TODO
5. Run ng build

Resource URLs

Angular CLI allows your component to reference .scss files in the styleUrls, eg.

@Component({
  styleUrls: ['./my.scss'],
})
export class Comp {}

and this resolves the my.scss file in the same folder with the component's .ts file, transforms it with the SASS compiler, and uses the resulting css.

Under Bazel, we don't yet automate this. However, you can work around this as follows:

You must have a separate scss_binary rule that runs the SASS compiler.

BUILD.bazel

load("@io_bazel_rules_sass//sass:sass.bzl", "sass_binary")

sass_binary(
    name = "my",
    src = "my.scss",
)

You can build this rule to see what the output file is called:

$ bazel build :my
-> my.css

Now point the Angular component to the resulting .css file:

@Component({
  styleUrls: ['./my.css'], // my.css is the output of the ":my" rule
})
export class Comp {}

And add the css to the assetsof yourng_module`:

load("@angular//:index.bzl", "ng_module")
ng_module(
    name = "hello-world",
    srcs = [
        "my.component.ts",
    ],
    assets = [":my.css"],
)

Note, the my.css file will be written to the bazel-bin folder, which you can see with bazel info bazel-bin. This means it won't appear in your project folder, but the Angular compiler will know how to find it with the relative import because the bazel-bin folder is included in the rootDirs of the tsconfig.json.