2016-12-15 14:19:21 -05:00
# Building and Testing Angular
2015-03-17 21:48:02 -04:00
2016-12-15 14:19:21 -05:00
This document describes how to set up your development environment to build and test Angular.
2019-02-28 18:40:09 -05:00
It also explains the basic mechanics of using `git` , `node` , and `yarn` .
2015-03-17 21:48:02 -04:00
2015-04-09 12:33:10 -04:00
* [Prerequisite Software ](#prerequisite-software )
* [Getting the Sources ](#getting-the-sources )
2016-07-21 14:48:23 -04:00
* [Installing NPM Modules ](#installing-npm-modules )
2016-07-08 15:00:27 -04:00
* [Building ](#building )
2015-04-09 12:33:10 -04:00
* [Running Tests Locally ](#running-tests-locally )
See the [contribution guidelines ](https://github.com/angular/angular/blob/master/CONTRIBUTING.md )
if you'd like to contribute to Angular.
2015-03-17 21:48:02 -04:00
## Prerequisite Software
Before you can build and test Angular, you must install and configure the
following products on your development machine:
2016-01-21 16:30:03 -05:00
* [Git ](http://git-scm.com ) and/or the **GitHub app** (for [Mac ](http://mac.github.com ) or
[Windows ](http://windows.github.com )); [GitHub's Guide to Installing
Git](https://help.github.com/articles/set-up-git) is a good source of information.
2017-12-06 12:22:45 -05:00
* [Node.js ](http://nodejs.org ), (version specified in the engines field of [`package.json` ](../package.json )) which is used to run a development web server,
run tests, and generate distributable files.
2016-01-21 16:30:03 -05:00
2017-12-06 12:22:45 -05:00
* [Yarn ](https://yarnpkg.com ) (version specified in the engines field of [`package.json` ](../package.json )) which is used to install dependencies.
2017-09-21 09:39:43 -04:00
2016-01-08 04:04:28 -05:00
* [Java Development Kit ](http://www.oracle.com/technetwork/es/java/javase/downloads/index.html ) which is used
to execute the selenium standalone server for e2e testing.
2015-03-17 21:48:02 -04:00
## Getting the Sources
2015-04-17 19:02:42 -04:00
Fork and clone the Angular repository:
2015-03-17 21:48:02 -04:00
2015-04-17 19:02:42 -04:00
1. Login to your GitHub account or create one by following the instructions given
2015-03-17 21:48:02 -04:00
[here ](https://github.com/signup/free ).
2. [Fork ](http://help.github.com/forking ) the [main Angular
repository](https://github.com/angular/angular).
3. Clone your fork of the Angular repository and define an `upstream` remote pointing back to
2015-04-17 19:02:42 -04:00
the Angular repository that you forked in the first place.
2015-03-17 21:48:02 -04:00
```shell
2015-04-17 19:02:42 -04:00
# Clone your GitHub repository:
2015-03-17 21:48:02 -04:00
git clone git@github.com:< github username > /angular.git
# Go to the Angular directory:
cd angular
# Add the main Angular repository as an upstream remote to your repository:
git remote add upstream https://github.com/angular/angular.git
```
2016-07-21 14:48:23 -04:00
## Installing NPM Modules
2015-03-17 21:48:02 -04:00
2016-08-16 22:38:49 -04:00
Next, install the JavaScript modules needed to build and test Angular:
2015-03-17 21:48:02 -04:00
```shell
# Install Angular project dependencies (package.json)
2017-09-21 09:39:43 -04:00
yarn install
2015-03-17 21:48:02 -04:00
```
2016-07-21 12:01:47 -04:00
## Windows only
In order to create the right symlinks, run **as administrator** :
```shell
./scripts/windows/create-symlinks.sh
```
Before submitting a PR, do not forget to remove them:
```shell
./scripts/windows/remove-symlinks.sh
```
2016-07-08 15:00:27 -04:00
## Building
2015-03-17 21:48:02 -04:00
2016-07-08 15:00:27 -04:00
To build Angular run:
2015-03-17 21:48:02 -04:00
```shell
2019-01-05 16:43:35 -05:00
./scripts/build-packages-dist.sh
2015-03-17 21:48:02 -04:00
```
2019-01-05 16:43:35 -05:00
* Results are put in the `dist/packages-dist` folder.
2015-03-17 21:48:02 -04:00
## Running Tests Locally
2019-01-05 16:43:35 -05:00
Bazel is used as the primary tool for building and testing Angular. Building and testing is
incremental with Bazel, and it's possible to only run tests for an individual package instead
2019-02-28 20:09:46 -05:00
of for all packages. Read more about this in the [BAZEL.md ](./BAZEL.md ) document.
2015-11-06 18:16:53 -05:00
2019-02-28 20:09:46 -05:00
You should execute all test suites before submitting a PR to GitHub:
- `yarn bazel test packages/...`
2016-07-14 11:51:05 -04:00
2019-02-28 20:09:46 -05:00
**Note**: The first test run will be much slower than future runs. This is because future runs will
benefit from Bazel's capability to do incremental builds.
All the tests are executed on our Continuous Integration infrastructure. PRs can only be
2019-01-05 16:43:35 -05:00
merged if the code is formatted properly and all tests are passing.
2016-07-14 11:51:05 -04:00
2016-12-05 13:27:20 -05:00
## <a name="clang-format"></a> Formatting your source code
2016-07-14 11:51:05 -04:00
2018-11-21 11:03:37 -05:00
Angular uses [clang-format ](http://clang.llvm.org/docs/ClangFormat.html ) to format the source code.
2019-02-28 18:40:09 -05:00
If the source code is not properly formatted, the CI will fail and the PR cannot be merged.
2016-07-14 11:51:05 -04:00
You can automatically format your code by running:
2019-02-28 18:40:09 -05:00
- `yarn gulp format` : re-format only edited source code.
- `yarn gulp format:all` : format _all_ source code
2016-07-14 11:51:05 -04:00
2018-11-21 11:03:37 -05:00
A better way is to set up your IDE to format the changed file on each file save.
2018-06-07 12:42:29 -04:00
2018-11-21 11:03:37 -05:00
### VS Code
2018-12-03 17:52:31 -05:00
1. Install [Clang-Format ](https://marketplace.visualstudio.com/items?itemName=xaver.clang-format ) extension for VS Code.
2019-02-28 18:40:09 -05:00
It will automatically pick up the settings from Angular's [settings.json ](../.vscode/settings.json ).
2018-06-07 12:42:29 -04:00
2019-02-28 20:09:46 -05:00
### WebStorm / IntelliJ
1. Install the [ClangFormatIJ ](https://plugins.jetbrains.com/plugin/8396-clangformatij ) plugin
1. Open `Preferences->Tools->clang-format`
1. Find the field named "PATH"
1. Add `<PATH_TO_YOUR_WORKSPACE>/angular/node_modules/clang-format/bin/<OS>/`
where the OS options are: `darwin_x64` , `linux_x64` , and `win32` .
2016-12-30 21:54:53 -05:00
## Linting/verifying your source code
You can check that your code is properly formatted and adheres to coding style by running:
``` shell
2019-02-28 18:40:09 -05:00
$ yarn gulp lint
2016-12-30 21:54:53 -05:00
```
2017-01-19 17:25:44 -05:00
## Publishing snapshot builds
2018-04-23 14:46:02 -04:00
When a build of any branch on the upstream fork angular/angular is green on CircleCI,
it automatically publishes build artifacts
2017-01-19 17:25:44 -05:00
to repositories in the Angular org, eg. the `@angular/core` package is published to
http://github.com/angular/core-builds.
2016-07-14 11:51:05 -04:00
2016-12-15 14:19:21 -05:00
You may find that your un-merged change needs some validation from external participants.
Rather than requiring them to pull your Pull Request and build Angular locally, you can
2019-01-08 06:41:24 -05:00
publish the `*-builds` snapshots just like our CircleCI build does.
2016-12-15 14:19:21 -05:00
2019-02-28 20:09:46 -05:00
First time, you need to create the GitHub repositories:
2016-12-15 14:19:21 -05:00
``` shell
$ export TOKEN=[get one from https://github.com/settings/tokens]
2019-02-28 20:09:46 -05:00
$ CREATE_REPOS=1 ./scripts/ci/publish-build-artifacts.sh [GitHub username]
2016-12-15 14:19:21 -05:00
```
For subsequent snapshots, just run
``` shell
2019-02-28 20:09:46 -05:00
$ ./scripts/ci/publish-build-artifacts.sh [GitHub username]
2016-12-15 14:19:21 -05:00
```
2016-12-20 17:52:50 -05:00
The script will publish the build snapshot to a branch with the same name as your current branch,
and create it if it doesn't exist.
2018-11-21 11:03:37 -05:00
## Bazel support
### VS Code
1. Install [Bazel ](https://marketplace.visualstudio.com/items?itemName=DevonDCarew.bazel-code ) extension for VS Code.
2019-02-28 20:09:46 -05:00
### WebStorm / IntelliJ
1. Install the [Bazel ](https://plugins.jetbrains.com/plugin/8609-bazel ) plugin
1. You can find the settings under `Preferences->Other Settings->Bazel Settings`
It will automatically recognize `*.bazel` and `*.bzl` files.