Detailed interpretation of Angular's error 404 issues

This article mainly introduces the error 404 (not found) that explains Angular debugging skills in detail. Now I share it with you and give you a reference.

Preface

During the holidays, students are busy recharging their batteries, and there are many who learn "Full Stack Development". I often receive feedback from readers. When debugging "Full Stack Development" I encountered confusion when using examples from the book "The Way of Development". Although you will encounter various problems, generally speaking, they can be boiled down to one technical point, and that is - Angular debugging.

Writing Angular code is not difficult, but debugging Angular code is difficult. For those new to Angular, debugging Angular requires a process and continuous accumulation of experience in this process. As soon as you see an error report, you can guess where the problem lies.

In this article, let’s start with common Angular debugging skills. What should we do if we encounter a 404 (not found) error?

Simulate a debugging scenario

Example from the book "Full Stack Development" Chapter 6.3.3 - Implementation of a single-page application, to implement such a The effect is as shown in the figure:

Single page application effect

When you click Home, About, and Contact, the content below will change accordingly. Without the need for the page to send a new request. A single-page application automatically changes within a page without having to jump back and forth to a new page. The user experience is greatly improved.

In order to implement such a single-page application, the book creates html files (index.html, home.html, about.html, contact.html), and a myapp.js for router and controller. And created the application entrance server.js

Follow the tutorial in the book and complete the code input step by step. Until finally running node server.js, I found that when I clicked the Home, About, and Contact buttons, the The content has not changed. There is no problem with the code, so what's going on?

Debugging tips

Friendly reminder:

When debugging Angular, be sure to use the Chrome browser. This is easy to understand. Angular is owned by Google, and Chrome is also owned by Google. There is no doubt that Chrome supports its own products best.

Run node server.js in the terminal window

In the Chrome browser, enter: http://localhost:3000

At this time, open the development of the Chrome browser Tools, if it is a Wiindows system, use the F12 key; if it is a Mac system, use Option Command I. The screenshots here take the Mac system as an example.

Angular error message

Let’s first look at the error in the first line. Many times, the error in the second line is caused by the first line; if the first The error is resolved and the error below will disappear automatically.

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, a 404 error will not occur. Look at the next prompt Not Found, which means it was not found.

Error troubleshooting method

When encountering this kind of error, the troubleshooting method is to first check whether the file exists, and then check whether its access path is correct.

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

(2) Check the path of the file. Checking whether the file name is correct is simple; checking the file path is a technical task. Why do you say that? This is because, in AngularJS, there is a concept of static resources. The myApp.js file clearly exists, why can’t it be found? Let's first look at the line of code that references myApp.js.

In the tag of index.html:

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

When referencing a file, either an absolute path or a relative path is given. What is the file path of myapp.js? What about the agreement?

This depends on how the server.js file specifies the path convention. The code is as follows:

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

__dirname is a path, which refers to the path where the current file (server.js) is located, and public is the lower-level directory of __dirname. path.join is a specified form, and express.static represents the location where the static resources specified by the application are stored.

According to this concept, the four files above home.html, about.html, contact.html, and myapp.js are all static resource files. Let’s look at this line of code again:

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

Code When written this way, the application will 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.
You need to put these static resource files in the public folder, as shown in the figure.

静态资源文件路径

进一步讨论

既然是路径惹的祸，那么能不能换一种思路，改一下静态资源路径的设置呢？ 比如，修改server.js 文件的代码，如下：

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

这样一来，上面那四个文件就不用放到public了, 这种方法，虽然没有报错，问题是，这不是规范的做法。但凡稍微复杂一点的应用，都会用到大量的静态资源文件，如果不分配路径，将难以维护！

小结

掌握一门编程技术， 仅仅会编写代码是不够的。 评价一个人的编程水平，就看他的调试技能是否驾轻就熟。 后续，我要借助一些 Angular专用的调试工具，模拟一些出现bug的场景，看看如果快速发现root cause，并给出解决方案。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用Vue.set()如何实现数据动态响应

在vue中如何实现动态绑定图片以及data返回图片路径

在vue中如何实现动态改变静态图片以及请求网络图片

The above is the detailed content of Detailed interpretation of Angular's error 404 issues. For more information, please follow other related articles on the PHP Chinese website!