CLI Commands
1. Create a New Angular Project
Example:
This crates a new Angular project folder with all the necessary files and configuration.
2. Generate a New Component
Example:
Creates a new Angular component named header in your project.
3. Generate a New Service
Example:
4. Run Your App Locally
5. Build Your App for Production
Compiles and bundles your app, ready to deploy.
Example: for production build
The output will appear in the dist folder.
6. Run Unit Tests
Runs unit test (usually using karma) to check small of your app.
7. Run End-to-End (E2E) Tests
Runs end-to-end test (usually using Protractor) to test the app as a whole.
8. Lint Your Code
Checks your code for errors and enforces coding standards.
9. Update Project Dependencies
Updates Angular packages and other dependencies to the latest versions.
10. Add and Configure a New Package
Example:
This installs and sets up new packages in your project automatically.
11. View Help and Available Commands
Shows a list of available Angular CLI commands and their usage.
ng new <project-name>Example:
ng new my-angular-app
This crates a new Angular project folder with all the necessary files and configuration.
2. Generate a New Component
ng generate component <component-name>Example:
ng generate component header
Creates a new Angular component named header in your project.
3. Generate a New Service
ng generate service <service-name>Example:
ng generate service data
4. Run Your App Locally
ng serve
Starts your app in development mode and automatically refreshes when you make changes.
By default, you can view your app at:
http://localhost:4200
5. Build Your App for Production
ng build
Compiles and bundles your app, ready to deploy.
Example: for production build
ng build --prod
The output will appear in the dist folder.
6. Run Unit Tests
ng test
Runs unit test (usually using karma) to check small of your app.
7. Run End-to-End (E2E) Tests
ng e2e
Runs end-to-end test (usually using Protractor) to test the app as a whole.
8. Lint Your Code
ng lint
Checks your code for errors and enforces coding standards.
9. Update Project Dependencies
ng update
Updates Angular packages and other dependencies to the latest versions.
10. Add and Configure a New Package
ng add <package-name>Example:
ng add @angular/pwa
This installs and sets up new packages in your project automatically.
11. View Help and Available Commands
ng help
Shows a list of available Angular CLI commands and their usage.