:boom: Progressive Hacker News client built with Angular

2 years after

Angular 2 HN

A progressive Hacker News client built with Angular

View App

PRs Welcome Build Status

:zap: Fast: Service Worker App Shell + Dynamic Content model to achieve faster load times with and without a network.

:iphone: Responsive: Completely responsive UI that can be installed to your mobile home screen to provide a native feel.

:rocket: Progressive: Lighthouse score of 100/100.

Mobile Preview

Laptop Preview

Offline Support

This app uses a Service Worker to load quickly and work offline.

  • sw-precache is used to serve local static resources (App Shell) cache first.
  • sw-toolbox is used to handle requests using the networkFirst strategy. If a request fails, the app will fulfill the request from the cache. This means previously loaded pages will now work offline.


With Chromium based browsers for Android (Chrome, Opera, etc...), Angular 2 HN includes a Web App Manifest that allows you to install to your homescreen.


Built in theme engine!

Current themes:

  • Default
  • Night
  • Black (AMOLED)

More to come!

Possible areas of improvement

  • Realtime updating
  • Server side rendering (Angular Universal?)

Feel free to send me feedback on twitter or file an issue! Feature requests are always welcome.

Build process

  • Clone or download the repo
  • If you don't have Angular CLI installed: npm install -g [email protected]
  • ng init
  • Input n for each file to not overwrite any file changes
  • ng serve will kick off the server at http://localhost:4200/. Any changes you do to the source files should automatically reload the app
  • ng serve --prod --aot will kick off a production build with uglifying, tree-shaking and Ahead-of-Time compilation

Click here to see a full list of what you can do with Angular CLI.

Note: Any Service Worker changes will not be reflected when you run the application locally in development. To test service worker changes:

  • ng build --prod --aot to kick off a fresh build and update the dist/ directory
  • npm run precache to generate the service worker file
  • npm run static-serve to load the application along with the service worker asset using live-server


A million thanks to some awesome people :)

Related Repositories



A list of helpful material to develop using Angular ...



HackerNews made with AngularJS 2.0. ...



PinWork(Pinterest for bloggers) built with ❤️ using Angular2 (uses ngrx/store/ef ...



A curated list of helpful material to get started with education on Angular 2 ...



A curated list of helpful material to get started with education on Angular 2 ...