Angular CLI: Bazel Branch

CLI for Angular applications based on the ember-cli project.

EXPERIMENTAL

**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.

Prerequisites

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

Bazel and iBazel

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

Table of Contents

• Installation
• Usage
• License

Installation

BEFORE YOU INSTALL: please read the prerequisites

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

@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.

Usage

Generate an Angular Workspace

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

This is an empty Angular workspace.

Three Types of Projects

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.

Generate an Angular Library

ng generate nglib shared

Open libs/shared to find an empty NgModule.

Generate a Component in an NgLibrary

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

This will create LogoComponent declared and exported from the SharedModule.

Build a Library

We can build the library by running the following command:

ng build shared

Test a Library

We can also test it by running:

ng test shared

Generate an Angular Application

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>

Serve an Angular Application

ng serve main

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

Build an Application

The following command will build the main application.

ng build main

Test an Application

The following command will build the main application.

ng test main

Extra Notes

• 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.

License

MIT