Last updated on April 1st, 2024
Setting up an Angular project involves several steps, but with the Angular CLI (Command Line Interface), the process is streamlined. Step-by-step tutorial on how to set up an Angular project using Angular CLI with practical examples.
What is Angular CLI?
Angular CLI stands for Angular Command Line Interface. It is a tool provided by angular team. There is a need for additional tool because angular code doesn’t directly run in browser. It needs to be converted and optimize since you will use angular features that are not native JavaScript features. It includes build step to convert angular code that you write during development to native code that runs in browser.
The CLI automates a wide range of tasks, from project creation and configuration to development, testing, and deployment.
Here are some of the key uses of the Angular CLI.
- Create new Angular projects
- Generate application features
- Local development server
- Live reload
- Unit and end-to-end testing
- Deploy commands
- Adding libraries
- Build optimization etc
Prerequisites Install Node.js and npm
In order to install and use Angular CLI you need to have Node JS install on your system. Angular CLI uses Node JS under the hood, so you need to install Node JS before using CLI.
Visit Node.js (nodejs.org) to download LTS or current Version. It is available for all operating system. Walk through the installer to install Node JS on your system. If you are a Windows and MacOS user, then no need to install npm additionally. It will be installed automatically with Node.js. However, if you are a Linux user then you will have to install that using the command prompt.
once you have Node JS installed you are ready use angular CLI.To check the Node JS version, you can open the terminal and hit the below command.
node --versionThis will return latest version of Node JS installed on your machine.
Install Angular CLI
Open your terminal or command prompt and execute below command to install Angular CLI globally.
npm install -g @angular/cli
After installation verify version of angular CLI using below command
ng version
It will return Angular CLI version along with other configuration.
Create the Very First Project in Angular 17
Once the setup is complete, you can create a new Angular project by opening your terminal and running the following command:
ng new my-angular-project --no-strict --standalone false --routing false
If you have project name with multiple words separate it by dash and not by spaces.
The --strict flag enables strict type checking options, improving maintainability and helping catch bugs earlier.
The --routing=false option indicates that the Angular routing module should not be included in the project setup.
The --standalone flag configures the project for standalone components, allowing components and modules to be bootstrapped without the need for an NgModule.
You will be prompted to choose the language or method for styling. Please select CSS and then continue to the next instruction.
In the latest version of the CLI, you will be inquired whether you wish to activate Server-Side Rendering and Static Site Generation.
Opt out by typing ‘n’ and pressing enter.
Hit enter and new project will be created.
Running your new Angular Project
Navigate to the newly created project folder by using the cd command. Then, start a development server to preview your Angular application by executing the following command.
ng serve
This action initiates a development server that is accessible at this http://localhost:4200/ address. The default port for the development server is 4200 You can terminate the server at any time by pressing Ctrl + C. Note that the server and your application preview will remain active only as long as the ng serve command is running. To observe changes to your application in real-time, keep the server running while you make modifications.
You can then visit http://localhost:4200/ in your web browser to see your application’s interface. Keep in mind that the appearance may vary depending on the Angular version you are using.
The ng serve command automatically detects changes to your files and refreshes the page accordingly, allowing for a streamlined development experience.
FAQ: Angular Project and Environment Set Up
To start an Angular project, you’ll need Node.js and the npm package manager installed on your computer. Angular requires Node.js for its runtime and npm for managing project dependencies. Once these are installed, you can use the Angular CLI (Command Line Interface) to create, manage, and build Angular projects.
You can install the Angular CLI globally on your machine using npm with the following command: npm install -g @angular/cli. This command installs the Angular CLI, making it available for use anywhere on your system.
Navigate to your project folder using the cd project-name command, then start the development server by running ng serve. This command compiles the application and launches a web server. You can view your application by visiting http://localhost:4200/ in your web browser.
To update the Angular CLI, use the command npm install -g @angular/cli@latest. For updating the Angular framework within your project, use the command ng update @angular/core @angular/cli.