Step 4: log in and reset password

In this PR, we are adding multiple pages in app-routing.module.ts: Let’s go page by page. Log In page We render a form with two inputs in log-in-page.component.html: The logic is found in log-in-page.component.ts: We are using Reactive Forms approach here, note how formGroup is constructured using, where we assign validators to each of our […]

Bonus step 3.5: routing animations

Let’s have a little fun with animations: We are going to add an animation on every route change. To do that, we attach an animation to the router-outlet wrapper in app.component.html: We are introducing a new observable in MiscService called page$ – it will emit every time the page changes. This is what it […]

Step 3: i18n, multi-lingual support

Fun fact: i18n stands for internationalization and can you guess what 18 means? Hint: it’s the same meaning as 11 has in a11y. We are going to support English, because everybody speaks it, and Russian, because I speak it. Let’s dive in: (deployed to We’ll need to render pages in correct language in […]

Step 2: SSR, Server-Side Rendering

Our second PR adds SSR: (deployed to SSR is pretty much obligatory for any SPA (single page application) – without the Server-Side Rendering, the search engines don’t see your app content, only an empty shell. If you checkout the first branch 01-initial-setup, run npm start and then open page source in your browser, […]

Step 1: Initial Setup

We begin here, with our first PR: To follow along, run these commands one by one: Then open http://localhost:4200/ in your browser, you should see this: The app doesn’t do much at this point, but there are quite a few things we bootstrap here. First of all, it’s an Nx monorepo already, with a […]

Show me how you move

This blog is going to be very opinionated. I’ve been writing software professionally for almost 30 years now, and before that I was competing on a global level as a school kid (representing Ukraine in a World Olympiad in Informatics back in 1993), so I have a lot of wisdom to share (and not too […]