
#### Table of Contents

1. Get Start angular2 with angualr-cli
2. Issues:

## Get Start angular2 with angualr-cli

There're lots of thing you have to worry about for starting angular2, now
`Angular-CLI` is build for this kind of purpose, it's a Prototype
Angular2 application based on the ember-cli project.

For this blog's example, I'm using tools as following.

```
node: 6.5.0
os: win32 x64
```

For Angular-CLI, I'm using following version.

```
angular-cli: 1.0.0-beta.10
```

Then, run following to install angular-cli to your environment

```
npm install -g angular-cli
```

Now, the first command you'd like to try is `ng --help`. You would
able to check the document from github, but thought from the downloaded
angular-cli code will show the latest document by just type
`ng --help`.

#### Following is what `ng --help` shows by above version

```
(node:16908) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please u
pdate it to a more recent version.
Usage: ng

Available commands in angular-cli:

ng addon
  Generates a new folder structure for building an addon, complete with test harness.
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --blueprint (String) (Default: addon)
    aliases: -b
  --skip-npm (Boolean) (Default: false)
    aliases: -sn
  --skip-bower (Boolean) (Default: false)
    aliases: -sb
  --skip-git (Boolean) (Default: false)
    aliases: -sg
  --directory (String)
    aliases: -dir

ng asset-sizes
  Shows the sizes of your asset files.
  --output-path (Path) (Default: dist/)
    aliases: -o

ng build
  Builds your app and places it into the output path (dist/ by default).
  aliases: b
  --environment (String) (Default: development)
    aliases: -e , -dev (--environment=development), -prod (--environment=production)
  --output-path (Path) (Default: dist/)
    aliases: -o
  --watch (Boolean) (Default: false)
    aliases: -w
  --watcher (String)
  --suppress-sizes (Boolean) (Default: false)

ng destroy
  Destroys code generated by `generate` command.
  aliases: d
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --pod (Boolean) (Default: false)
    aliases: -p
  --classic (Boolean) (Default: false)
    aliases: -c
  --dummy (Boolean) (Default: false)
    aliases: -dum, -id
  --in-repo-addon (String) (Default: null)
    aliases: --in-repo , -ir

ng generate
  Generates new code from blueprints.
  aliases: g
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --pod (Boolean) (Default: false)
    aliases: -p
  --classic (Boolean) (Default: false)
    aliases: -c
  --dummy (Boolean) (Default: false)
    aliases: -dum, -id
  --in-repo-addon (String) (Default: null)
    aliases: --in-repo , -ir

ng help
  Outputs the usage instructions for all commands or the provided command
  aliases: h, --help, -h
  --verbose (Boolean) (Default: false)
    aliases: -v
  --json (Boolean) (Default: false)

ng init
  Creates a new angular-cli project in the current folder.
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --blueprint (String)
    aliases: -b
  --skip-npm (Boolean) (Default: false)
    aliases: -sn
  --skip-bower (Boolean) (Default: false)
    aliases: -sb
  --name (String) (Default: )
    aliases: -n

ng install
  Installs an angular-cli addon from npm.
  aliases: i

ng new
  Creates a new directory and runs ng init in it.
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --blueprint (String) (Default: app)
    aliases: -b
  --skip-npm (Boolean) (Default: false)
    aliases: -sn
  --skip-bower (Boolean) (Default: false)
    aliases: -sb
  --skip-git (Boolean) (Default: false)
    aliases: -sg
  --directory (String)
    aliases: -dir

ng serve
  Builds and serves your app, rebuilding on file changes.
  aliases: server, s
  --port (Number) (Default: 4200)
    aliases: -p
  --host (String) Listens on all interfaces by default
    aliases: -H
  --proxy (String)
    aliases: -pr , -pxy
  --insecure-proxy (Boolean) (Default: false) Set false to proxy self-signed SSL certificates
    aliases: --inspr
  --watcher (String) (Default: events)
    aliases: -w
  --live-reload (Boolean) (Default: true)
    aliases: -lr
  --live-reload-host (String) Defaults to host
    aliases: -lrh
  --live-reload-base-url (String) Defaults to baseURL
    aliases: -lrbu
  --live-reload-port (Number) (Defaults to port number within [49152...65535])
    aliases: -lrp
  --environment (String) (Default: development)
    aliases: -e , -dev (--environment=development), -prod (--environment=production)
  --output-path (Path) (Default: dist/)
    aliases: -op , -out
  --ssl (Boolean) (Default: false)
  --ssl-key (String) (Default: ssl/server.key)
  --ssl-cert (String) (Default: ssl/server.crt)

ng test
  Runs your app's test suite.
  aliases: t
  --environment (String) (Default: test)
    aliases: -e
  --config-file (String)
    aliases: -c , -cf
  --server (Boolean) (Default: false)
    aliases: -s
  --host (String)
    aliases: -H
  --test-port (Number) (Default: 7357) The test port to use when running with --server.
    aliases: -tp
  --filter (String) A string to filter tests to run
    aliases: -f
  --module (String) The name of a test module to run
    aliases: -m
  --watcher (String) (Default: events)
    aliases: -w
  --launch (String) (Default: false) A comma separated list of browsers to launch for tests.
  --reporter (String) Test reporter to use [tap|dot|xunit] (default: tap)
    aliases: -r
  --silent (Boolean) (Default: false) Suppress any output except for the test report
  --test-page (String) Test page to invoke
  --path (Path) Reuse an existing build at given path.
  --query (String) A query string to append to the test page URL.

ng version
  outputs angular-cli version
  aliases: v, --version, -v
  --verbose (Boolean) (Default: false)


Available commands from ng2:
ng new
  Creates a new directory and runs ng init in it.
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --blueprint (String) (Default: ng2)
    aliases: -b
  --link-cli (Boolean) (Default: false)
    aliases: -lc
  --skip-npm (Boolean) (Default: false)
    aliases: -sn
  --skip-bower (Boolean) (Default: true)
    aliases: -sb
  --skip-git (Boolean) (Default: false)
    aliases: -sg
  --directory (String)
    aliases: -dir
  --source-dir (String) (Default: src)
    aliases: -sd
  --style (String) (Default: css)
  --prefix (String) (Default: app)
    aliases: -p
  --mobile (Boolean) (Default: false)

ng generate
  Generates new code from blueprints.
  aliases: g
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --pod (Boolean) (Default: false)
    aliases: -p
  --classic (Boolean) (Default: false)
    aliases: -c
  --dummy (Boolean) (Default: false)
    aliases: -dum, -id
  --in-repo-addon (String) (Default: null)
    aliases: --in-repo , -ir

ng init
  Creates a new angular-cli project in the current folder.
  aliases: i
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --blueprint (String)
    aliases: -b
  --link-cli (Boolean) (Default: false)
    aliases: -lc
  --skip-npm (Boolean) (Default: false)
    aliases: -sn
  --skip-bower (Boolean) (Default: true)
    aliases: -sb
  --name (String) (Default: )
    aliases: -n
  --source-dir (String) (Default: src)
    aliases: -sd
  --style (String) (Default: css)
  --prefix (String) (Default: app)
    aliases: -p
  --mobile (Boolean) (Default: false)

ng test
  Runs your app's test suite.
  aliases: t
  --watch (Boolean) (Default: true)
    aliases: -w
  --browsers (String)
  --colors (Boolean)
  --log-level (String)
  --port (Number)
  --reporters (String)
  --build (Boolean) (Default: true)

ng e2e
  Run e2e tests in existing project

ng lint
  Lints code in existing project

ng version
  outputs angular-cli version
  aliases: v, --version, -v
  --verbose (Boolean) (Default: false)

ng completion
  Adds autocomplete functionality to `ng` commands and subcommands

ng doc
  Opens the official Angular documentation for a given keyword.

ng make-this-awesome

ng set
  Set a value in the configuration.
  --global (Boolean) (Default: false)
    aliases: -g

ng get
  Get a value from the configuration.
```

