Skip to content
← Field notes
Angular Standalone TypeScript

Getting Started with Angular 18

A pragmatic guide to setting up your first Angular 18 project with standalone components, signals, the new control flow, and modern tooling.


title: Getting Started with Angular 18 slug: getting-started-angular-18 summary: A comprehensive guide to setting up your first Angular 18 project with standalone components, signals, and modern tooling. date: 2024-03-15 author: Alex Rivera category: angular tags: [angular, standalone, typescript] status: published featured: true#

Getting Started with Angular 18#

Angular 18 brings significant improvements to the developer experience with standalone components as the default, enhanced signal support, and a faster build pipeline powered by esbuild.

Prerequisites#

Before getting started, ensure you have:

  • Node.js 20+ installed
  • npm 10+ or equivalent
  • Basic knowledge of TypeScript

Creating Your First Project#

npx @angular/cli@18 new my-app \
  --standalone \
  --style=css \
  --routing \
  --no-ssr

This scaffolds a project with:

  • Standalone components (no NgModules)
  • CSS styling
  • Router pre-configured
  • No Server-Side Rendering

Standalone Components#

In Angular 18, every component is standalone by default:

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  standalone: true,
  template: `<h1>Hello, Angular 18!</h1>`,
})
export class HelloComponent {}

Configuring the Application#

The app.config.ts file replaces AppModule:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

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

What's Next?#

Explore Angular Signals to build reactive UIs without RxJS boilerplate.

Next field note

Multi-tenant CRM in NestJS: ZenStack, WhatsApp, and RTL at scale