Start Angular2 with angular-cli

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.

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