Angular debugging skills Error 404 (not found) and angular404

Angular debugging skills Error 404 (not found) and angular404

Preface

During the holiday, the students were busy charging and learning "Full stack Development" was not a minority. I often received feedback from readers when debugging instances in the book "Full stack development path, confusions. Despite all kinds of problems, Angular debugging is a technical point in general.

It is not difficult to compile Angular code, but it is difficult to debug Angular code. For new Angular users, debugging Angular requires a process and accumulating experience. Once an error is reported, you can guess exactly where the problem is.

In this article, let's start with the common Angular debugging skills. What if 404 (not found) reports an error?

Simulate a debugging scenario

Example 6.3.3 of full stack development-implementation of single-page applications ,:

Single page Application Effect

When you click Home, About, or Contact, the content below changes accordingly without sending a new request to the page. A single page application automatically changes within a page and does not need to jump back and forth to a new page. This greatly improves user experience.

To implement this single-page application, an HTML file (index.html?home.html=about.html#contact.html) is created, and myapp. js is used for the router and controller, and the application Entry server. js is created.

Follow the tutorial in the book to complete the code input step by step until node server. js is finally run, and the content below does not change when you click the Home, About, and Contact buttons. There is no problem with the code. What is the problem?

Debugging skills

Tip:

You must use Chrome when debugging Angular. This is easy to understand. Angular is a Google company, and Chrome is also a Google company. There is no doubt that Chrome is the best support for its own products.

Run node server. js in the terminal window

In Chrome, enter http: // localhost: 3000

In this case, open the development tool of Chrome browser. If it is a Wiindows system, use the F12 key; if it is a Mac system, use Option + Command + I. Here we use the Mac system as an example.

Angular Error Message

First, let's look at the first line of errors. In many cases, the second line of errors is caused by the first line. If the first error is resolved, the following errors will automatically disappear.

Http: // localhost: 3000/myapp. js 404 (Not Found)

In Network Terms, 404 means that the file you want to request does not exist. In traditional development environments, such as C and Java, even if the file cannot be found, the Error 404 will not occur. The following prompt is Not Found, which means you have Not Found it.

Troubleshooting methods

If this error is reported, check whether the file exists and whether its access path is correct.

(1) check whether the file exists. The file names must be strictly consistent, and the file names must not be case sensitive. For example, index.html and Index.html are the same file, and myapp. js and myApp. js are the same thing.

(2) path of the file to be checked. It is easy to check whether the file name is correct. The path of the file is a technical task. Why? This is because AngularJS has a concept of static resources. The myApp. js file clearly exists. Why can't it be found? Let's take a look at the line of code that references myApp. js.

In the

<script src="myapp.js"></script>

When referencing a file, either an absolute path or a relative path is provided. How is the file path of myapp. js agreed?

The following code specifies the path convention for the server. js file:

app.use(express.static(path.join(__dirname, 'public')));

_ Dirname is a path, which refers to the path of the current file (server. js), and public is the next level directory of _ dirname. Path. join is a specified form type. express. static indicates the location where the static resources specified by the application are stored.

According to this concept, the preceding four files, home.html, about.html, contact.html, and myapp. js, are static resource files. Let's examine this line of code:

<script src="myapp.js"></script>

When the code is written in this way, the application needs to traverse the myapp. js file in the public directory of the current path. After reading this, you will understand the reason for the Error 404.
Put these static resource files in the public folder ,.

Static resource file path

Further discussion

Since it is a path, can you change the static resource path settings? For example, modify the code of the server. js file as follows:

app.use(express.static(path.join(__dirname, '/')));

In this way, the above four files do not need to be put into public. Although there is no error in this method, the problem is that this is not a standard practice. For a slightly more complex application, a large number of static resource files will be used. If no path is allocated, it will be difficult to maintain it!

Summary

It is not enough to master a programming technology and write code only. Evaluating a person's programming skills depends on whether he is familiar with debugging skills. In the future, I will use some Angular debugging tools to simulate some bug scenarios, to see if root cause can be quickly found and a solution is provided.

In short, mastering Angular debugging skills is a step towards senior full-stack engineers! The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.