Angular webpack - 你如何重写 URL？答案

【问题标题】：Angular webpack - how do you rewrite URLs?Angular webpack - 你如何重写 URL？
【发布时间】：2022-01-02 11:25:24
【问题描述】：

据我从其他 SO 帖子中了解到，如果您尝试直接浏览 Angular 上的 URL，它将失败并返回 404，因为这是由后端网络服务器处理的。在 Angular 中，默认的网络服务器是 webpack。

official documentation 列出了如何为多个应用程序设置 URL 重写，但似乎它们没有为 webpack 提供示例。

我看过有关使用 ng eject 的帖子，但是当我尝试这样做时，我收到了：

npx -p @angular/cli ng eject
The specified command ("eject") is invalid. For a list of available options,
run "ng help".

Did you mean "e2e"?

如何告诉 webpack 重写一个 URL？

【问题讨论】：

webpack 是 Angular cli 内部使用的 build+dev 工具。 BE 服务器可以是 Tomcat 或其他任何服务器，并且没有“默认值”。据我所知，将所有 404 重定向到 index.html 是 webpack 的默认设置——这通常就足够了。
这似乎不是发生的事情。当我输入一个随机 URL 时，控制台会发出一大堆 404 并且无处可去

【解决方案1】：

我觉得你有点糊涂了。

Angular 是一个前端框架并且没有后端 URL 重定向。 Angular-CLI 使用 webpack 作为它的打包工具，并设置了一个开发服务器，它总是加载 / 或 /index.html。

完成后，单页应用程序将启动，应用程序内（角度路由器）接管并根据您所在的位置开始加载（或延迟加载，如果您已配置）不同的模块和组件。所有这些都发生在客户端；用户的浏览器。

当然，当用户在浏览器上键入一个自定义 URL 时，它将在服务器上加载“所需”的 HTML 文档：但在 Angular 中它是不同的。只有一个index.html“进化”到所需的页面。

那么如果用户输入http://host.com/a/nested/url，我们如何解决加载所需页面的问题呢？因为如果我们在根目录下只有一个 index.html 文件，那将返回 404

这取决于您使用的网络服务器，解决方案会有所不同，无论是 NGINX、IIS、Phoenix……您都可以命名。

基本上所有解决方案都包括指示网络服务器始终按角度提供构建的index.html 文件。将其发送回浏览器，让 Angular 路由器根据它来确定要加载哪些组件

【讨论】：

不幸的是，我对此并不感到困惑。对于开发，我希望能够向 webpack 发送一个 URL，并让它将该完整的 URL 作为参数传递给 Angular，然后我将处理它。例如：我有一个网页链接到不是 Angular 的 Angular 应用程序。我需要该应用程序在开发环境中能够通过 URL 传递参数
您可以将该参数作为 URL 查询参数发送并从ActivatedRoute 或ActivatedRouteSnapshot 中读取。您可以自己将 URL 设置为：http://localhost:4200/fancy-route?nextUrl=http://other.domain.com/。如果您有中间重定向，请确保将NavigateExtras 中的选项设置为queryParamsHandling: 'merge'