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.
