Upgrade Angular 19 CLI and explore features

Angular 19 has been released and it’s awesome!

I wanted to create a sample project right away. These are the steps I followed and recorded a short video exploring a couple of features.

Check current Angular CLI version globally

Run below command in terminal/command prompt. Make sure you are using -g flag and not inside an Angular project directory.

ng version

Uninstall global Angular CLI

npm uninstall -g @angular/cli

Install latest Angular CLI globally

npm install -g @angular/cli@latest

Check version again

ng version

You should see output with Angular CLI version 19 as below

Create a new project

ng new ng19-demo-1

Explore Angular 19 project

Once the project is created and NPM packages are installed, open it in the editor and explore the new project syntax. Most important is main.ts file which bootstrap application directly using AppComponent and not AppModule.

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

Checkout app.component.ts file as well. You will observe @Component decorator has no standalone property, yet it acts like one.

It’s because in Angular 19, all components are standalone by default. If you do not want, then you have specified explicitly standalone: false.

import { Component } from '@angular/core';
import { DashboardComponent } from './dashboard/dashboard.component';

@Component({
  selector: 'app-root',
  imports: [DashboardComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'ng19-demo-1';
}

Go through the detailed blog on Angular 19 version by Minko and explore awesome features.

Meet Angular v19

Cheers!