Getting Started with Angular
Prerequisites
Install Angular CLI
# Install Angular CLI globally
npm install -g @angular/cli
# Verify installation
ng version
# Create a new project (standalone by default in Angular 21)
ng new my-app
# Navigate into the project
cd my-app
# Start the dev server
ng serve --open
Angular 21 Project Structure
my-app/
├── src/
│ ├── app/
│ │ ├── app.component.ts # Root standalone component
│ │ ├── app.component.html
│ │ ├── app.component.css
│ │ └── app.config.ts # App-level providers (replaces AppModule)
│ ├── main.ts # Bootstrap entry point
│ └── index.html
├── angular.json # CLI workspace config
├── tsconfig.json # TypeScript config
└── package.json
The Root Component (Angular 21)
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
template: `
<h1>Hello, {{ name() }}!</h1>
<button (click)="changeName()">Change Name</button>
`,
styles: [`h1 { color: #dd0031; }`]
})
export class AppComponent {
name = signal('Angular');
changeName() {
this.name.set('World');
}
}
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
// provideHttpClient() - auto-provided in Angular 21
]
};
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));
Essential CLI Commands
| Command | Description |
|---|---|
ng new app-name | Create a new Angular project |
ng serve | Start dev server (localhost:4200) |
ng build | Build for production (output to dist/) |
ng generate component name | Generate a new standalone component |
ng generate service name | Generate a new service |
ng generate pipe name | Generate a new pipe |
ng test | Run unit tests (Vitest in Angular 21) |
ng lint | Run linting |
ng update | Update Angular and dependencies |
ng version | Show Angular CLI version |
Related Angular Topics