当我直接在浏览器中输入 URL 时，Angular 应用程序如何工作？

Question

我知道 Angular 通过一个叫做单页应用程序的东西工作。
但让我不解的是，当我直接在浏览器中输入URL时。 它仍然可以找到正确的页面。

例如。 当我输入http://localhost/时，我知道它会显示index.html
但是当我输入http://localhost/asd时，它仍然可以工作，但构建结果不包含asd 。
如何？？？ 亲爱的 SO 社区。

Answer 1

我会尽力解释。

1. 服务器首先为 index.html 提供服务。

2. 如果您检查 index.html 的内容，您会发现

app-root 或类似的选择器将决定将加载哪个组件。

3. app-root 是 app.component.ts 的选择器

这意味着它将默认显示 app.component 。

4. 请注意，这是默认情况。 http://localhost/asd 等都默认这个。

您可以在此 stackblitz 上了解如何默认使用不同的组件。

https://stackblitz.com/edit/my-angular-starter-g2kuyy?file=index.html

注意：如果你想拥有不同的导航集，你可以通过路由来实现。

Answer 2

服务器可能配置为响应 HTML 文档，该文档引导 Angular 应用程序，用于任何通常会引发 404 错误的 URL。

Answer 3

如何？

In any case if you access an url like http://my-url.com or http://localhost/ and you pass whatever after the / it will work unless you made a redirection to 404 page or wherever you'd like.

为什么？

因为您的 url 是正确的，并且不处理您作为 url 的参数传递的内容，除非您让它处理它。

Answer 4

As it turn out I config my go server to direct all 404 page to the index.html so that when I input http://localhost/asd in navigation bar, it direct to index.html , and /asd is then processed by single angular 与windows.location.url的页面应用