angular-movies

May 25, 2026 · View on GitHub

This is a Movies App built using Angular and RxAngular.
As data source the The Movie Database (TMDB) API is used.

Demo

A live deployment of this app is available to try it out.

For now you can search the codebase for "Perf Tip" later on there will be propper documentation here.

Names	Size
chunk-H73X5IJZ.js	176.04 KB
chunk-J5RJBBBA.js	100.02 KB
main-HAHZT3VR.js	30.06 KB
chunk-26THTVGX.js	23.59 KB
chunk-MFJP3XQD.js	13.34 KB
chunk-DD4274WW.js	11.51 KB
chunk-UJXKG7ZY.js	5.98 KB
styles-6J6M4RLR.css	5.69 KB
chunk-F6TX2SNN.js	3.56 KB
chunk-XEGPBJW5.js	3.44 KB
chunk-BWRSEVT6.js	2.31 KB
chunk-ENKFPH2E.js	1.53 KB
chunk-3BVTSY3H.js	1.31 KB
chunk-TERIXCX3.js	1.11 KB
chunk-IPYUPOU3.js	1.1 KB
chunk-IS6BG5PM.js	981 Bytes
chunk-HMA6A7BH.js	675 Bytes
chunk-7CGTOI24.js	618 Bytes
chunk-SRLHFTA6.js	559 Bytes
chunk-4EXWTXAN.js	380 Bytes
chunk-PNQWYDWA.js	310 Bytes
chunk-YPVBW5JE.js	197 Bytes
chunk-6SM3TQVG.js	153 Bytes
chunk-E2EYHV3P.js	136 Bytes
chunk-QBRSGN6K.js	125 Bytes
chunk-K3RHTP23.js	96 Bytes
chunk-LFUTSNCE.js	37 Bytes
Initial Total	384.85 KB
Names	Size
movie-detail-page.component	16.08 KB
person-detail-page.component	12.17 KB
list-items-edit.component	7.24 KB
list-create-page.component	6.34 KB
movie-list-page.component	6.22 KB
account-menu.component	5.11 KB
account-list-page.component	3.43 KB
list-detail-page.component	3.22 KB
list-remove.component	3.14 KB
list-image.component	3.08 KB
not-found-page.component	1.72 KB
list-movies.component	1.08 KB
list-detail-page.routes	610 Bytes
account-feature-page.routes	550 Bytes
movie-list.component	460 Bytes

Contributions are always welcome!

For large changes, please file an issue to discuss your proposed changes with us before working on a PR :)

Clone and install the dependencies for angular-movies locally:

  git clone https://github.com/tastejs/angular-movies.git
  cd angular-movies
  npm install

Use the Node version from .nvmrc (enforced via engine-strict in .npmrc):
```
nvm install
nvm use
npm ci
```
npm start and npm run e2e select the .nvmrc Node version automatically via scripts/with-node.sh (installs via nvm locally; uses setup-node in CI).
Copy projects/movies/src/environments/environment.local.example.ts to projects/movies/src/environments/environment.ts (or environment.production.ts for prod builds).
Add your TMDb API key and read access token.
If port 4200 is stuck, stop the old process: lsof -ti:4200 | xargs kill -9

Per Angular serve docs, the dev server uses @angular/build:dev-server (Vite). When ready it prints Local: http://localhost:4200/.

nx run movies:build:development: development build
nx run movies:build:production: production build (output: dist/projects/movies)
npm start / nx run movies:serve:development: dev server on port 4200
nx run movies:serve-static:production: serve the production build locally
npm run e2e / nx e2e movies: Playwright E2E (Chromium; starts dev server automatically). Multi-browser: PLAYWRIGHT_ALL_BROWSERS=1 npm run e2e
nx run movies:user-flow:development: legacy Lighthouse user-flow (local only, not in CI)

Playwright specs (legacy .uf.ts files kept under projects/movies/user-flows/):

Legacy user-flow	Playwright spec
`ci-flow.uf.ts`	`e2e/sidebar-movie-detail.spec.ts`
`navigation.uf.ts`	`e2e/routes.spec.ts`
`account-feature.uf.ts`	`e2e/tmdb-auth.spec.ts` (skipped in CI; needs TMDB)
`fixxxx-ci-flow.uf.ts`	not migrated (obsolete prerender check)

Run auth E2E locally: nx e2e movies --grep @auth

nx run docs:build: regenerate README bundle stats (output: dist/measures/movies)

Built with:

Measures:

Based on the original angular-movies foundation by @clamarque.