Angular CLI (Command Line Interface) is a powerful development tool that simplifies the process of creating, managing, and deploying Angular applications. It provides a set of commands and utilities to scaffold, build, test, and serve Angular projects, making the development workflow more efficient. Here’s a detailed explanation of Angular CLI and its key features:
Installation:
To install Angular CLI, you need to have Node.js and npm (Node Package Manager) installed on your machine. Angular CLI is installed globally using npm (Node Package Manager). You can install it by running the following command:
npm install -g @angular/cli
Creating a new project:
Once Angular CLI is installed, you can create a new Angular project using the ng new command. For example:
ng new my-app
This command generates a new Angular project in a folder named “my-app” with the necessary file structure and configuration as shown below. It also installs all the necessary dependencies defined in the package.json file.
Project structure:
Angular CLI sets up a predefined project structure that follows Angular’s best practices. It includes folders for components, modules, services, assets, and more.
The main files are:
- src/app: Contains the application’s components, services, and other Angular-related files.
- src/assets: Stores static files like images, fonts, etc.
- angular.json: The configuration file that defines build and project settings.
- package.json: Lists project dependencies and scripts.
Development server:
Angular CLI provides a built-in development server that allows you to run your application locally during development.
Use the ng serve command to start the development server:
- Navigate to the workspace folder, such as my-project.
- Run the following command in a terminal:
ng serve –open
The ng serve command launches the server, watches your files, and rebuilds the app as you make changes to those files.
The –open (or just -o) option automatically opens your browser to http://localhost:4200/.
It also enables hot module replacement, which means any changes you make to your code will automatically trigger a rebuild and update the browser without a full page reload.
Generating components, services, and more:
Angular CLI offers generators to quickly create components, services, modules, and other Angular artifacts.
For example, you can create a new component using the ng generate component command:
ng generate component my-component
This command creates the necessary files for a new component, including the TypeScript code, HTML template, and CSS styles.
Building the application:
Angular CLI provides a command to build your application for production deployment. The build process optimizes your code and generates static files that can be deployed to a web server. You can run the following command:
ng build
Running ng build generates a production-ready build of your application in the dist/ directory.
The build process includes transpiling TypeScript to JavaScript, bundling and minifying files, and optimizing the application for better performance.
Testing the application:
Angular CLI supports unit testing out of the box.
For unit tests, you can use the ng test command to run your test suites using Karma, a popular test runner.
Quiz:
Which command is used to install Angular globally?
a) ng install angular
b) npm install -g @angular/cli
c) ng global add angular
d) npm add -g angular
What is the command to create a new Angular project?
a) ng create my-project
b) ng new my-project
c) ng generate my-project
d) ng init my-project
Which file contains the configuration settings for an Angular project created with Angular CLI?
a) package.json
b) angular.json
c) tsconfig.json
d) index.html
Correct answer: b) angular.json
Which command is used to start the Angular development server?
a) ng serve
b) npm start
c) ng start
d) npm serve
Which command is used to build a production-ready Angular application?
a) ng build
b) npm run build
c) ng compile
d) npm build