Prepare Angular App for Production Release

If you don't ship it, it never happened. In the previous chapter, you created a local weather application that can retrieve current weather data. You have created some amount of value; however, if you don't put your app on the web, you end up creating zero value. Delivering something is difficult, delivering something to production is even more difficult. You want to follow a strategy that results in a reliable, high quality, and flexible release.

The app we created in Chapter 2, Create a Local Weather Web Application, is fragile, has failing unit and end-to-end (e2e) tests, and emits console errors. We need to fix the unit tests and harden the application by intentionally introducing errors so that you can see the side-effects of real-life conditions in action using debugging tools. We also need to be able to deliver the frontend...

Angular unit tests

Just because your Angular app launches using npm start and seems to work fine, it doesn't mean it is error free or production ready. As covered earlier in Chapter 2, Create a Local Weather Web Application, Angular CLI creates a unit test file as you create new components and services, such as current-weather.component.spec.ts and weather.service.spec.ts.

At their most basic, these unit default unit tests ensure that your new components and services can be properly instantiated in the test harness. Take a look at the following spec file and observe the should create test. The framework asserts that component of the CurrentWeatherComponent type to not be null or undefined, but be truthy:

src/app/current-weather/current-weather.component.spec.ts
describe('CurrentWeatherComponent', () => {
  let component: CurrentWeatherComponent
  let fixture: ComponentFixture...

Angular e2e tests

In addition to unit tests, Angular CLI also generates and configures e2e tests for your application. While unit tests focus on isolating the class-under-test, e2e tests are about integration testing. Angular CLI leverages Protractor along with WebDriver, so you can write automated acceptance tests (AAT) from the perspective of a user interacting with your application on a browser. As a rule of thumb, you should always write an order of magnitude more unit tests than AATs, because your app changes frequently and as a result, AATs are vastly more fragile and expensive to maintain compared to unit tests.

If the term web driver sounds familiar, it's because it is an evolution of the canonical Selenium WebDriver. As of March 30th, 2017, WebDriver has been proposed as an official web standard at the W3C. You read more about it at https://www.w3.org/TR/webdriver...

Troubleshooting common Angular errors

Our unit tests and e2e tests are now working. In this section, you intentionally introduce an easy-to-make mistake so that you can become familiar with real-life errors that can be happen while developing your applications and gain a solid understanding of the tooling that makes make you an effective developer.

Let's pretend that we made an innocent mistake when copying and pasting the URL from the API documentation page on OpenWeatherMap.org and forgot to add http:// in front of it. This is an easy mistake to make:

src/app/weather/weather.service.ts
...
return this.httpClient
  .get<ICurrentWeatherData>(
    `api.openweathermap.org/data/2.5/weather?q=${city},${country}&appid=${environment.appId}`
  ).pipe(map(data => this.transformToICurrentWeather(data)))
...

Your app will compile successfully, but when you inspect the results...

Null guarding in Angular

In JavaScript, the undefined and null values are a persistent issue that must be proactively dealt with every step of the way. There are multiple ways to guard against null values in Angular:

1. Property Initialization
2. Safe Navigation Operator ?.
3. Null Guarding with *ngIf

Property initialization

In statically-typed languages such as Java, it is drilled into you that proper variable initialization/instantiation is the key to error free operation. So let's try that in CurrentWeatherComponent by initializing current with default values:

src/app/current-weather/current-weather.component.ts
constructor(private weatherService: WeatherService) {
  this.current = {
    city: '',
    country: &apos...

Containerizing the app using Docker

Docker docker.io is an open platform for developing, shipping, and running applications. Docker combines a lightweight container virtualization platform with workflows and tooling that help manage and deploy applications. The most obvious difference between Virtual Machines (VMs) and Docker containers are that VMs usually are dozens of gigabytes in size and require gigabytes of memory, whereas containers are megabytes in disk and memory size requirements. Furthermore, the Docker platform abstracts away host operating system (OS) level configuration settings, so every piece of configuration that is needed to successfully run an application is encoded within the human-readable Dockerfile format, as demonstrated here:

Dockerfile
FROM duluca/minimal-node-web-server:8.11.1
WORKDIR /usr/src/app
COPY dist public

The preceding file describes a new container...

Deploying containerized app

If delivering something to production is difficult from a coding perspective, it is extremely difficult to do it right from an infrastructure perspective. In the later chapters, I will cover how to provision a world-class AWS Elastic Container Service (ECS) infrastructure for your applications, but that won't help if you need to quickly demonstrate an idea. Enter, Zeit Now.

Zeit Now

Zeit Now, https://zeit.co/now, is a multi-cloud service that enables real-time global deployments of applications directly from the CLI. Now works with applications that either correctly implement package.json or a Dockerfile. Even though we have done both, we will prefer to deploy our Docker image, because a lot...

Summary

In this chapter, you mastered unit and e2e test configuration and setup. You optimized your troubleshooting tools and became aware of the common Angular errors you will encounter while developing applications. You learned how to best avoid Angular console errors by guarding against null data. You configured your system to work with Docker and successfully containerized your web application with its own dedicated web server. You configured your project with npm scripts for Docker that can be leveraged by any team member. Finally, you have successfully delivered a web application in the cloud.

Now you know what takes to build a production-ready Angular application that is reliable, resilient, and containerized to allow for a flexible deployment strategy. In the next chapter, we will improve the apps feature set and make it look great using Angular Material.

...