Identify and Fix Build and Deployment Errors in Your Angular App
In this guide, you will learn how to spot some of the most common build and deployment errors and how to resolve them as soon as they occur.
Sep 14, 2020 • 7 Minute Read
Introduction
Angular is a powerful framework that allows you to both build and deploy your apps very easily. Inevitably, you will run into build and deployment errors while using both the ng build and ng deploy commands from the Angular CLI. Because of this, it's very helpful for you to become acquainted with some of the most common errors so that you don't get stuck.
In this guide, you will learn how to spot some of the most common build and deployment errors and how to resolve them as soon as they occur.
Let's dive in!
Common Build Errors
Many common build errors may occur as a result of rebuilding your app while using ng serve or running ng build or ng build --prod directly.
Module Not Found
One of the most common Angular errors is the infamous "Module not found" error. This error is seen a lot because it can occur due to a variety of factors. This error occurs most commonly within your development environment (while running ng serve) when you have created a new module on the filesystem but the Angular development environment has not picked up the new module file yet. Usually, this can easily be fixed by stopping the ng serve process and re-running it because this allows the Webpack development server running behind the scenes to capture the new file within memory.
Property Does Not Exist
Another very common Angular error is linked directly to the TypeScript type system. Fortunately, this error message is extremely straightforward: Property '<property>' does not exist on type '<Type>'. This message is informing you that you are trying to access a property on either a type that you have created or a built-in type.
For example, let's say you have created the following type interface:
interface Person {
name: string;
age: number;
}
If you now attempt to access the non-existent property favoriteAnimal on an instance of a Person, your build will fail with the following error: Property 'favoriteAnimal' does not exist on type Person. This error can be easily resolved by adding this new field to your interface or by changing the type of the value that you are attempting to access in your code.
Unable To Resolve Parameters
This error is less common than the previous two but is fairly common nonetheless. This error is tricky and occurs when Angular is unable to inject all of the services that you are trying to inject into your module or component. For example, let's say you have a component, DogComponent, that looks like this:
export class DogComponent {
constructor(private dogService: DogService, private breedService: BreedService) {
}
}
This component is telling the Angular dependency injection mechanism to inject an instance of both the DogService and BreedService services. If this code gives you the error Can't resolve all parameters for DogComponent... then you know that Angular cannot find either DogService or BreedService.
In order to fix this error, you must look at the services you are trying to inject and ensure that you have created them properly such that Angular's dependency injection mechanism can find them.
Here are some of the most common ways to spot and fix this error:
- Your service is missing the @Injectable() decorator and you just need to add this decorator.
- Your service is specifying Injectable() instead of @Injectable()
- Your service is specifying @Injectable instead of @Injectable()
- Your service is an interface instead of a class. Interfaces cannot be instantiated.
You need to ensure your service is declared like this in order for Angular to properly find it:
import { Injectable } from '@angular/core';
@Injectable()
export class BreedService {
}
Common Deployment Errors
So we've covered some of the most common build errors. In this section, you will learn about errors that may occur on the deployment spectrum. All of these errors occur as a result of running some form of ng deploy via the Angular CLI. There are a lot of specific errors that can occur within this command because Angular supports deploying apps to a great variety of platforms.
Let's get started!
Project Not Found
One of the most common errors that you may come across while running ng deploy is the Project not found... error. This error occurs when the Angular CLI cannot find a project to execute against. Fortunately, this error is often very easy to resolve. Fixing this error is a two-step process:
- Ensure that you have installed the Angular CLI globally on your machine via npm install -g @angular/cli
- Ensure that you are located in the root directory of your Angular app itself. Often this means that you need to go up or down a directory depending upon the setup of your project.
Once you have verified that you have installed the Angular CLI globally on your machine and that you are in the proper directory, this error will be resolved as Angular can then find your project.
Firebase Target Error
Because Angular supports a great variety of deployment platforms, diving into all of them is beyond the scope of this guide. Instead, we will focus on an error from just one of the deployment platforms—Firebase. Most errors across specific deployment platforms are almost always some time of configuration error. Because of this, you can potentially extrapolate what you learn about this error to other deployment platforms.
You may see an error from Firebase that looks like this: Cannot understand what targets to deploy.... This error indicates that something went wrong with the firebase init sub-command that gets executed after running ng deploy. You can confirm this is the problem by looking at your firebase.json file. This file configures your firebase deployment and is automatically generated via the firebase init command. In order to fix this error, you must verify that your firebase.json file looks appropriate. If the file contains an empty object, you can manually create it and rerun ng deploy. Here is an example of a working firebase.json:
{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Conclusion
In this guide, you learned about three of the most common build errors that occur when building an Angular app. First, you learned how to resolve "Module Not Found" errors that can easily occur in your development environment after creating a new module. Next, you learned how to resolve and spot one of the most common TypeScript errors—"Property does not exist on type "—as well as how to resolve the more tricky "Can't resolve all parameters for " error that can occur within Angular's dependency injection mechanism.
On top of this, you also learned how to easily fix some of the more common errors when deploying your Angular app using the Angular CLI. Specifically, you discovered how to fix the "project definition could not be found" errors as well as an error that can occur when deploying via Firebase.
I hope that this guide makes you more confident when it comes to resolving errors that you may find while building and deploying your Angular app.