To actually create prototype angular2 application you'll need to type
following command.

```
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
```

#### Following is example when use Angular-CLI to create a project

```
PS C:\Test> cd a_cli
PS C:\Test\a_cli> ng new cl
installing ng2
  create .clang-format
  create .editorconfig
  create src\app\cli-1.component.css
  create src\app\cli-1.component.html
  create src\app\cli-1.component.spec.ts
  create src\app\cli-1.component.ts
  create src\app\environment.ts
  create src\app\index.ts
  create src\app\shared\index.ts
  create src\favicon.ico
  create src\icon.png
  create src\index.html
  create src\main.ts
  create src\manifest.webapp
  create src\system-config.ts
  create src\tsconfig.json
  create src\typings.d.ts
  create angular-cli-build.js
  create angular-cli.json
  create config\environment.dev.ts
  create config\environment.js
  create config\environment.prod.ts
  create config\karma-test-shim.js
  create config\karma.conf.js
  create config\protractor.conf.js
  create e2e\app.e2e.ts
  create e2e\app.po.ts
  create e2e\tsconfig.json
  create e2e\typings.d.ts
  create .gitignore
  create package.json
  create public\.npmignore
  create tslint.json
  create typings.json
Successfully initialized git.
- Installing packages for tooling via npm
├── es6-shim (ambient)
├── angular-protractor (ambient dev)
├── jasmine (ambient dev)
└── selenium-webdriver (ambient dev)

Installed packages for tooling via npm.
```

