Setting Up an Angular 5 site on Github Pages

Getting Started

This article will go over all the steps to setup an Angular site on GitHub pages.  The site will use Angular's AOT compiling and be served from the docs folder of the repository.

To start with you can follow the guide here to setup a new Angular project. Then you will need to setup a repository on Github.com.  The name of the repository doesn't matter, this site will use the docs folder, not the specially named repository with USERNAME.github.io as the name.

Listening For JS Error Events

I was recently reading a blog article, Ben Nadel JS Error.   In the article Ben showed how to setup an error event handler that would be triggered for any failed image loads on a page.  This was done by attaching an error event handler to the body element.  Also he had to pass the last argument to addEventListener as true so that it would trigger in the capture phase of the event. This event handler will run whenever an external resource like an image or a style sheet fails to load on the page.

After some experimenting I found that if I attach the event to the window object it is triggered for all the failed resources and also for any javascript errors that happen on the page.  Setting this up on a site with quite a bit of traffic from different browsers was very interesting.  It was a bit overwhelming at first until some things were fixed and some checking was added to filter out some of the errors.  In the event handler the event and error information is being posted back to a server and then sent in an email so it can be reviewed.