Skip to content

Commit 8b4178b

Browse files
author
Dave Syer
committed
Clarify a few of the steps
1 parent 16e3b36 commit 8b4178b

File tree

1 file changed

+39
-9
lines changed

1 file changed

+39
-9
lines changed

README.md

Lines changed: 39 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ Then create a similar wrapper for the CLI itself, and test it quickly:
8080
$ cat > ng
8181
#!/bin/sh
8282
cd $(dirname $0)
83-
PATH="$PWD/node/":$PWD:$PATH
83+
PATH="$PWD/node/":"$PWD":$PATH
8484
node_modules/@angular/cli/bin/ng "$@"
8585
$ chmod +x ng
8686
$ ./ng --version
@@ -102,12 +102,13 @@ The Angular CLI can be used to generate new application scaffolding, as well as
102102
Create the app with the CLI and move it to the top level:
103103

104104
```
105-
$ ./ng new client
105+
$ ./ng new client # add --minimal here if you want to skip tests
106106
$ cat client/.gitignore >> .gitignore
107107
$ rm -rf client/node* client/src/favicon.ico client/.gitignore client/.git
108108
$ sed -i '/node_/anode/' .gitignore
109109
$ cp -rf client/* .
110110
$ cp client/.??* .
111+
$ rm -rf client
111112
$ sed -i -e 's,dist,target/classes/static,' .angular-cli.json
112113
```
113114

@@ -126,10 +127,10 @@ Add an execution to install the modules used in the application:
126127
</execution>
127128
```
128129

129-
Install the modules again using `./mvnw generate-resources`.
130+
Install the modules again using `./mvnw generate-resources` and check the result (the versions will differ for you).
130131

131132
```
132-
$ ng version
133+
$ ./ng version
133134
_ _ ____ _ ___
134135
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
135136
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
@@ -186,6 +187,18 @@ and if you add this as well:
186187

187188
then the client app will be compiled during the Maven build.
188189

190+
### Stabilize the Build
191+
192+
If you want a stable build you should put a `^` before the version of `@angular/cli` in your `package.json`. It isn't added by default when you do `ng new`, but it protects you from changes in the CLI. Example:
193+
194+
.package.json
195+
```
196+
...
197+
"devDependencies": {
198+
"@angular/cli": "^1.4.9",
199+
...
200+
```
201+
189202
## Development Time
190203

191204
You can build continuously with
@@ -232,19 +245,33 @@ You can add basic Twitter Bootstrap features to make the app look a bit less dul
232245
$ ./npm install bootstrap@3 jquery --save
233246
```
234247

235-
and update `.angular-cli.json` to add the new content:
248+
and update `.angular-cli.json` to add the new content to the app with "root=src". Before:
236249

237250
```
238251
"styles": [
239-
"styles.css",
240-
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
252+
"styles.css"
253+
],
254+
"scripts": [],
255+
```
256+
257+
and after:
258+
259+
```
260+
"styles": [
261+
"styles.css",
262+
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
241263
],
242264
"scripts": [
243-
"../node_modules/jquery/dist/jquery.min.js",
244-
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
265+
"../node_modules/jquery/dist/jquery.min.js",
266+
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
245267
],
246268
```
247269

270+
Here's a magic command line to do that:
271+
272+
```
273+
$ cat .angular-cli.json | jq '.apps[0].styles[1] |= . + "../node_modules/bootstrap/dist/css/bootstrap.min.css"' | jq '.apps[0] += {scripts:["../node_modules/jquery/dist/jquery.min.js","../node_modules/bootstrap/dist/js/bootstrap.min.js"]}' > .tmp && mv .tmp .angular-cli.json
274+
248275
## Basic Angular Features
249276
250277
Some basic features are included in the default scaffolding app, including the HTTP client, HTML forms support and navigation using the `Router`. All of them are extremely well documented at [angular.io](https://angular.io), and there are thousands of examples out in the internet of how to use those features.
@@ -290,6 +317,9 @@ Notice how the `AppComponent` has an `HttpClient` injected into its constructor.
290317
app.module.ts
291318
```javascript
292319
import { BrowserModule } from '@angular/platform-browser';
320+
import { NgModule } from '@angular/core';
321+
322+
import { AppComponent } from './app.component';
293323
import { HttpClientModule } from '@angular/common/http';
294324

295325
@NgModule({

0 commit comments

Comments
 (0)