Getting Started with Angular: A Modern Setup Guide

"Angular 2" is not something you should start a new project with in 2026 — it was the 2016 ground-up rewrite of AngularJS, and Angular has shipped a major version every single year since. Today Angular is on v17 through v20+, and getting started looks nothing like the old SystemJS-and-typings ritual. This guide is the modern, copy-paste path: install the CLI, scaffold a project in one command, and write your first standalone component with signals and the new control flow.

Key takeaways

• Angular 2 is obsolete. It was the 2016 rewrite of AngularJS; Angular now follows a yearly release cadence and sits at v17-v20+. The framework is just called "Angular" now.
• Use the Angular CLI. Run npm install -g @angular/cli, then ng new my-app and ng serve. There is no more SystemJS, typings.json, or lite-server.
• Standalone components are the default. You rarely write @NgModule anymore, and you bootstrap with bootstrapApplication(AppComponent) instead of platformBrowserDynamic().bootstrapModule().
• Built-in control flow (@if, @for, @switch) has replaced the old *ngIf / *ngFor structural directives in templates.
• Signals are the modern way to hold reactive state, alongside typed reactive forms, the inject() function, provideRouter, and provideHttpClient.
• SSR is one command: ng add @angular/ssr wires up server-side rendering with hydration.

Is Angular 2 still a thing?

No. "Angular 2" was a specific moment in time — the December 2016 release that replaced AngularJS (1.x) with a TypeScript-first, component-based framework. After that, the team dropped the version number from the name and moved to a predictable schedule: a new major roughly every six months, with two majors per year.

If you followed an Angular 2 tutorial today you would hand-configure SystemJS, install typings, wire up lite-server, and write a systemjs.config.js by hand. None of that is how anyone builds Angular now. The Angular CLI does all of it, and the developer experience is dramatically simpler and faster (esbuild for builds, a Vite-powered dev server). Treat any Angular 2-era article — including the older companion piece, introduction to Angular for client-side applications — as history, not instructions.

What changed from Angular 2 to modern Angular?

The concepts you learned in 2016 (components, decorators, dependency injection, RxJS) still exist, but almost every setup and template detail has moved on. Here is the honest before-and-after:

Concern	Angular 2 (2016)	Modern Angular (v17-v20+)
Project setup	Manual SystemJS, typings.json, lite-server, hand-written tsconfig.json	ng new via the Angular CLI (esbuild build, Vite dev server)
Module system	@NgModule required for everything	Standalone components by default (no NgModules)
Bootstrap	platformBrowserDynamic().bootstrapModule(AppModule)	bootstrapApplication(AppComponent, appConfig)
Template logic	*ngIf, *ngFor, [ngSwitch]	Built-in @if, @for, @switch
Dependency injection	Constructor parameters only	inject() function (constructor injection still works)
Reactive state	RxJS + manual change detection	Signals (signal, computed, effect)
HTTP / Router setup	HttpModule, RouterModule.forRoot()	provideHttpClient(), provideRouter(routes)
Forms	Untyped reactive forms	Typed reactive forms
Server-side rendering	Separate Angular Universal wiring	ng add @angular/ssr (hydration built in)

How do I set up a modern Angular project?

You need Node.js (an active LTS such as 18.19+ or 20+) and npm. That is the only prerequisite — the CLI installs and pins TypeScript, RxJS, and every Angular package for you, so you never touch typings.json or a SystemJS config again.

Three commands take you from nothing to a running app:

# 1. Install the Angular CLI globally (Node.js 18.19+ or 20+ required)
npm install -g @angular/cli

# 2. Create a new workspace (prompts for routing + a stylesheet format)
ng new my-app

# 3. Start the dev server (Vite-powered, opens http://localhost:4200)
cd my-app
ng serve --open

# Optional: add server-side rendering + hydration in one step
ng add @angular/ssr

What does the generated project look like?

ng new scaffolds a clean, opinionated structure. Note how little configuration you own compared with the old eight-file manual setup:

