Once the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload whenever you modify any of the source files.

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

ng generate component component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

ng generate --help

Building

To build the project run:

ng build

This will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.

Running unit tests

To execute unit tests with the Vitest test runner, use the following command:

bun run test -- --watch=false

Component design

Build components around a cohesive, user-visible responsibility: a page section, a reusable control, or an independently testable interaction. Do not split a component merely to reduce its line count.

Keep App responsible for application-level orchestration, authentication, and cross-feature state.
Prefer presentational components: accept data through inputs and report user intent through outputs. A component may inject a service only when it owns a self-contained feature and its data lifecycle.
Keep transient interaction state with the component that owns it. For example, a form owns its field values and validation, then emits a validated draft.
Give non-trivial components their own directory and co-locate the TypeScript class, template, component-specific styles, and tests. Shared primitives may stay as single files.
Add focused unit tests for components with behavior: input transformation, conditional UI, validation, or emitted actions. Do not add tests solely for static wrapper markup.

Component-specific styles belong beside the component and use Angular's default view encapsulation. Keep src/styles.scss for design tokens, reset rules, and reusable visual primitives.

Running end-to-end tests

For end-to-end (e2e) testing, run:

bunx playwright install chromium
bun run e2e

The Playwright suite starts the Angular development server automatically and runs against the 360 px mobile, 768 px tablet, and 1280 px desktop projects defined in playwright.config.ts.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.