Angular CLI | Angular Project Setup (original) (raw)

Last Updated : 06 Sep, 2024

Angular is an open-source front-end web application framework that is used for building single-page and complex web applications. By default, angular uses TypeScript for creating logic but as the browser doesn't know typescript it converts typescript into javascript in order to make typescript understandable.

What is Angular CLI?

Angular CLI (Command Line Interface) is a powerful tool for managing Angular Projects. It is a handy tool that makes building Angular apps easier and faster. It makes the development process easier by defining different commands for different operations. It keeps your project organized and consistent.

**Note: Please make sure you have installed node and npm in your system. You can check your node version and npm version by using the following command:

node --version
npm --version

Nodejs and NPM version

**Steps To Create Application Using Angular CLI

**Step 1: Install Angular CLI

npm install - g @angular/cli

Installation of Angular CLI

**Step 2: Create new Project

ng new myNewApp

Angular project Creation

**Step 3: Navigate to your Project Directory

cd myNewApp

Project Directory Navigation

**Step 4: Run Server and See Your Application

ng serve

Command to start the server

**Output

Angular Project Setup

**Folder Structure:

Folder Structure

**src/ Folder: This is the main directory where all your application code exists. It contains everything necessary for building and running your app.

• **src/app/ Folder : This is where you build your app's features.It holds the main parts of your app, like:
  • **app.component.css ( or .scss): Styles that make your main screen look nice.
  • app.component.html: The HTML file that defines the layout for your main screen.
  • **app. component.spec.ts: This file is for testing your main component. It helps to ensure that component works correctly.
  • **app.component.ts: This is the main component of your app. It controls whatever gets displayed on your screen.
  • **app.config.server.ts: This file is often used for server- side rendering (SSR) setups, that contain server- related configurations in Angular.
  • **app.config.ts: This file is used to set up and manage configuration settings in your Angular App. Think of this file like a settings page for your app.
  • **app.routes.ts: This file sets up navigation for your app. It defines what happens when users go to different URLs in your application.

**Other files which are mostly used:

As a beginner you don't need these files at this time, don't bother about that. These all are used for editor configurations and information needed at compile time. The builtin webpack in angular CLI manages all for you.

• **src/main.ts: This file bootstraps the standalone component directly, making it the entry point of your angular Application. Instead, of bootstrating a module, you bootstrap the main standalone component.
• **src/index.html: The main HTML file that loads when you start you application. It includes basic settings and which displays your angular application.
• **package.json: It lists all libraries and tools your app needs. It includes Dependencies and dev dependencies which are compatible with other versions.
• **angular.json: The blueprint for your project. It tells angular how to build, test and serve your app.

For more reference, you can refer our article on Folder Structure of Angular.

**More commands that you will need while working on the project:

ng generate component component_name
ng generate service service_name
ng generate directive directive_name