Skip to content

Commit 83f2d00

Browse files
vsavkinhansl
vsavkin
authored and
hansl
committed
refactor(@angular/cli): refactor serve to use bazel
1 parent 2b8a653 commit 83f2d00

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+240
-3255
lines changed

‎README.md‎

Lines changed: 122 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
## Angular CLI
1+
## Angular CLI: Bazel Branch
22
### CLI for Angular applications based on the [ember-cli](http://www.ember-cli.com/) project.
33

44
<!-- Badges section here. -->
@@ -19,179 +19,202 @@
1919
[![GitHub stars](https://img.shields.io/github/stars/angular/angular-cli.svg?style=social&label=Star)](https://github.com/angular/angular-cli)
2020

2121

22-
## Note
22+
## EXPERIMENTAL
2323

24-
The CLI is now in 1.0.
25-
If you are updating from a beta or RC version, check out our [1.0 Update Guide](https://github.com/angular/angular-cli/wiki/stories-1.0-update).
24+
**This is an EXPERIMENTAL early version of the bazel support. **
2625

27-
If you wish to collaborate, check out [our issue list](https://github.com/angular/angular-cli/issues).
26+
Read more about bazel here: [Building Angular apps at scale](https://medium.com/@Jakeherringbone/building-angular-apps-at-scale-813ef42add04).
2827

2928
Before submitting new issues, have a look at [issues marked with the `type: faq` label](https://github.com/angular/angular-cli/issues?utf8=%E2%9C%93&q=is%3Aissue%20label%3A%22type%3A%20faq%22%20).
3029

30+
31+
32+
3133
## Prerequisites
3234

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

38+
### Bazel and iBazel
39+
40+
* Make sure you have [Bazel](https://bazel.build/) installed.
41+
* Make sure you have [Bazel Watcher](https://github.com/bazelbuild/bazel-watcher) compiled and installed.
42+
3643
## Table of Contents
3744

3845
* [Installation](#installation)
3946
* [Usage](#usage)
40-
* [Generating a New Project](#generating-and-serving-an-angular-project-via-a-development-server)
41-
* [Generating Components, Directives, Pipes and Services](#generating-components-directives-pipes-and-services)
42-
* [Updating Angular CLI](#updating-angular-cli)
43-
* [Development Hints for working on Angular CLI](#development-hints-for-working-on-angular-cli)
44-
* [Documentation](#documentation)
4547
* [License](#license)
4648

4749
## Installation
4850

4951
**BEFORE YOU INSTALL:** please read the [prerequisites](#prerequisites)
5052
```bash
5153
npm install -g @angular/cli
54+
npm install -g @nrwl/bazel
5255
```
5356

54-
## Usage
57+
### @Nrwl/Bazel?
58+
59+
THe bazel support is a collaboration of the Angular team at Google and the [Nrwl](http://nrwl.io) team. At the moment, some code lives under `@nrwl`, but it will move under `@angular` once it stabilizes.
60+
5561

56-
```bash
57-
ng help
58-
```
5962

60-
### Generating and serving an Angular project via a development server
63+
## [Usage](#usage)
64+
65+
### Generate an Angular Workspace
6166

6267
```bash
63-
ng new PROJECT-NAME
68+
ng new PROJECT-NAME --collection=@nrwl/bazel
6469
cd PROJECT-NAME
65-
ng serve
6670
```
67-
Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
6871

69-
You can configure the default HTTP host and port used by the development server with two command-line options :
72+
This is an empty Angular workspace.
73+
74+
75+
76+
77+
### Three Types of Projects
78+
79+
You can generate three types of projects inside a workspace:
80+
81+
* `lib`-a typescript library
82+
* `nglib`-an Angular library exporting an NgModule
83+
* `app`-an Angular application that can be built, served, and shipped to the user
84+
85+
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.
86+
87+
88+
89+
90+
### Generate an Angular Library
7091

7192
```bash
72-
ng serve --host 0.0.0.0 --port 4201
93+
ng generate nglib shared
7394
```
7495

75-
### Generating Components, Directives, Pipes and Services
96+
Open `libs/shared` to find an empty NgModule.
97+
98+
7699

77-
You can use the `ng generate` (or just `ng g`) command to generate Angular components:
100+
101+
### Generate a Component in an NgLibrary
78102

79103
```bash
80-
ng generate component my-new-component
81-
ng g component my-new-component # using the alias
82-
83-
# components support relative path generation
84-
# if in the directory src/app/feature/ and you run
85-
ng g component new-cmp
86-
# your component will be generated in src/app/feature/new-cmp
87-
# but if you were to run
88-
ng g component ../newer-cmp
89-
# your component will be generated in src/app/newer-cmp
90-
# if in the directory src/app you can also run
91-
ng g component feature/new-cmp
92-
# and your component will be generated in src/app/feature/new-cmp
104+
ng generate component logo --lib=shared --module=shared.module.ts --export
93105
```
94-
You can find all possible blueprints in the table below:
95106

96-
Scaffold | Usage
97-
--- | ---
98-
[Component](https://github.com/angular/angular-cli/wiki/generate-component) | `ng g component my-new-component`
99-
[Directive](https://github.com/angular/angular-cli/wiki/generate-directive) | `ng g directive my-new-directive`
100-
[Pipe](https://github.com/angular/angular-cli/wiki/generate-pipe) | `ng g pipe my-new-pipe`
101-
[Service](https://github.com/angular/angular-cli/wiki/generate-service) | `ng g service my-new-service`
102-
[Class](https://github.com/angular/angular-cli/wiki/generate-class) | `ng g class my-new-class`
103-
[Guard](https://github.com/angular/angular-cli/wiki/generate-guard) | `ng g guard my-new-guard`
104-
[Interface](https://github.com/angular/angular-cli/wiki/generate-interface) | `ng g interface my-new-interface`
105-
[Enum](https://github.com/angular/angular-cli/wiki/generate-enum) | `ng g enum my-new-enum`
106-
[Module](https://github.com/angular/angular-cli/wiki/generate-module) | `ng g module my-module`
107+
This will create `LogoComponent` declared and exported from the `SharedModule`.
108+
109+
### Build a Library
107110

111+
We can build the library by running the following command:
108112

113+
```bash
114+
ng build shared
115+
```
109116

117+
### Test a Library
110118

111-
angular-cli will add reference to `components`, `directives` and `pipes` automatically in the `app.module.ts`. If you need to add this references to another custom module, follow this steps:
112-
113-
1. `ng g module new-module` to create a new module
114-
2. call `ng g component new-module/new-component`
115-
116-
This should add the new `component`, `directive` or `pipe` reference to the `new-module` you've created.
117-
118-
### Updating Angular CLI
119+
We can also test it by running:
119120

120-
If you're using Angular CLI `1.0.0-beta.28` or less, you need to uninstall `angular-cli` package. It should be done due to changing of package's name and scope from `angular-cli` to `@angular/cli`:
121121
```bash
122-
npm uninstall -g angular-cli
123-
npm uninstall --save-dev angular-cli
122+
ng test shared
124123
```
125124

126-
To update Angular CLI to a new version, you must update both the global package and your project's local package.
127125

128-
Global package:
126+
127+
128+
### Generate an Angular Application
129+
129130
```bash
130-
npm uninstall -g @angular/cli
131-
npm cache clean
132-
npm install -g @angular/cli@latest
131+
ng generate app main
133132
```
134133

135-
Local project package:
134+
Open `libs/shared` to find an empty application.
135+
136+
First, let's add a dependency to the shared library.
137+
138+
Open `apps/main/BUILD.bazel` and add `//libs/shared` to the list of deps, like this:
139+
136140
```bash
137-
rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
138-
npm install --save-dev @angular/cli@latest
139-
npm install
141+
ng_module(
142+
name = "module",
143+
srcs = glob(["**/*.ts"], exclude = ["e2e/**/*.ts"]),
144+
deps = [
145+
'//libs/shared:module'
146+
],
147+
tsconfig = "//:tsconfig.json"
148+
)
149+
```
150+
151+
This tells `Bazel` that if `shared` changes, the `main` application should be rebuilt.
152+
153+
154+
Next, open `app.module.ts` and change it to imports `SharedModule`, like this:
155+
156+
```typescript
157+
import { NgModule } from '@angular/core';
158+
import { AppComponent } from './app.component';
159+
import { BrowserModule } from '@angular/platform-browser';
160+
import { SharedModule } from 'shared';
161+
162+
@NgModule({
163+
imports: [
164+
BrowserModule,
165+
SharedModule
166+
],
167+
declarations: [AppComponent],
168+
bootstrap: [AppComponent]
169+
})
170+
export class AppModule { }
140171
```
141172

142-
If you are updating to 1.0 from a beta or RC version, check out our [1.0 Update Guide](https://github.com/angular/angular-cli/wiki/stories-1.0-update).
173+
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.
174+
175+
Finally, open `app.component.html` and change it to look like this:
176+
177+
```html
178+
App:
179+
<app-logo></app-logo>
180+
```
143181

144-
You can find more details about changes between versions in [the Releases tab on GitHub](https://github.com/angular/angular-cli/releases).
145182

146183

147-
## Development Hints for working on Angular CLI
148184

149-
### Working with master
185+
### Serve an Angular Application
150186

151187
```bash
152-
git clone https://github.com/angular/angular-cli.git
153-
cd angular-cli
154-
npm link
188+
ng serve main
155189
```
156190

157-
`npm link` is very similar to `npm install -g` except that instead of downloading the package
158-
from the repo, the just cloned `angular-cli/` folder becomes the global package.
159-
Additionally, this repository publishes several packages and we use special logic to load all of them
160-
on development setups.
191+
Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
192+
161193

162-
Any changes to the files in the `angular-cli/` folder will immediately affect the global `@angular/cli` package,
163-
allowing you to quickly test any changes you make to the cli project.
164194

165-
Now you can use `@angular/cli` via the command line:
195+
### Build an Application
196+
197+
The following command will build the main application.
166198

167199
```bash
168-
ng new foo
169-
cd foo
170-
npm link @angular/cli
171-
ng serve
200+
ng build main
172201
```
173202

174-
`npm link @angular/cli` is needed because by default the globally installed `@angular/cli` just loads
175-
the local `@angular/cli` from the project which was fetched remotely from npm.
176-
`npm link @angular/cli` symlinks the global `@angular/cli` package to the local `@angular/cli` package.
177-
Now the `angular-cli` you cloned before is in three places:
178-
The folder you cloned it into, npm's folder where it stores global packages and the Angular CLI project you just created.
203+
### Test an Application
179204

180-
You can also use `ng new foo --link-cli` to automatically link the `@angular/cli` package.
205+
The following command will build the main application.
181206

182-
Please read the official [npm-link documentation](https://docs.npmjs.com/cli/link)
183-
and the [npm-link cheatsheet](http://browsenpm.org/help#linkinganynpmpackagelocally) for more information.
207+
```bash
208+
ng test main
209+
```
184210

185-
To run the Angular CLI test suite use the `node tests/run_e2e.js` command.
186-
It can also receive a filename to only run that test (e.g. `node tests/run_e2e.js tests/e2e/tests/build/dev-build.ts`).
187211

188-
As part of the test procedure, all packages will be built and linked.
189-
You will need to re-run `npm link` to re-link the development Angular CLI environment after tests finish.
190212

213+
## Extra Notes
191214

192-
## Documentation
215+
* Read [Building Angular apps at scale](https://medium.com/@Jakeherringbone/building-angular-apps-at-scale-813ef42add04) to understand the advantages of using Bazel.
216+
* In this branch everything is always built in the AOT mode to make production and dev builds as close as possible.
193217

194-
The documentation for the Angular CLI is located in this repo's [wiki](https://github.com/angular/angular-cli/wiki).
195218

196219
## License
197220

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@
4343
"@angular-devkit/build-optimizer": "0.0.13",
4444
"@angular-devkit/schematics": "0.0.17",
4545
"@schematics/angular": "0.0.27",
46-
"@nrwl/nx": "https://github.com/nrwl/nx-build",
46+
"@nrwl/schematics": "https://github.com/nrwl/schematics-build",
47+
"@nrwl/bazel": "https://github.com/nrwl/bazel-build",
4748
"autoprefixer": "^6.5.3",
4849
"chalk": "^2.0.1",
4950
"circular-dependency-plugin": "^3.0.0",

‎packages/@angular/cli/commands/build.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export const baseBuildCommandOptions: any = [
88
{
99
name: 'app',
1010
type: String,
11-
aliases: ['a'],
11+
aliases: ['a', 'lib'],
1212
description: 'Specifies app name or index to use.'
1313
},
1414
{

‎packages/@angular/cli/commands/eject.ts‎

Lines changed: 2 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,12 @@
1-
import { BuildOptions } from '../models/build-options';
2-
import {baseBuildCommandOptions} from './build';
3-
41
const Command = require('../ember-cli/lib/models/command');
52

6-
// defaults for BuildOptions
7-
export const baseEjectCommandOptions: any = [
8-
...baseBuildCommandOptions,
9-
{
10-
name: 'force',
11-
type: Boolean,
12-
description: 'Overwrite any webpack.config.js and npm scripts already existing.'
13-
},
14-
{
15-
name: 'app',
16-
type: String,
17-
aliases: ['a'],
18-
description: 'Specifies app name to use.'
19-
}
20-
];
21-
22-
export interface EjectTaskOptions extends BuildOptions {
23-
force?: boolean;
24-
app?: string;
25-
}
26-
273

284
const EjectCommand = Command.extend({
295
name: 'eject',
306
description: 'Ejects your app and output the proper webpack configuration and scripts.',
317

32-
availableOptions: baseEjectCommandOptions,
33-
34-
run: function (commandOptions: EjectTaskOptions) {
35-
36-
// Default vendor chunk to false when build optimizer is on.
37-
if (commandOptions.vendorChunk === undefined) {
38-
commandOptions.vendorChunk = !commandOptions.buildOptimizer;
39-
}
40-
41-
const EjectTask = require('../tasks/eject').default;
42-
const ejectTask = new EjectTask({
43-
project: this.project,
44-
ui: this.ui,
45-
});
46-
47-
return ejectTask.run(commandOptions);
8+
run: function () {
9+
this.ui.writeLine('Eject command is not supported when used with bazel');
4810
}
4911
});
5012

0 commit comments

Comments
 (0)