Overview of Angular CLI and its Benefits

Angular CLI (Command Line Interface) is a command-line tool for building and managing Angular applications. It gives developers powerful commands and tools to create, develop, test, and deploy Angular applications easily and efficiently.

Leveraging Angular CLI enables developers to reap benefits like- 

• Faster Development: default configurations, code generators, and project templates.
• Simplified Build Process: single command build configuration and optimised builds for production.
• Easy Testing: pre-configured Karma and Protractor for unit and end-to-end testing.
• Code Consistency: enforced coding style, linting, and formatting tools.
• Customisable: options to add or remove features, modify configurations, and create custom scripts.

Read this article to learn how to install Angular CLI on Windows 10 in detail. 

System Requirements for Installing Angular CLI on Windows 10

To install Angular CLI on Windows 10, your system must be ready with the following – 

• Node.js- version 10 or higher
• Npm- which is often included with the Node.js installation

Check out our free courses to get an edge over the competition.

Downloading and Installing Node.js on Windows 10

• Visit the official website for Node.js installation. 

Official node.js website

• Select your system. In this case, you will select Windows Installer. Once you click on the installer, your MSI file will start downloading.
• Once the download is complete, run the installation file by double-clicking on it. Follow the installation wizard instructions to complete the installation.

Node.js installation

• You will be asked to accept the licence agreement and choose the installation location during the installation process. You can choose the default settings or customise them to your preference.
• Your installation is complete!

Verifying Node.js Installation

Once the installation is complete, verify that Node.js is successfully installed on your Windows 10 before downloading Angular CLI. Here’s how you can verify your installation – 

• Open the command prompt on your Windows system.
• To check if Node.js is installed, type the following command in the command prompt: node -v
• If the installation is successful, the command prompt should display the version of the node.js. 

Verification of Node.js

Installing Angular CLI via Command Prompt/Powershell

To install Angular CLI via Command Prompt or PowerShell on your Windows system, follow these steps:

• Open the Command Prompt or Powershell.
• Type the following command to install Angular CLI: npm install -g @angular/cli

Installing Angular CLI on Command Prompt

Installing Angular CLI on PowerShell

• Press Enter to execute the command.
• npm will download and install the necessary Angular CLI packages. This may take several minutes, depending on your internet speed.
• Once the installation is complete, you can verify that your system has installed Angular CLI correctly.

Check Out upGrad’s Software Development Courses to upskill yourself.

Verifying Angular CLI Installation

To verify that Angular CLI has been installed on your Windows system, follow these steps:

• Open the Command Prompt or PowerShell.
• Type the following command in the Command Prompt or PowerShell: ng version
• Press Enter to execute the command.
• If Angular CLI has been installed correctly, the Command Prompt or PowerShell should display the Angular CLI version numbers.

Complete installation of Angular CLI

Updating Angular CLI to its Latest Version

This process is pretty easy if you use Angular version 9, 10 or above. You can update angular CLI to its most recent version by running the following command in your terminal:

ng update @angular/core @angular/cli

Or you can implement the following command with npx:

npx @angular/cli update @angular/core @angular/cli

If you are utilising Angular Material, update it using the following command:

ng update @angular/material

To learn more and become an expert in the field of software development, check out upGrad’s Executive Post Graduate Programme in Software Development – Specialisation in Full Stack Development course. 

Uninstalling Angular CLI from Windows 10

Uninstalling Angular CLI from Windows 10 is an easy process – 

• Open the Command Prompt or PowerShell on your Windows system.
• Type the following command in the Command Prompt or PowerShell: 

npm uninstall -g @angular/cli

Uninstalling Angular CLI

• Press Enter to execute the command.

Troubleshooting Common Installation Errors

Here are some common installation errors you may encounter while installing Angular CLI on Windows 10, along with their solutions:

1. Error: “The term ‘ng’ is not recognised. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.”

Solution: This error occurs when Angular CLI is not properly installed or not added to the system path. You can resolve this issue by re-installing Angular CLI or adding it to the system path.

Error 1

2. Error: “npm ERR! code EACCES”

Solution: This error occurs when npm has insufficient permissions to install packages globally. You can resolve this issue by running the Command Prompt or PowerShell as an administrator.

Error 2

3. Error: “npm ERR! network connectivity problem”

