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

时间:2018-08-09 05:58:31

标签: angular typescript angular6

我有一个应用程序,其中保存了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.

4 个答案:

答案 0 :(得分:3)

您必须将服务器设置为针对所有不存在的URL发送index.html(通常)。

发生的事情是,当您移至应用程序中的其他路由时,是JS处理了您的路由。但是一旦刷新,浏览器便会要求服务器处理该请求,并且由于路由未在服务器端处理,因此会报告上述错误。

因此,无论浏览器要求什么路径,您都需要交付index文件。

好吧,如果我们谈论从前端开始使用api,那么如果您之间有任何静态服务器或可以处理{,则可以使用称为反向代理的概念{1}}路由在服务器端的任何/api路由之前,以使服务器可以不同地处理您的请求。

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


但是,还有一种巧妙的方法来处理路由。通过使用*。请查看指南here

useHash: true

答案 1 :(得分:2)

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

  1. 访问yourdomain.com/dist-应用加载正常
  2. 您可以进行一些导航,例如。 yourdomain.com/dist/somemodule/somethingelse
  3. 您击中了f5
  4. 返回404错误代码。

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

开头

Angular文档明确说明了必须执行的操作,甚至提供了某些Web服务器的示例配置。

令您惊讶的是,您对Preducton的申请没有您或集成团队知道这些(基本!!)概念

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

答案 2 :(得分:1)

您是否尝试在没有--base-href--base-href=""的情况下构建网站?

答案 3 :(得分:0)

正如@Antonoiosss在上面的回答中提到的,这是由于生产服务器上的URL重写问题所致。但是,{url {1}}的后备选项对我不起作用(即使使用我的Web服务器中的基本设置)也无法通过上面的URL给出。

以下Apache示例对我有用,

.htaccess

以上内容适用于 Angular 6、7和8 。我已经注释掉了两行,负责 <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> 路由。但是,最有可能在您的应用程序达到实际生产环境时将其打开。

希望这对某人有帮助。

干杯!!