生产构建后重新加载Angular 6应用程序中断

Posted 2023-03-15

【中文标题】生产构建后重新加载Angular 6应用程序中断

【英文标题】：Angular 6 Application Breaks on reload after production build

【发布时间】：2019-01-16 11:46:14

【问题描述】：

我有一个应用程序，我在其中保存了 dist 文件夹，我们在我的服务器上成功完整生产构建后获得了该文件夹。一切正常，所有模块和组件都运行良好。在我手动重新加载浏览器窗口之前，它会引发以下错误。我也使用 base-href -- /dist/ 构建项目

        Object not found!
        The requested URL was not found on this server. If you entered the URL 
        manually please check your spelling and try again.

        If you think this is a server error, please contact the webmaster.

【参考方案1】：

您必须将服务器设置为（通常）为任何不存在的 URL 发送 index.html。

当你在应用程序中移动到不同的路由时会发生什么，它是处理你的路由的 JS。但是，一旦您点击刷新，浏览器就会要求您的服务器处理该请求，并且由于服务器端未处理路由，因此它会报告上述错误。

因此，无论浏览器请求什么路径，您都需要传递index 文件。

好吧，如果我们谈论从前端点击api，那么您可以使用称为反向代理的概念，如果您之间有任何静态服务器或处理/api在服务器端的任何* 路由之前路由，让服务器以不同方式处理您的请求。

看看这个guide 来配置你的服务器。

---

不过，也有一种巧妙的方法来处理路由。通过使用useHash: true。请看指南here。

RouterModule.forRoot(routes,  useHash: true )

【讨论】：

好的，让我试试看

你用的是哪一个？配置服务器还是useHash？建议配置您的服务器，而不是使用HashLocationStrategy。

如果不想使用HashLocationStrategy，请查看angular.io/guide/deployment#server-configuration

我使用了 useHash:true

【参考方案2】：

让我澄清一下 - 您正在执行以下操作：

访问 yourdomain.com/dist - 应用加载正常 你做一些导航到例如。 yourdomain.com/dist/somemodule/somethingelse 你按了 f5 返回404错误码。

如果我是正确的，那么您必须在您的网络服务器上配置正确的 URL 重写。基本上它的作用是返回 index.html 无论请求什么 URL，只要例如。路径以 /dist/ 开头

Angular 文档明确解释了必须做什么，甚至提供了一些网络服务器的示例配置。

我很惊讶您的应用程序在您或集成团队不知道这些（基本的！！！）概念的情况下被应用到 preducton

https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml

【讨论】：

我已经检查了后备配置示例，但该列表不包含 Nodejs /Express angular.io/guide/deployment#fallback-configuration-examples 的配置示例。你能指出一个有效的例子吗？

【参考方案3】：

您是否尝试过不使用--base-href 或使用--base-href="" 来构建网站？

【讨论】：

如果没有 --base-href 它可以避免 main.js pollyfill 等的错误

【参考方案4】：

正如@Antonoiosss 在他上面的回答中提到的，这是由于您的生产服务器上的 url 重写问题。但是，Apache 的后备选项对我不起作用（即使使用我的 Web 服务器中的基本设置）在上面的 url 中给出。

以下.htaccess 示例对我有用，

 <IfModule mod_rewrite.c>
    RewriteEngine on

    RewriteCond %HTTP_HOST ^www\.(.*)$ [NC]
    RewriteRule ^(.*)$ http://%1/$1 [R=301,L]

    #RewriteCond %HTTPS !on
    #RewriteRule (.*) https://%HTTP_HOST%REQUEST_URI [R=301,L]

    # Don't rewrite files or directories
    RewriteCond %REQUEST_FILENAME -f [OR]
    RewriteCond %REQUEST_FILENAME -d
    RewriteRule ^ - [L]

    # Rewrite everything else to index.html
    # to allow html5 state links
    RewriteRule ^ index.html [L]   
</IfModule>

以上内容适用于 Angular 6、7 和 8。我已经注释掉了负责HTTPS 路由的两行。但是，当您的应用进入实际生产环境时，这很可能会启用。

希望这对某人有所帮助。

干杯！