# Ismaestro/angular-example-app: a production-shaped Angular 21 starter you can read end to end > A beginner-friendly Angular 21 application that wires CRUD, JWT authentication, i18n, lazy routes, signals and Playwright tests into one repository. It is a reference to read and copy from, not a library to install. **Ismaestro/angular-example-app** — Angular Example App is a beginner-friendly, production-ready web application built with Angular 21. It serves as a real-world example showcasing core Angular features such as CRUD operations, authentication, i18n, lazy loading, and signals. - Repository: https://github.com/Ismaestro/angular-example-app - Website: https://angular-example-app.ismaestro.com/ - Stars: 2,386 · Forks: 1,266 - Language: TypeScript - License: not declared - Published: 2026-09-28 · Updated: 2026-09-28 · Language: en - Canonical page: https://hysenlabs.com/projects/ismaestro-angular-example-app ## What Angular Example App actually is, and who it is written for Angular Example App is a single web application, not a component library. The README calls it a real-world Angular starter built for learning, productivity and scaling, and the feature table backs that up: Angular 21, zoneless change detection, signals, OnPush, JWT authentication, English and Spanish translations, functional route guards, lazy-loaded routes, Shoelace UI components, NgOptimizedImage, SSG and prerendering, and Playwright end-to-end tests. The target reader is someone who has finished a tutorial and now wants to see how those pieces fit together in one repository, or a developer starting a small internal app who would rather rename an existing structure than assemble one from scratch. The repository is not archived and the last push was on 2026-09-18, so the code is recent. The most recent release listed is v21.1.0 from 2026-04-10, followed by v21.0.0 in 2025-11-21 and v20.0.0 in 2025-10-30, which tells you the project tracks Angular major versions rather than inventing its own release cadence. That is the useful signal here: the version number of the app follows the framework version it demonstrates. ## The architecture: standalone components, signals, guards and a separate API The data flow is conventional for an Angular SPA and that is the point. The app renders standalone components that read and write signal-based state, routes are lazy-loaded behind functional guards, and an authentication layer issues and stores a JWT. The README lists clean architecture as a feature and the repository layout reflects it: src/ holds the application, e2e/ holds the Playwright specs, scripts/ holds helper scripts, and the root carries angular.json, eslint.config.js, knip.json, playwright.config.ts, vitest.config.ts and a set of tsconfig files. That is a lot of configuration surface, and it is deliberate: the project is as much a demonstration of tooling as of framework code. The backend is not in this repository. The README states the app connects to a real backend powered by NestJS, PostgreSQL and Prisma, linked as Ismaestro/nestjs-example-app, and that the app also integrates with the PokeAPI as an example API. So there are two external dependencies to reason about: a companion server you may need to run for the login flow, and a public third-party API for the example data. Neither is optional if you want the app to behave exactly like the live demo. ## Install and first run The README gives a two-command start. Run these from the repository root after cloning it. ```bash npm i npm start ``` npm i installs the dependencies declared in package.json. npm start maps to ng serve --configuration=localhost-en --open, so the dev server starts with the English configuration and opens a browser. The default Angular dev server port is 4200, which is also the BASE_URL used by the smoke test script. ## Running the Spanish build and the quality gates Internationalization is not a footnote in this project. There is a dedicated start script for the Spanish configuration, and a separate script that extracts translation messages into src/locale in XLF format. ```bash npm run start:es npm run extract ``` start:es serves the app with the localhost-es configuration. extract runs ng extract-i18n --format=xlf --output-path=src/locale, which regenerates the translation source file from the templates. If you add user-facing strings, this is the command that surfaces them for translation. ## The verification pipeline is the part worth copying Most example apps stop at a dev server. This one ships an explicit verification story, and the README lists a single aggregate command alongside the individual ones. ```bash npm run verify:all npm run test:coverage npm run test:accessibility ``` verify:all is described in the README as running lint, stylelint, tests, build, e2e and lighthouse in sequence. test:coverage runs the Vitest suite with coverage, and the feature table claims coverage above 95 percent. test:accessibility runs the Playwright accessibility spec in the chromium project. The e2e scripts depend on Playwright browsers being installed first through npm run playwright:install. ## Where this project will not help you The repository root has no LICENSE file. For a project whose README invites you to use it as a base for your next app, that is a real gap: the README does not state the terms under which the code may be reused, and the topics list does not resolve it. Treat the licence as unknown until the maintainer states it, and do not assume a permissive default. The second limitation is the backend split. The authentication flow is JWT-based against the companion NestJS service, so a fresh clone does not give you a fully working login unless that service is running or you stub it. The README documents the backend repository but does not document a mock server or an offline mode for the frontend. If your goal is to study Angular routing and components without touching a database, you will be reading code paths you cannot execute. Third, this is a template, not a dependency. There is no package to install into an existing application, and updates arrive as commits and releases you merge by hand. The repository is a starting point you fork and then own. ## How it compares to Angular's own tutorial and to component libraries The obvious alternative is the official Angular tutorial, which builds a small application step by step and explains each concept as it introduces it. The difference in approach is scope and realism: the tutorial produces one app with a narrow feature set, while this repository presents a finished codebase with authentication, i18n, SSG, visual regression specs and a lint and formatting stack already configured. The tutorial teaches you why a piece exists; this project shows you what a repository looks like once many pieces coexist. If you want guided explanation, the tutorial is the better first stop. If you want to read a working structure and adapt it, this is the more useful artifact. It is not comparable to a UI component library such as Angular Material or the Shoelace components it already uses. Those supply widgets. This repository supplies an application skeleton that consumes widgets. Choosing between them is not a trade-off; a real project usually needs both. ## Maintenance and upgrade cost The version history is the clearest maintenance signal available. v20.0.0 landed on 2025-10-30, v21.0.0 on 2025-11-21, and v21.1.0 on 2026-04-10, with the last push to the repository on 2026-09-18. The project moves with Angular majors, and the README's roadmap shows incremental hydration with Angular 21 marked complete. That means upgrades are likely to arrive as framework-major migrations, which for a fork means reading the changelog and reapplying your own changes on top. The cost of adopting it is front-loaded: you inherit an opinionated toolchain (ESLint, Prettier, Stylelint, Husky, commitlint, Knip, Vitest, Playwright, Lighthouse thresholds) and every one of those is a thing your team must keep working. The benefit is that the wiring is already done and visible. The licence question remains the item to resolve before any of this matters commercially. ## Conclusion Adopt it if you learn by reading a complete Angular 21 codebase or want a starting skeleton for a small app with authentication, i18n and prerendering already wired. Do not adopt it if you need a supported dependency with an upgrade contract: there is no LICENSE file in the repository root, so the terms you inherit are unclear, and the app talks to a separate NestJS, PostgreSQL and Prisma backend you would have to run or replace. Verify two things before you commit: whether the PokeAPI and the companion backend are acceptable dependencies for your project, and whether the Angular 21 features it relies on (zoneless change detection, signals, incremental hydration) match the Angular version your team supports. ## FAQ ### How do I install and run Ismaestro/angular-example-app? Clone the repository and run npm i followed by npm start from the project root. The start script runs ng serve with the localhost-en configuration and opens a browser, and the smoke test script expects the app at http://localhost:4200. ### Is Ismaestro/angular-example-app a library I can add to an existing Angular project? No. It is a complete application repository, not a published package, so you fork or clone it and adapt the code. Updates arrive as commits and releases you merge yourself rather than as a version bump in package.json. ### Does Ismaestro/angular-example-app work without a backend? The README states the app connects to a real backend powered by NestJS, PostgreSQL and Prisma, hosted in a separate repository, and the authentication flow is JWT-based against it. The README does not document a mock server, so a fresh clone does not give you a fully working login on its own. ### What Angular version does Ismaestro/angular-example-app use? The README lists Angular 21 with zoneless change detection, signals and OnPush, and package.json carries version 21.1.0. Releases v21.1.0, v21.0.0 and v20.0.0 show the project tracks Angular major versions. ### How do I run the tests in Ismaestro/angular-example-app? Unit tests run with npm run test or npm run test:coverage, which use Vitest. End-to-end, visual and accessibility tests use Playwright and require npm run playwright:install first, and the README lists npm run verify:all as the aggregate command covering lint, stylelint, tests, build, e2e and lighthouse. ### What licence does Ismaestro/angular-example-app use? The repository root does not contain a LICENSE file and the README does not state the terms, so the licence is unknown from the available material. Confirm the terms with the maintainer before reusing the code. ## Sources - [Ismaestro/angular-example-app on GitHub](https://github.com/Ismaestro/angular-example-app) - [Issues](https://github.com/Ismaestro/angular-example-app/issues) - [Project website](https://angular-example-app.ismaestro.com/) - [README](https://github.com/Ismaestro/angular-example-app/blob/master/README.md) - [Releases](https://github.com/Ismaestro/angular-example-app/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/ismaestro-angular-example-app