Project structure · Frontend
Angular project structure
Opens with creditsFor developers building a structured single-page app with Angular, the framework many enterprise and services companies use. The example is an orders dashboard with a login: standalone components, signals for state, typed forms, lazy-loaded feature routes, and a small core and shared layer around feature folders, grown from the ng new scaffold to a repository a team can run for years.
Curated by Tauseef FayyazIntermediate209 files and foldersAngular 22.2, TypeScript 6.0, Vitest 5 (default test runner)Checked October 2026How it grows
Each stage opens the explorer there
- 1Day 1What the scaffold and your first hour give you33 files and folders
- 2GrowingWhat a real app with features and tests adds+94 files and folders
- ProductionWhat running it for real users adds+34 files and foldersOpens with credits
- ExpertWhat a team needs to keep it healthy for years+48 files and foldersOpens with credits
How it is organised
- Organise by feature area, as the Angular style guide says: features/orders, not components, services and directives folders.
- core holds app-wide singletons used once (auth session, interceptors, layout shell, error handling); shared holds reusable UI, pipes, directives and validators used by several features. Features never import from each other.
- Standalone components, signals and the inject() function everywhere. No NgModules in new code; zoneless change detection is the default.
- Every feature is lazy loaded from app.routes.ts with its own routes file, so the first download stays small as features grow. Guards and resolvers are plain functions.
- State is a signal store per feature: a @Service class with signal(), computed() and httpResource. Reach for NgRx SignalStore only when many features share complex state.
- One concept per file, named after what it holds (orders-list.ts, orders-api.ts, auth-guard.ts). Tests sit next to the file they test as .spec.ts.
- Everything in the browser bundle is public. Guards improve the experience; the backend enforces access on every request.
At the top of the project
Open one in the explorer for the full story
- my-app/
- .angular/The Angular CLI build cache.
- .git/The Git repository. ng new runs git init and commits the generated files.
- .husky/Git hooks managed by husky, created by npx husky init.2 inside
- .vscode/Shared VS Code settings: recommended extensions, debug and task configs.4 inside
- coverage/Coverage reports from ng test --coverage.
- dist/Build output from ng build. The deployable files are in dist/my-app/browser.
- node_modules/Installed packages. ng new runs the install.
- public/Static files copied as-is into the build: favicon, robots.txt, images.1 inside
- src/All UI code: TypeScript, templates and styles.8 inside
- .editorconfigIndentation and line-ending rules most editors read automatically.
- .gitignoreIgnores dist, node_modules, the .angular cache, coverage and personal editor files.
- .lintstagedrc.jsonWhich commands lint-staged runs on which staged files.
- .mcp.jsonConnects Claude Code to the Angular CLI MCP server. Written when you pick Claude Code in ng new.
- .nvmrcPins the Node.js version for nvm, fnm, CI and Docker.
- .prettierignoreFiles Prettier must not touch: build output, coverage, generated code, snapshots.
- .prettierrcPrettier settings: print width 100, single quotes, the Angular parser for HTML templates.
- AGENTS.mdAngular best-practice rules for AI agents. Written when you pick Cursor or Codex in ng new.
- CLAUDE.mdThe same best-practice rules for Claude Code. Written when you pick Claude Code in ng new.
- docker-compose.ymlRuns the backend API and its database locally, so ng serve has something to call.
- README.mdCLI usage notes from ng new. Rewrite it for your project.
- angular.jsonWorkspace config: build, serve, test, lint and extract-i18n targets, budgets, file replacements.
- commitlint.config.jsEnforces Conventional Commits (feat:, fix:, chore:) through the commit-msg hook.
- eslint.config.jsESLint flat config for TypeScript and templates, added by ng add angular-eslint.
- package-lock.jsonExact versions of every installed package.
- package.jsonDependencies and scripts: start, build, watch, test.
- proxy.conf.jsonForwards /api from ng serve to your local backend.
- tsconfig.app.jsonTypeScript settings for the app build, excluding spec files.
- tsconfig.jsonShared TypeScript and Angular compiler options, with strict checks on.
- tsconfig.spec.jsonTypeScript settings for tests, with Vitest globals.
- vitest-base.config.mtsExtra Vitest options, created by ng generate config vitest: coverage thresholds, reporters.
Learn more on Sefism
Roadmaps, cheat sheets and projects that go with Angular.
- Roadmap· AngularFrontend development roadmapHTML, CSS, JavaScript and a framework
- Roadmap· Full stack with Angular.NET developer roadmapC#, ASP.NET Core, EF Core, production-ready APIs
- Roadmap· PlaywrightQA and test automation roadmapManual testing to automated suites
- Cheat sheetFrontend development cheat sheetHTML, CSS, JavaScript and a framework.
- Cheat sheet.NET developer cheat sheetC#, ASP.NET Core, EF Core, production-ready APIs.
- Cheat sheetQA and test automation cheat sheetManual testing to automated suites.
- FYP idea· IntermediateApproval Workflow Engine with Escalations for Small OfficesAn approval workflow engine for small offices, schools and NGOs that turns purchase requests, leave, reimbursements and document sign-offs into tracked flows with deadlines, escalations and email or WhatsApp-style reminders. A no-code automation final year project with a durable workflow runtime and an audit trail.
- FYP idea· IntermediateJob Shop Work Order Tracker for Small ManufacturersA web app for small manufacturers and job shops (fabrication, furniture, printing, garments) to turn customer orders into work orders, track each operation on the shop floor from a shared tablet, and compare quoted versus actual time and cost. An intermediate final year project in manufacturing software.
- FYP idea· IntermediateQA Test Suite for an Open Source Web AppA software testing final year project for a real, actively maintained open source web app: a risk-based test plan, exploratory sessions, bug reports filed with the maintainers, and an automated UI and API suite with Playwright that runs in GitHub Actions. It proves you can find real bugs and build automation that stays reliable.
See 8 moreShow fewer
- QuestionWhat should I learn to become a web developer, and in what order?Learn the web platform first (HTML, CSS, JavaScript, how HTTP works), then one frontend framework, then a backend with a database, and build a real project at each stage. If you already know WordPress, you are not starting over: your HTML, CSS and PHP experience transfers.
- QuestionHow do I learn to read a large codebase when I can handle small projects but get lost in real ones?Nobody reads a large codebase from top to bottom. You follow one real path through it, such as a single request or button click, from entry point to database and back. Map what you find, ignore everything off that path for now, and repeat with a different path. Understanding builds in layers, and a first small change teaches more than a week of reading.
- QuestionHow do I choose between a software house and a product company for my first job?A good software house teaches breadth, speed and client communication; a good product company teaches ownership, depth and long-term quality. For a first job, the team, the mentoring and the work you will actually do matter more than the label. Compare offers on those, not on the company type.
- QuestionHow do I learn to write clean code as a junior developer?Clean code is a set of habits, not a book you finish. Fix names, function size, flag arguments and error handling one habit at a time, let a formatter and linter settle style, learn to refactor in small steps behind tests, and keep a list of the review comments you get twice: that list is your personal curriculum.
- Resource· GuideAngular DocumentationAngular's official documentation at angular.dev, with interactive in browser tutorials and guides to standalone components, signals, templates, dependency injection, routing, forms, server side rendering and testing. It replaced the older angular.io and reflects modern Angular (v22 in September 2026), so prefer it over older courses built around NgModules and Zone.js. Angular expects TypeScript from the start and has a steeper learning curve than lighter frameworks.
- Resource· GuideThe TypeScript HandbookThe TypeScript Handbook is the official, free guide to TypeScript's type system from the TypeScript team, written for working programmers and kept current with each release. It covers everyday types, narrowing, functions, object types, generics, type manipulation, classes and modules, and it is designed to be read in a few hours. It suits JavaScript developers adopting TypeScript and anyone who writes types by copying patterns without understanding them.
- Resource· GuideVitest DocumentationThe official documentation for Vitest, the test runner built on Vite. Its getting started guide has you writing and running a real test in minutes, then covers matchers, async tests, setup and teardown, mocking (functions, modules, timers, dates, requests), snapshots, coverage, the UI dashboard and browser mode for component tests. It uses a Jest-compatible API, so it suits JavaScript and TypeScript developers starting to test, and teams moving from Jest.
- Resource· GuidePlaywright DocumentationThe official documentation for Playwright, Microsoft's open-source framework for end-to-end testing in real Chromium, Firefox and WebKit browsers, with mobile emulation. It walks you from installation to your first test, then covers locators, assertions, fixtures, authentication, API testing, parallel runs and CI. Tools such as the code generator, UI mode and trace viewer make first tests easy. It suits developers and QA engineers adding reliable browser tests to a web app.
Checked against 20 official sources, October 2026. If something has changed, the docs win.Show sourcesHide sources
- Angular: Installation and ng new
- Angular coding style guide
- Angular: Workspace and project file structure
- Angular: Lazy-loaded routes
- Angular: Route guards
- Angular: Interceptors
- Angular: Reactive data fetching with httpResource
- Angular: Typed forms
- Angular: Testing and HTTP testing
- Angular: Configuring application environments
- Angular: Security (CSP and sanitisation)
- Angular: Internationalization
- Angular: Creating libraries
- Angular: AI and LLM configuration
- Angular CLI schematics source (ng new templates)
- angular-eslint
- Sentry for Angular
- Playwright: Visual comparisons
- Playwright: Accessibility testing
- Lighthouse CI
Best practices and checklists for this stack
Picked from the other libraries by shared topics.
Best practices
See all- React Best PracticesModern React best practices for 2026: pure components, lean state, fewer effects, React Compiler, form actions, accessibility and testing.
- Modern CSS Best PracticesModern CSS best practices: cascade layers, low specificity, custom properties, Grid and Flexbox layout, responsive design, container queries, :has() and nesting, plus Tailwind CSS v4 tips.
- TypeScript Best PracticesModern TypeScript best practices for 2026: strict settings, TypeScript 7, modeling data with unions, safe narrowing, runtime validation, generics and typed linting.
Checklists
See all- Web Accessibility ChecklistA practical web accessibility checklist built on WCAG 2.2 level AA, with a severity and a concrete way to verify every check.
- Web Performance ChecklistA practical web performance checklist built on Core Web Vitals: LCP, INP and CLS, with a severity and a concrete way to verify every check.
Work with me
Stuck on something specific?
Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.
- 1:1 Mentorship
- Fresh Graduate Mentorship
- Career Guidance
Brand deals, promos and partnerships: tauseeffayyaz@gmail.com