Angular is a component-based web framework maintained by Google. It combines templates, dependency injection, routing, forms, HTTP tooling, signals, and build support in one platform. This lesson explains the problems Angular solves, the shape of a modern standalone application, and the first decisions a new learner needs to make.
Angular is a component-based web framework maintained by Google. Current Angular applications use standalone components by default and combine templates, signals, dependency injection, routing, forms, HTTP services, testing, and a modern CLI build pipeline.
| Angular area | Current role |
|---|---|
| Standalone components | Default component model for new applications; dependencies are imported directly by the component. |
| Signals | Synchronous reactive state for templates, computed values, inputs, outputs, queries, and shared state. |
| Templates | Declarative binding, built-in control flow, pipes, event handling, and deferred views. |
| Dependency injection | Creates and scopes services, configuration values, platform adapters, and feature dependencies. |
| Router | Maps URLs to component trees with lazy loading, guards, resolvers, redirects, and nested routes. |
| Forms | Supports reactive forms, template-driven forms, and stable signal-based forms. |
| HTTP and resources | Provides HttpClient Observables plus signal-oriented httpResource and resource state. |
| Testing | Uses Vitest by default in new CLI projects with TestBed, HTTP testing, and browser-provider options. |
| Rendering and deployment | Supports client rendering, server rendering, prerendering, hydration, and incremental hydration. |
The Angular CLI initializes, develops, scaffolds, tests, builds, and updates Angular workspaces. Running ng new creates a standalone application by default, while module-based configuration remains available for existing projects.
| Command | Alias | Description |
|---|---|---|
| add | - | It adds support for an external library to our Angular CLI project. |
| build | b | It compiles the configured production build into the workspace output directory. The obsolete --prod shortcut is not required. |
| config | - | It retrieves or sets Angular application configuration values in the angular.json file for the workspace. |
| doc | d | It opens the official Angular documentation (i.e. angular.io) in a browser, and searches for a given keyword. |
| e2e | e | It builds and serves an Angular application, then runs end-to-end tests. |
| generate | g | It will generate and/or modify files based on a schematic. |
| help | - | It will provide a list of available Angular CLI commands and their short descriptions. |
| lint | l | It will run linting tools on our Angular app code in a given project folder. |
| new | n | It creates a workspace and an initial standalone Angular application. |
| run | - | It will run an architect target with an optional custom builder configuration defined in our Angular project. |
| serve | s | It builds and serves our Angular application. It also rebuilds on file changes. |
| test | t | It runs the workspace test target; new CLI projects use Vitest. |
| update | - | It updates our Angular application and its dependencies. |
| version | v | To see Angular CLI version. |
| xi18n | - | It will extract i18n messages from source code. |
npm install -g @angular/cling new my-project
cd my-project
ng serveimport { Component } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
template: `
<!-- The content below is only a placeholder and can be replaced -->
<div style="text-align:center">
<h1>Welcome to {{ title }}!</h1>
</div>
`,
styles: [`
h1 {
color: green;
}
`]
})
export class AppComponent {
title = 'my-first-project';
}import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [AppComponent]
}).compileComponents();
});
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'my-first-project'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('my-first-project');
});
it('should render title in a h1 tag', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('h1')?.textContent).toContain('Welcome to my-first-project!');
});
});The CLI now creates standalone applications by default, so the root component declares its own template dependencies and Angular registers application-wide providers during bootstrap. AppModule is therefore unnecessary for the project structure shown on this page.
The development server prioritizes quick rebuilds, while a production build performs stricter template compilation, optimization, dependency analysis, and bundle-budget checks. A binding error, case-sensitive import path, incompatible package, environment replacement, or browser-only global can therefore surface only during ng build.
The example tests a standalone AppComponent. Standalone components belong in TestBed imports because their Angular metadata and template dependencies travel with the component.
Explore 500+ free tutorials across 20+ languages and frameworks.