Getting Started with Angular
Prerequisites
Node.js 20.19+ — nodejs.org
Basic knowledge of HTML, CSS, and JavaScript/TypeScript
A code editor — VS Code is recommended
Install Angular CLI
Install & Create Project Copy
Terminal
# 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
Project Structure Copy
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)
Root Component & Bootstrap Copy
app.component.ts
app.config.ts
main.ts
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-nameCreate a new Angular project
ng serveStart dev server (localhost:4200)
ng buildBuild for production (output to dist/)
ng generate component nameGenerate a new standalone component
ng generate service nameGenerate a new service
ng generate pipe nameGenerate a new pipe
ng testRun unit tests (Vitest in Angular 21)
ng lintRun linting
ng updateUpdate Angular and dependencies
ng versionShow Angular CLI version