Angular windows.open 404 错误，适用于本地但不适用于网络服务器答案

【问题标题】：Angular windows.open 404 error, works on local but not on webserverAngular windows.open 404 错误，适用于本地但不适用于网络服务器
【发布时间】：2022-12-08 22:23:22
【问题描述】：

我得到了一个调用 window.open 的 Angular 应用程序，它适用于 ng serve with http://localhost:4200/newWindow

我可以将其复制并粘贴到我的 ng serve 和 chrome 上。它在本地工作

当代码部署到网络服务器时，我得到“状态”：404“错误”：“未找到”

window.open('https://myWebserver.com/newWindow', "_blank");
window.open('/newWindow', "_blank");

不确定如何调试或单步执行 Web 服务器上的代码。

当我在 chrome 上复制并粘贴 url 时，https://myWebserver.com/newWindow

我收到 404 错误，但在我的本地 http://localhost:4200/newWindow 上，这有效。

我唯一能想到的就是路线

const routes: Routes = [
  { 
    path: '', 
    component: MyLayoutComponent,
    children: [
      { path: '', component: HomeComponent},
    ]
  },
  { path: 'newWindow', component: NewWindowComponent},
];

我尝试在以下网址中使用“#”

https://myWebserver.com/#/newWindow

但没有运气

提前致谢

【问题讨论】：

我不确定为什么 window.open() 在你的情况下不起作用，但你不能只使用 Angular 预期的路由吗？

标签： javascript angular

【解决方案1】：

Angular 使用the history API 来更新 URL。

History API 旨在让开发人员说：我已经使用 JavaScript 修改了该文档，它现在的状态与您刚刚从该 URL 加载 HTML 文档时所获得的状态相同.

不幸的是，Angular 并没有做太多事情来使该声明在开发服务器之外为真（正如您所观察到的）。

解决此问题的常用方法是使用Server-Side Rendering 或Static Site Generation。

一种 hacky 方法是为所有未知 URL 提供相同的 HTML 文档，并依赖客户端代码为其加载所有页面内容。（这对搜索引擎来说是糟糕的食物，当 URL 确实找不到时，以及在 JS fails to load or run for any reason 的情况下，会破坏你使用 Status 404 的能力。）你如何去做取决于你的服务器，this page has an example for Apache HTTP .

【讨论】：

【解决方案2】：

你可以像下面这样用 routerLink 添加目标，它会起作用

<a [routerLink]="newWindow" target="_blank">newWindow</a>

【讨论】：

【解决方案3】：

如果该域中出现 404，您需要提供 index.html，这取决于您使用的网络服务器。 Firebase 部署有一个 SPA 选项。而 Apache 和 Nginx 需要您编辑配置

有关 Apache，请参阅 Angular SPA returns 404 on Google PageSpeed Insights

它在开发中起作用的原因是 ng serve 已经在处理这个问题

【讨论】：