Solution: This error occurs when there is a problem with the internet connectivity. You can resolve this issue by checking your internet connection and firewall settings.

Error 3

4. Error: “Could not find a package.json file in”

Solution: This error occurs when you run the command in the wrong directory. You can resolve this issue by running the command in the correct directory where your Angular project is located.

Error 4

5. Error: “TypeError: Cannot read property ‘config’ of undefined”

Solution: This error occurs when there is a mismatch between the versions of Node.js and Angular CLI. You can resolve this issue by updating Node.js to the latest version or downgrading Angular CLI to a compatible version.

Error 5

Learn more ways of troubleshooting Angular CLI errors by becoming an expert in software development with upGrad’s Master of Science in Computer Science course. 

Creating a New Angular Project with CLI

Here’s how you can create a new angular project with CLI – 

• Create a new Angular project by running the following command:

ng new project-name

Replace “project-name” with the name of your project.

• Answer the questions asked by the CLI during project creation. You can choose the default options or customise them as per your requirements.
• Navigate to the project directory using the cd command:

cd project-name

• Start the development server by running the following command:

ng serve

• Open your browser and navigate to http://localhost:4200/ to see your application running.
• Your new project is now ready!

New project installation

Generating Angular Components with CLI

Angular CLI provides a convenient way to generate components for your Angular application. 

Here’s how you can use the CLI to generate components:

• Open a terminal or command prompt and navigate to your Angular project directory.
• Type the following command to generate a new component:

ng generate component component-name

Replace the component name with the name you want to give your component. For example:

ng generate component my-component

• This will generate a fresh directory called my-component in the project’s src/app directory. The my-component directory will contain four files: my-component.component.ts, my-component.component.html, my-component.component.css, and my-component.component.spec.ts.
• Open the my-component.component.ts file and modify it to add the necessary functionality to your component. You can define the component’s class, properties, and methods here.
• Open the my-component.component.html file and modify it to create the template for your component.
• Open the my-component.component.css file and modify it to add any custom styles for your component.
• Open the my-component.component.spec.ts file and modify it to add unit tests for your component.

Generating Angular Services with CLI

To generate an Angular service with the Angular CLI on Windows 10, you can follow these steps:

• Open the Command Prompt or PowerShell in Windows 10.
• Navigate to the root directory of your Angular project using the cd command.
• To generate a new service, run the following command:

ng generate service path/to/service-name

• Replace path/to/service-name with your service’s desired path and name. For example, to generate a service named ‘data’ in the ‘src/app’ directory, run:

ng generate service app/data

• The Angular CLI will generate a new service file with the specified name and path and add it to the ‘providers’ array in the app module.
• You can now import and use the newly generated service in your components and other parts of your Angular application.

Building an Angular Application with CLI

Sure, here are the steps to create and build an Angular application using the CLI on Windows 10:

• Create or navigate to the directory where you want to create your Angular app.
• Run the “npm init @angular myApp” command to create a new Angular app in the “myApp” directory. Press Enter when prompted to accept the default options.
• Navigate to the new directory using the command “cd myApp”.
• Run the command “npm start” to build your new app. Press Enter when prompted to accept the default options.
• Note the URL displayed in the message in the command-line tool. You will need this URL to open the app in a browser.
• Open a browser and enter the URL in the address bar. The default URL is http://localhost:4200.

Deploying an Angular Application with CLI

To deploy an Angular application using the Angular CLI, follow the simple process given below – 

• Go to the workspace folder where your Angular app is located.
• Use the command prompt to navigate your app’s directory.

cd my-app

ng serve –open

• Type “ng serve –open” and press Enter.
• The server will launch, watch your files, and rebuild the app as you make changes.
• The “–open” or “-o” option automatically opens your browser to http://localhost:4200/.
• If everything was set up correctly, you should see a page similar to the one in the example.

Deploying an application

Conclusion

Congratulations! You have successfully installed Angular CLI on your Windows 10. Angular CLI provides a powerful set of tools and libraries that can greatly simplify the process of building Angular applications. With Angular CLI, you can access robust tools and libraries to help you build high-performing, scalable, and feature-rich web applications. 

So what are you waiting for? Explore the world of Angular CLI and much more with upGrad’s Full Stack Software Development Bootcamp. This course provides an immersive learning platform that makes students aware of the strengths and limitations of tech skills. The program will help students take their first step to becoming a successful developer!