Introduction to Angular and Angular CLI

Understand the file structure, use of each file and basic Angular commands

Published in

Nerd For Tech

3 min readJun 23, 2024

Angular, a robust front-end framework developed by Google, simplifies the creation of dynamic, single-page web applications. To enhance the development process, Angular comes with a powerful command-line tool known as Angular CLI (Command Line Interface).

This article provides an in-depth look at Angular and Angular CLI

Prerequisites

Ensure you have Node.js and npm (Node Package Manager) installed on your machine. You can download and install them from Node.js official website.
Install Angular CLI globally by running the following command in your terminal or command prompt:

npm install -g @angular/cli

Creating a New Angular Project

Open your terminal or command prompt.
Run the following command to generate a new Angular project:

ng new your-project-name

Replace your-project-name with the desired name for your Angular project.

3. Angular CLI will prompt you with a series of questions regarding project setup. Answer them according to your preferences, or press Enter to accept the default values.

4. Once the project setup is complete, navigate into the newly created project directory:

cd your-project-name

Running the Development Server

Use the following command to start the development server and run your Angular application locally

ng serve

2. Open your web browser and navigate to http://localhost:4200/. You should see your Angular application running.

Additional Options

To specify a different port for the development server, you can use the --port option. For example:

ng serve — port 3000

If you want to enable live reloading (automatically refreshing the browser when you make changes to your code), you can use the --live-reload option:

ng serve — live-reload

That’s it! You have successfully created a new Angular project and started the development server. You can now begin building your application using Angular’s powerful features and tools.

Note

Q) What is the difference between ng serve & npm start

Both ng serve and npm start are commands used to start the development server for an Angular project, but they are associated with different tools in the Angular ecosystem.

`ng serve`:

This command is part of the Angular CLI (Command Line Interface).
When you run ng serve, it uses the configuration specified in the angular.json file for your project.
It starts the development server and serves your Angular application using the settings defined in the Angular CLI configuration.

Example:

ng serve

`npm start`:

This command is more generic and is used with Node.js projects in general, including Angular applications.
When you run npm start, it looks for the "start" script specified in the scripts section of your project's package.json file.
The actual command executed for npm start is determined by the value assigned to the "start" script.

Example package.json:

"scripts": {
  "start": "ng serve"
}

In this example, running npm start is equivalent to running ng serve.

The key difference is that ng serve is specifically tailored for Angular projects and is part of the Angular CLI, while npm start is a more general command used in Node.js projects and can be configured to run any script specified in the package.json file.

In many Angular projects, the "start" script in package.json is configured to run ng serve, making ng serve and npm start functionally equivalent in those cases.

Choose the command that you find more convenient or aligns with your project’s configuration. If your project’s package.json specifies "start": "ng serve", you can use either command interchangeably.

Folder Structure in Angular

Here are the resources I found that explain the Angular folder structure really well:

Hope you learned something new.❤️

Connect with me via;