Angular ng new

The Angular CLI (ng new) is a command-line interface through which developers can quickly create and get Angular applications. Furthermore, it brings about simplicity in the introductory phases of development by generating all necessary files and folder structures that are required for an Angular project to exist.

Why use 'ng new'?

The use of 'ng new' provides several benefits:

• Standardized Structure: Just with the command 'ng new' it creates a well-structured angular application with all the required files and folders.
• Quick Setup: The setup process is very fast as it sets up essential tools like; TypeScript and testing frameworks very speedily.
• Efficiency: It removes the need for manual setup, allowing developers to directly jump into the actual development of their application.

This command serves as an important step for getting started on any new Angular project since it covers several common setups thus simplifying the whole process of starting with Angular programming.

Prerequisites

• Basic knowledge of HTML, CSS and JavaScript
• NodeJs and NPM

Approach

Basic Project Setup ('ng new project name')

This is the default way of generating a new Angular project. It creates the necessary file structure and includes everything required to start development.

ng new project-name

Customize the Setup

The --routing flag will cause an additional app.routes.ts file to be created, which is used for establishing an application's routes in Angular. This means that it is ideal if you wish to have navigation across your application.

Specifying a Style Language (--style=<style>)

The --style option lets one to select a desired style sheet language like CSS, SCSS or LESS. This is very important if an individual project needs certain form of styling.

Skipping Unnecessary Files (--skip-tests)

Developers who want to create a project without generating test files should opt for the --skip-tests option. This is helpful for developers who prefer creating tests at later stages or when testing does not serve as the focal point of the project.

Use Strict Mode (--strict)

The --strict flag enables strict type checking and more rigorous rules in the TypeScript compiler. This suits projects that would like code with higher quality and better type safety.

When creating a new Angular project using the 'ng new' command, there are a few different options you can pass to customize the setup:

Basic Syntax:

ng new <project-name>

Additional Options and Flags:

• '--routing': Adds a 'routing' module to your project.
• '--style=<style>': It specifies the styling language to be used for example: (CSS,SCSS,LESS),
• '--skip-tests': It is used to skip the test file creations.
• '--strict': It enables strict type checking and more strict rules.

Example:

ng new my-angular-app --routing --style=scss --skip-tests --strict

Steps to Create Application (Install Required Modules)

Let's see how to create an Angular application using the 'ng new' command step-by-step:

Step 1: Install Angular CLI

If you haven't already installed Angular CLI, install it by using the command:

npm install -g @angular/cli

Step 2: Create a new Angular Project

ng new my-angular-app

ng new my-angular-app --routing --style=scss --skip-tests --strict

The above command will create an Angular project with the name 'my-angular-app' with routing enabled, SCSS for styling, test files skipped and strict type checking.

Step 3: Navigate to Project Directory

After the project is created, move into the project directory:

cd my-angular-app

Folder Structure

Dependencies

"dependencies": {
    "@angular/animations": "^18.0.0",
    "@angular/common": "^18.0.0",
    "@angular/compiler": "^18.0.0",
    "@angular/core": "^18.0.0",
    "@angular/forms": "^18.0.0",
    "@angular/platform-browser": "^18.0.0",
    "@angular/platform-browser-dynamic": "^18.0.0",
    "@angular/platform-server": "^18.0.0",
    "@angular/router": "^18.0.0",
    "@angular/ssr": "^18.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
}

Step 4: Start the Development Server

To see your application is in action, start the Angular development server by using the following command:

ng serve

Your application will be available at 'http://localhost:4200/'.

Output