Publishing Libraries

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

Publishing Angular libraries requires great care, to ensure that your users can build optimized applications in a number of different toolchains. We have researched this problem, and documented a layout called the Angular Package Format which we use to produce our own libraries, like @angular/core, and we recommend you follow this layout for your own libraries as well.

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

The output from Bazel points to the directory where your package is laid out.

TODO: show how to bazel run //path/to:my_package.publish so you don't need to locate the file on disk.

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.