Prototype of a CLI for Angular 2 applications based on the ember-cli project.

This project is very much still a work in progress.

We still have a long way before getting out of our alpha stage. If you wish to collaborate while the project is still young, check out our issue list.

The generated project has dependencies that require Node 4 or greater.

• Installation
• Usage
• Generating a New Project
• Generating Components, Directives, Pipes and Services
• Generating a Route
• Creating a Build
• Installing a 3rd Party Library
• Running Unit Tests
• Running End-to-End Tests
• Deploying the App via GitHub Pages
• Known Issues

npm install -g angular-cli

ng --help

ng new PROJECT_NAME
cd PROJECT_NAME
ng serve

Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

You can configure the default HTTP port and the one used by the LiveReload server with two command-line options :

ng serve --port 4201 --live-reload-port 49153

You can use the ng generate (or just ng g) command to generate Angular components:

ng generate component my-new-component
ng g component my-new-component # using the alias

You can find all possible blueprints in the table below:

You can generate a new route by with the following command (note the singular used in hero):

ng generate route hero

This will create a folder with a routable component (hero-root.component.ts) with two sub-routes. The file structure will be as follows:

...
|-- app
|   |-- hero
|   |   |-- hero-detail.component.html
|   |   |-- hero-detail.component.css
|   |   |-- hero-detail.component.spec.ts
|   |   |-- hero-detail.component.ts
|   |   |-- hero-list.component.html
|   |   |-- hero-list.component.css
|   |   |-- hero-list.component.spec.ts
|   |   |-- hero-list.component.ts
|   |   |-- hero-root.component.spec.ts
|   |   |-- hero-root.component.ts
|   |   |-- hero.service.spec.ts
|   |   |-- hero.service.ts
|   |-- ...
|-- app.ts
...

Afterwards to use the new route open your main app component, import hero-root.component.ts and add it in the route config:

@RouteConfig([
  {path:'/hero/...', name: 'HeroRoot', component: HeroRoot}
])

Visiting http://localhost:4200/hero will show the hero list.

ng build

The build artifacts will be stored in the dist/ directory.

ng install ng2-cli-test-lib

You can read more about this here.

ng test

Tests will execute after a build is executed via Karma

Before running the tests make sure that you have an updated webdriver and that the tests are built:

$(npm bin)/webdriver-manager update
$(npm bin)/tsc -p e2e/

Afterwards you only need to run $(npm bin)/protractor while serving via ng serve.

The CLI currently comes bundled with angular-cli-github-pages addon.

This means that you can deploy your apps quickly via:

git commit -a -m "final tweaks before deployment - what could go wrong?"
ng github-pages:deploy

Checkout angular-cli-github-pages addon docs for more info.

You can lint or format your app code by running ng lint or ng format respectively. This will use the lint/format npm script that in generated projects uses tslint/clang-format.

You can modify the these scripts in package.json to run whatever tool you prefer.

You can format your app code by running ng format. This will use the format npm script that in generated projects uses clang-format.

You can modify the format script in package.json to run whatever formatting tool you prefer and ng format will still run it.

This project is currently a prototype so there are many known issues. Just to mention a few:

• All blueprints/scaffolds are in TypeScript only, in the future blueprints in all dialects officially supported by Angular will be available.
• On Windows you need to run the build and serve commands with Admin permissions, otherwise the performance is not good.
• Protractor integration is missing.
• The initial installation as well as ng new take too long because of lots of npm dependencies.
• Many existing ember addons are not compatible with Angular apps built via angular-cli.

git clone https://github.com/angular/angular-cli.git
cd angular-cli
npm link

npm link is very similar to npm install -g except that instead of downloading the package from the repo, the just cloned angular-cli/ folder becomes the global package. Any changes to the files in the angular-cli/ folder will immediately affect the global angular-cli package, allowing you to quickly test any changes you make to the cli project.

Now you can use angular-cli via the command line:

ng new foo
cd foo
npm link angular-cli
ng server

npm link angular-cli is needed because by default the globally installed angular-cli just loads the local angular-cli from the project which was fetched remotely from npm. npm link angular-cli symlinks the global angular-cli package to the local angular-cli package. Now the angular-cli you cloned before is in three places: The folder you cloned it into, npm's folder where it stores global packages and the angular-cli project you just created.

Please read the official npm-link documentation and the npm-link cheatsheet for more information.

MIT