my-app/
├─ src/
│  ├─ app/
│  │  ├─ app.component.ts     # root standalone component (app.ts in v20+)
│  │  ├─ app.component.html   # template
│  │  ├─ app.config.ts        # providers: router, HttpClient, etc.
│  │  └─ app.routes.ts        # route definitions
│  ├─ index.html
│  ├─ main.ts                 # bootstrapApplication(AppComponent)
│  └─ styles.css
├─ angular.json               # CLI workspace config
├─ package.json
└─ tsconfig.json              # generated for you — no manual typings.json

What does a modern Angular component look like?

A modern root component is standalone — it imports what it needs directly and does not belong to an NgModule. State lives in signals, which are functions you call (name()) to read and update with .set() / .update(). The standalone flag is the default now, so you no longer write it explicitly.

// app.component.ts  (Angular v20+ generates this as app.ts with class App)
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  // standalone is the default in modern Angular — no NgModule needed
  template: `
    <h1>Hello, {{ name() }}!</h1>
    <button (click)="setName('Angular')">Change name</button>
  `,
})
export class AppComponent {
  // a signal holds reactive state; read it by calling name()
  protected readonly name = signal('World');

  setName(value: string): void {
    this.name.set(value);
  }
}

How is the app bootstrapped now?

Instead of an AppModule, you bootstrap the standalone root component directly and pass app-wide providers through a small config object. This is where provideRouter and provideHttpClient replace the old RouterModule.forRoot() and HttpModule imports.

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

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

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
  ],
};

How does the new control flow work?

Angular's built-in control flow is part of the template syntax itself — no directive imports required. It replaces *ngIf, *ngFor, and [ngSwitch], and it is faster and easier to read. Note that @for requires a track expression for efficient list updates.

<!-- built-in control flow replaces *ngIf / *ngFor / ngSwitch -->
@if (user(); as u) {
  <p>Welcome back, {{ u.name }}</p>
} @else {
  <p>Please sign in.</p>
}

@for (task of tasks(); track task.id) {
  <li>{{ task.title }}</li>
} @empty {
  <li>No tasks yet.</li>
}

@switch (status()) {
  @case ('loading') { <app-spinner /> }
  @case ('error') { <p>Something went wrong.</p> }
  @default { <p>Ready.</p> }
}

Where should you go next?

Once your first component renders, the next building blocks are forms, routing, and authentication:

• Capture and validate user input with reactive and template-driven forms in Angular — the form APIs are now strongly typed.
• Protect routes and gate features with Angular route guards for auth and permissions.
• If you would rather have an experienced team ship the application, MicroPyramid offers Angular development services covering greenfield builds, AngularJS-to-Angular migrations, and modernization.

Frequently Asked Questions

Is Angular 2 the same as the Angular used today?

No. "Angular 2" refers specifically to the 2016 release. Since then the framework dropped the version number from its name and ships a new major version about every six months. As of 2026 it is on v17-v20+, with standalone components, signals, and built-in control flow that did not exist in Angular 2.

Do I still need NgModules in modern Angular?

Rarely. Standalone components are the default, and the CLI generates a standalone app with bootstrapApplication() and no root AppModule. NgModules still work for backward compatibility, but new code should be standalone. You can run ng generate @angular/core:standalone to migrate an older NgModule-based app.

What Node.js version do I need for the Angular CLI?

Use an active LTS release — generally Node.js 18.19+ or 20+ for recent Angular versions. Each Angular major lists its exact supported Node range, so check the version compatibility guide if you are on an older runtime. The CLI will warn you if your Node version is unsupported.

Should I use signals or RxJS for state?

Use signals for local component state and synchronous derived values — they are simpler and integrate with change detection automatically. Keep RxJS for event streams and async work like HTTP and websockets. The two interoperate, and Angular provides helpers to convert between them, so it is not an either/or choice.

How do I migrate *ngIf and *ngFor to the new control flow?

Angular ships an automated schematic. Run ng generate @angular/core:control-flow in your project and it rewrites *ngIf, *ngFor, and [ngSwitch] usages to @if, @for, and @switch across your templates. Review the diff afterward, since @for requires a track expression.

Is Angular or React a better choice in 2026?

Both are strong. Angular is a batteries-included framework — routing, forms, HTTP, and SSR are official and consistent — which suits larger teams and long-lived enterprise apps. React is a leaner library you assemble with third-party packages. Pick Angular when you want strong conventions and an integrated toolchain out of the box.