Setting Up the Development Environment: Installing Angular CLI

Published: 2024-08-15

Category: Angular

Read time: 2 min

Reads: 0

Lesson #5Views are counted together with the original Chinese articleImages are preserved from the source page

AI Article Decision Snapshot

Turn the lesson into workflow, model, budget, and security checks before choosing tools.

Use this quick snapshot before leaving the article. It keeps the next search tied to practical AI software, model/API, cost, privacy, and implementation questions.

Workflow fit

Identify the real job behind the article: coding, research, document review, support, analytics, content, or internal automation.

Model or tool decision

Decide whether the next step is a software shortlist, an AI tool comparison, an API platform choice, or a model benchmark.

Budget and usage signal

Estimate seats, API calls, prompt volume, retries, review time, and fallback work before assuming the workflow is cheap.

Security and privacy review

Check whether source code, customer data, private documents, prompts, logs, or embeddings will enter the AI workflow.

In the previous section, we successfully installed Node.js and npm (the Node.js package manager), laying a solid foundation for subsequent development. Now, we’ll continue setting up our development environment—with a focus on installing the Angular CLI, a powerful command-line tool that helps us quickly create, manage, and build Angular applications.

What Is the Angular CLI?

The Angular CLI (Command-Line Interface) is an open-source tool provided by the Angular team that significantly simplifies Angular project development. With the CLI, developers can generate projects, components, services, and other code artifacts using simple commands—and easily build and test their applications.

Step 1: Install the Angular CLI

Before installing the Angular CLI, ensure that Node.js and npm are already installed successfully. You can verify this by running the following commands in your terminal:

node -v
npm -v

Next, install the Angular CLI globally using npm. Open your terminal and run:

npm install -g @angular/cli

The -g flag indicates a global installation, enabling you to access the Angular CLI from any directory. After installation completes, verify it succeeded by running:

ng version

If version information appears, the Angular CLI has been installed successfully.

Step 2: Learn Common Commands

Once the Angular CLI is installed, familiarizing yourself with common commands will streamline future development. Below are several frequently used commands along with brief explanations:

Generate a new project:
```
ng new my-angular-app
```
This command creates a new Angular project named my-angular-app.
Start the development server:
```
ng serve
```
This launches the development server. By default, you can view your application in a browser at http://localhost:4200.
Generate a component:
```
ng generate component my-component
```
This creates a new component named my-component within the current project.
Generate a service:
```
ng generate service my-service
```
This generates a new service named my-service.

Step 3: Verify the Installation

To confirm that the Angular CLI is installed correctly and functioning as expected, let’s create a simple Angular project. Run the following command:

ng new my-first-app

The CLI will prompt you with configuration options—such as whether to enable Angular routing and which CSS preprocessor to use. Make selections based on your preferences; the CLI will then begin scaffolding the project.

Once project creation finishes, navigate into the new directory:

cd my-first-app

Then start the development server:

ng serve

Open your browser and visit http://localhost:4200. You should see Angular’s default welcome page—confirming that your development environment is fully set up and ready for Angular development.

Summary

In this section, we walked through installing the Angular CLI, explored essential commands, and validated the setup by creating and launching a basic Angular application. You now have a robust foundation for developing Angular applications.

In the next article, we’ll dive deeper—building your first Angular project, examining its structure, and exploring core features. Stay tuned!

English Article FAQ

Use this article as evidence before choosing AI tools

How should I use this AI Tutorials article?

Use it as the implementation or learning layer, then connect the idea to AI software buyer guides, tool comparisons, benchmarks, API choices, and security checks before making a production decision.

Is this English article different from the Chinese original?

The English edition is localized for global AI readers while preserving the original diagrams, screenshots, prompts, code examples, and source context from the Chinese article.

What should I read after Setting Up the Development Environment: Installing Angular CLI?

Continue with AI Software Buyer Guides, AI Tools Workbench, Best AI Coding Agents, AI Model Benchmarks, OpenAI vs Anthropic API, or LLM Security Tools depending on the decision you need to make.

Can this article alone choose an AI product or model?

No. Treat the article as evidence and context, then validate fit with pricing, privacy requirements, integration effort, benchmark results, workflow tests, and fallback planning.