#### `ng serve` to start the site

Following is example when run ng serve to start the site, it's using Broccoli
but Angular-CLI will move to WebPack.

```
PS C:\Test\cli_1> ng serve
Livereload server on http://localhost:49152
Serving on http://localhost:4200/

Build successful - 3400ms.

Slowest Trees                                 | Total
----------------------------------------------+-----------
vendor                                        | 2431ms
BroccoliTypeScriptCompiler                    | 705ms

Slowest Trees (cumulative)                    | Total (avg
----------------------------------------------+-----------
vendor (1)                                    | 2431ms
BroccoliTypeScriptCompiler (1)                | 705ms
```

#### What shows the browser?

#### What kinds of files will generate for you?

Try following command, which will generate tree of directory folder.

```
tree /A /F ["directory path"] > tree.txt
```

Following files is not include files for `node_modules, bowers`,
because it's running Angular-CLI as
`ng new [Project-Name] --skip-npm --skip-bower --skip-git`. If you
run default command `ng new [project-name]` will include above
tasks, but sometime depend on your enviroment, it'll take a long time and at
the end it's because of the permission issue. You could
`npm insall -d` to install all dependencies files.

```
|   .editorconfig
|   .gitignore
|   angular-cli-build.js
|   angular-cli.json
|   package.json
|   README.md
|   tslint.json
|   typings.json
|
+---config
|       environment.dev.ts
|       environment.js
|       environment.prod.ts
|       karma-test-shim.js
|       karma.conf.js
|       protractor.conf.js
|
// Your unit test(karma) or intergration test(protractor)
+---e2e
|       app.e2e-spec.ts
|       app.po.ts
|       tsconfig.json
|       typings.d.ts
|
// when run ng build, Angular-CLI will buidl production ready which will set here
+---public
|       .npmignore
|
// during development, you'll add code here.
\---src
    |   favicon.ico
    |   index.html
    |   main.ts
    |   system-config.ts
    |   tsconfig.json
    |   typings.d.ts
    |
    \---app
        |   app.component.css
        |   app.component.html
        |   app.component.spec.ts
        |   app.component.ts
        |   environment.ts
        |   index.ts
        |
        \---shared
                index.ts
```

#### Package.json's Angular2 version rc4!?

At this point, 9/1/2016, angular2 is already in rc7, so whey when using
Angular-CLI is using couple month version behind!? Actually, angular-cli is
moving to webpack, so you'll have uninstall angular-cli and install the
webpack version of angular-cli.

```
npm uninstall -g angular-cli
```

```
npm install -g angular-cli@webpack
```

After install the angular-cli's webpack version, run the project command to
create prototype again.

```
ng new [project-name] --skip-npm --skip-bower --skip-git
```

Then run this comannd to generate directory tree,
`tree /a /f "myfolder" > tree.txt`

```
|   .gitignore
|   angular-cli.json
|   karma.conf.js
|   package.json
|   protractor.conf.js
|   README.md
|   tree.txt
|   tslint.json
|
+---e2e
|       app.e2e-spec.ts
|       app.po.ts
|       tsconfig.json
|
\---src
    |   favicon.ico
    |   index.html
    |   main.ts
    |   polyfills.ts
    |   styles.css
    |   test.ts
    |   tsconfig.json
    |   typings.d.ts
    |
    +---app
    |   |   app.component.css
    |   |   app.component.html
    |   |   app.component.spec.ts
    |   |   app.component.ts
    |   |   app.module.ts
    |   |   index.ts
    |   |
    |   \---shared
    |           index.ts
    |
    \---environments
            environment.prod.ts
            environment.ts
```

#### Angular2 is using `2.0.0.-rc7` now!

```
{
  "name": "ali-006",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.7",
    "@angular/compiler": "2.0.0-rc.7",
    "@angular/core": "2.0.0-rc.7",
    "@angular/forms": "2.0.0-rc.7",
    "@angular/http": "2.0.0-rc.7",
    "@angular/platform-browser": "2.0.0-rc.7",
    "@angular/platform-browser-dynamic": "2.0.0-rc.7",
    "@angular/router": "3.0.0-rc.3",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.21"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "angular-cli": "1.0.0-beta.11-webpack.9-4",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.5",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2"
  }
}
```

### Issues:

One of my biggest issue is when I use Angular-CLI@webpack the vendor
javascript size is 2.7MB, that's killing, I think Angular-CLI will fix or
maybe just document is not good I'm not able to set up it correctly by running
the webpack.

![](https://d1p0mp3f1fx0hz.cloudfront.net/_vsdpc4kd6.png)

If you're concern of this production assests bundle issue, you can use
following Angular2-webpack-starter


This blog will show how to get start with Angular2 with angular-cli.

Angular-Cli

Start Angular2 with angular-cli