Take a brief look at the example application used in this course to demonstrate the testing and debugging options available for your Angular 2 application.
- [Instructor] Testing and debugging your Angular code is a very important part of the application development process. And the faster you can identify the cause of errors, the faster you can fix your application and get it back up and running. Throughout this course, we'll use this application as our sample. It's a simple app that displays a list of available users that are online right now. I've opened the source code here in Visual Studio code. Our list of users is displayed using the user list component and user list template.
When the component is initialized on page load, it requests the user list from our custom user list service inside the ngOnInit method and attaches the response to our user variable in the component. On lines 20, 21, and 22 in this file here. In our user list template, we iterate over each user using the ngfor directive, displaying each result as its own unordered list item. When our app loads in the browser, viewers can filter the list of users by name and the UI updates accordingly thanks to the on filter method in our component.
During this course, we'll add functionality to our application that allows users to save the current filter state. Along the way, we'll look at some common Angular errors and how to fix them. Later in this course, we'll write unit tests and end to end tests for our code. Our user list service is currently receiving information about the user list from a static file called mock users, located in the mock folder in our app directory. We're using a static file to keep this course focused on testing and debugging Angular.
For an in depth look at how Angular works with data, check out the course Managing Data in Angular 2 Applications here in our library.
- Analyzing Angular 2 error messages
- Identifying the causes of common error messages
- Preventing common errors with custom error handling
- Analyzing testing reports
- Reviewing common testing report errors and their likely causes
Skill Level Intermediate
Q: This course was updated on 10/30/2018. What changed?
A: The following topics were updated: common Angular 2 errors—including dependency injection errors—and testing Angular 2 apps.