Angular 6应用程序在生产构建后重新加载时出现故障

Question

我有一个应用程序，在服务器上保留了成功生产构建后得到的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.

- Jignesh Mistry

Answer 1

您需要设置服务器，使其在任何不存在的URL上发送index.html(通常)。

发生的情况是，在应用程序内移动到不同的路由时，JS正在处理您的路由。但是一旦您刷新页面，浏览器就会要求您的服务器处理该请求，由于路由没有在服务器端处理，因此报告了上述错误。

因此，无论浏览器要求什么路由，您都需要提供index文件。

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

请查看此指南来配置您的服务器。

---

然而，还有一种聪明的处理路由的方法，即使用useHash: true。请查看此指南。

RouterModule.forRoot(routes, { useHash: true })

- Ankit Sharma

---

好的，让我试一下看看。 - Jignesh Mistry

你用了哪个？配置服务器还是useHash？建议配置服务器而不是使用HashLocationStrategy。 - Ankit Sharma

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

我使用了 useHash:true。 - Jignesh Mistry

Answer 2

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

1. 访问yourdomain.com/dist - 应用程序正常加载
2. 您进行一些导航，例如yourdomain.com/dist/somemodule/somethingelse
3. 您按F5键
4. 返回404错误代码。

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

Angular文档明确解释了需要做什么，并为某些Web服务器提供了如何示例配置。

我很惊讶您或集成团队不知道这些（基本！）概念的应用程序竟然进入了生产环境。

参考链接：https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml

- Antoniossss

---

我已经检查了备用配置示例，但列表中没有Nodejs/Express的示例https://angular.io/guide/deployment#fallback-configuration-examples。能否指向一个有效的示例。 - Prateek

Answer 3

你尝试过不使用--base-href或者使用--base-href=""构建网站吗？

- Vanch

---

没有使用 --base-href 会导致 main.js、pollyfill 等文件出现错误。 - Jignesh Mistry

Answer 4

正如@Antonoiosss在他上面的答案中提到的那样，这是由于您的生产服务器上的URL重写问题。然而，即使使用上面链接中给出的基本设置，Apache的备用选项对我也不起作用（即使我在我的Web服务器中有基本设置）。

以下.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路由的。然而，当您的应用程序进入真正的生产环境时，这很可能会被打开。

希望这能帮助到某些人。

Cheers.!

- Anjana Silva