Coder Social home page Coder Social logo

angular-cli's Introduction

Angular CLI

Join the chat at https://gitter.im/angular/angular-cli

Build Status Dependency Status devDependency Status npm

CLI for Angular applications based on the ember-cli project.

Note

The CLI is now in Release Candidate (RC). If you are updating from a beta version, check out our [RC.0 Update Guide] (https://github.com/angular/angular-cli/wiki/stories-rc.0-update).

If you wish to collaborate, check out our issue list.

Before submitting new issues, have a look at issues marked with the type: faq label.

Prerequisites

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

Table of Contents

Installation

BEFORE YOU INSTALL: please read the prerequisites

npm install -g @angular/cli

Usage

ng help

Generating and serving an Angular project via a development server

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 --host 0.0.0.0 --port 4201 --live-reload-port 49153

Generating Components, Directives, Pipes and Services

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

# components support relative path generation
# if in the directory src/app/feature/ and you run
ng g component new-cmp
# your component will be generated in src/app/feature/new-cmp
# but if you were to run
ng g component ../newer-cmp
# your component will be generated in src/app/newer-cmp

You can find all possible blueprints in the table below:

Scaffold Usage
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module

Updating Angular CLI

If you're using Angular CLI 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:

npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli

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

Global package:

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

Local project package:

rm -rf node_modules dist # use rmdir on Windows
npm install --save-dev @angular/cli@latest
npm install

You can find more details about changes between versions in CHANGELOG.md.

Development Hints for hacking on Angular CLI

Working with master

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 serve

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.

You can also use ng new foo --link-cli to automatically link the @angular/cli package.

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

Documentation

The documentation for the Angular CLI is located in this repo's wiki.

License

MIT

angular-cli's People

Contributors

alxhub avatar ashoktamang avatar baruchvlz avatar beeman avatar brocco avatar catull avatar cexbrayat avatar cgmartin avatar cironunes avatar clydin avatar deebloo avatar delasteve avatar dzonatan avatar filipesilva avatar hansl avatar igorminar avatar intellix avatar jeffbcross avatar jeremymwells avatar jkuri avatar johanneshoppe avatar meligy avatar mgechev avatar mgol avatar rodyhaddad avatar shairez avatar shyam-chen avatar sumitarora avatar thelarkinn avatar zackarychapple avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.