**This is an EXPERIMENTAL early version of the bazel support. **

Read more about bazel here: Building Angular apps at scale.

Before submitting new issues, have a look at issues marked with the type: faq label.

Both the CLI and generated project have dependencies that require Node 6.9.0 or higher, together with NPM 3 or higher.

• Make sure you have Bazel installed.
• Make sure you have Bazel Watcher compiled and installed.

• Installation
• Usage
• License

BEFORE YOU INSTALL: please read the prerequisites

npm install -g @angular/cli
npm install -g @nrwl/bazel

THe bazel support is a collaboration of the Angular team at Google and the Nrwl team. At the moment, some code lives under @nrwl, but it will move under @angular once it stabilizes.

ng new PROJECT-NAME --collection=@nrwl/bazel
cd PROJECT-NAME

This is an empty Angular workspace.

You can generate three types of projects inside a workspace:

• lib-a typescript library
• nglib-an Angular library exporting an NgModule
• app-an Angular application that can be built, served, and shipped to the user

Most of the code in a workspace will be in libs and nglibs. Apps should merely assemble a few nglibs and add some environment-specific parameters.

ng generate nglib shared

Open libs/shared to find an empty NgModule.

ng generate component logo --lib=shared --module=shared.module.ts --export

This will create LogoComponent declared and exported from the SharedModule.

We can build the library by running the following command:

ng build shared

We can also test it by running:

ng test shared

ng generate app main

Open libs/shared to find an empty application.

First, let's add a dependency to the shared library.

Open apps/main/BUILD.bazel and add //libs/shared to the list of deps, like this:

ng_module(
  name = "module",
  srcs = glob(["**/*.ts"], exclude = ["e2e/**/*.ts"]),
  deps = [
    '//libs/shared:module'
  ],
  tsconfig = "//:tsconfig.json"
)

This tells Bazel that if shared changes, the main application should be rebuilt.

Next, open app.module.ts and change it to imports SharedModule, like this:

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from 'shared';

@NgModule({
  imports: [
    BrowserModule,
    SharedModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Note that we can use the shared library name to import the module. In other words, use relative imports within a library or an application, and absolute imports to import libraries.

Finally, open app.component.html and change it to look like this:

App:
<app-logo></app-logo>

ng serve main

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

The following command will build the main application.

ng build main

The following command will build the main application.

ng test main

• Read Building Angular apps at scale to understand the advantages of using Bazel.
• In this branch everything is always built in the AOT mode to make production and dev builds as close as possible.

MIT