/angular-movies

A Angular Movies App Optimized for Performance

Primary LanguageTypeScriptMIT LicenseMIT

angular-movies

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

angular-and-rx-angular

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

Performance Optimizations

angular-movies--after-before

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

Measures before optimization angular-movies-before_michael-hladky

Measures after optimization angular-movies-after-optimization_michael-hladky

Bundle Stats

Names Size
main.js 2.5 MB
runtime.js 12 KB
styles.css 8.54 KB
Initial Total 2.52 MB
Names Size
app_pages_movie-detail-page_movie-detail-page_component_ts.js 58.67 KB
app_pages_person-detail-page_person-detail-page_component_ts.js 45.81 KB
common.js 37.43 KB
a-4d8953.js 36.55 KB
default-node_modules_rx-angular_template_fesm2022_template-if_mjs.js 28.2 KB
app_pages_account-feature_list-detail-page_list-items-edit_list-items-edi-13eb42.js 26.27 KB
app_pages_movie-list-page_movie-list-page_component_ts.js 24.04 KB
app_pages_account-feature_list-create-page_list-create-page_component_ts--1f481e.js 21.58 KB
app_pages_account-feature_account-list-page_account-list-page_component_ts.js 20.36 KB
app_app-shell_account-menu_account-menu_component_ts.js 20.2 KB
app_pages_account-feature_list-detail-page_list-image_list-image_componen-cb4b89.js 16.83 KB
app_pages_account-feature_list-detail-page_list-detail-page_component_ts--a2c81d.js 14.71 KB
app_pages_account-feature_list-detail-page_list-remove_list-remove_compon-a10eb2.js 11.1 KB
app_pages_not-found-page_not-found-page_component_ts.js 6.95 KB
app_pages_account-feature_list-detail-page_list-detail-page_routes_ts.js 3.4 KB
app_pages_account-feature_account-feature-page_routes_ts.js 2.65 KB
app_pages_account-feature_list-detail-page_list-movies_list-movies_component_ts.js 2.55 KB

Comparison to next and nuxt

angular-vs-next-vs-nuxt

Contributing

Contributions are always welcome!

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

Installation

Clone and install the dependencies for angular-movies locally:

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

Quick setup

  1. Take a copy of src/environments/environment.local.example.ts and re-name to src/environments/environment.production.ts
  2. Get your TMDb API key
  3. Get your TMDB API read access token
  4. Enter the details into the src/environments/environment.production.ts file

Running locally

  • npm run build:dev: dev build
  • npm run build:prod: production build
  • npm run build:prod:ssr: production build for SSR
  • npm run start: serve the project locally for development
  • npm run start:ssr:dev: serve the project locally SSR for development
  • npm run start:ssr:prod: serve the project locally SSR for production
  • npm run analyze:bundlesize: bundle size analysis

Tech Stack

Built with:

angular-and-rx-angular

Measures:

Authors

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

License

MIT