Angular is a leading, powerful, and widely-used frontend framework for building single-page applications (SPAs). Built and maintained by Google, Angular is written in TypeScript and supports building mobile, desktop, and web applications. As of Angular 21 (released November 19, 2025), the framework features Signals as the primary reactive primitive, standalone components as the default, and zoneless change detection out of the box - making it faster and simpler than ever.
| Version | Released Date |
|---|---|
| AngularJS 1.x | September 2010 (original framework, now legacy) |
| Angular 2 | Released on September 14, 2016 (complete rewrite in TypeScript) |
| Angular 3 | Skipped - router package version misalignment |
| Angular 4 | Released on March 23, 2017 |
| Angular 5 | Released on November 1, 2017 |
| Angular 6 | Released on May 4, 2018 |
| Angular 7 | Released on October 18, 2018 |
| Angular 8 | Released on May 28, 2019 |
| Angular 9 | Released on February 7, 2020 |
| Angular 10 | Released on June 24, 2020 |
| Angular 11 | Released on November 11, 2020 |
| Angular 12 | Released on May 12, 2021 |
| Angular 13 | Released on November 3, 2021 |
| Angular 14 | Released on June 2, 2022 |
| Angular 15 | Released on November 16, 2022 |
| Angular 16 | Released on May 3, 2023 |
| Angular 17 | Released on November 8, 2023 |
| Angular 18 | Released on May 22, 2024 |
| Angular 19 | Released on November 19, 2024 |
| Angular 20 | Released on May 2025 |
| Angular 21 | Released on November 19, 2025 (latest) |
The Angular CLI is a command-line interface tool that helps you initialize, develop, scaffold, and maintain Angular applications. In Angular 21, running ng new my-project creates a standalone application by default - no NgModule required. You can use the CLI directly in a terminal or through an interactive UI such as Angular Console.
Step 1:- To start with creating an Angular CLI application, first install Node.js (version 20.19.0 or higher is required for Angular 21).
Step 2:- Install Angular CLI by running the below command-
Step 3:- Now, to create an Angular application, just run the below command-
Our newly created app will look like below (Angular 21 - Default Project Structure):-
Some important CLI commands:-
| Command | Alias | Description |
|---|---|---|
| add | - | It adds support for an external library to our Angular CLI project. |
| build | b | It compiles an Angular application into an output directory named "dist". In Angular 21, production mode is the default - no --prod flag needed. |
| config | - | It retrieves or sets Angular application configuration values in the angular.json file for the workspace. |
| doc | d | It opens the official Angular documentation (i.e. angular.io) in a browser, and searches for a given keyword. |
| e2e | e | It builds and serves an Angular application, then runs end-to-end tests. |
| generate | g | It will generate and/or modify files based on a schematic. |
| help | - | It will provide a list of available Angular CLI commands and their short descriptions. |
| lint | l | It will run linting tools on our Angular app code in a given project folder. |
| new | n | It will create a new workspace and an initial standalone Angular application (no NgModule by default in Angular 21). |
| run | - | It will run an architect target with an optional custom builder configuration defined in our Angular project. |
| serve | s | It builds and serves our Angular application. It also rebuilds on file changes. |
| test | t | It will run unit tests in our Angular project (uses Vitest by default in Angular 21). |
| update | - | It updates our Angular application and its dependencies. |
| version | v | To see Angular CLI version. |
| xi18n | - | It will extract i18n messages from source code. |
npm install -g @angular/cling new my-project // To create an angular applicaion
cd my-project // Navigate to project folder i.e. my-project
ng serve // To run the applicaionimport { Component } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
template: `
<!-- The content below is only a placeholder and can be replaced -->
<div style="text-align:center">
<h1>Welcome to {{ title }}!</h1>
</div>
`,
styles: [`
h1 {
color: green;
}
`]
})
export class AppComponent {
title = 'my-first-project';
}import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [AppComponent]
}).compileComponents();
});
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'my-first-project'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('my-first-project');
});
it('should render title in a h1 tag', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('h1')?.textContent).toContain('Welcome to my-first-project!');
});
});Explore 500+ free tutorials across 20+ languages and frameworks.