Angular 6 Application Breaks 在生产构建后重新加载 [英] Angular 6 Application Breaks on reload after production build

问题描述

我有一个应用程序，我在其中保留了那个 dist 文件夹，我们在我的服务器上成功构建了完整的生产版本.一切正常，所有模块&组件工作正常.在我手动重新加载浏览器窗口之前，它会引发以下错误.我还使用 base-href --/dist/

I have an application where i have kept that dist folder which we get after success full production build on my server. All works fine all modules & components are working perfectly. Untill I reload the browser window manually, it throws the below errors. Also i have build the project using 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.

推荐答案

您必须设置您的服务器，以便为任何不存在的 URL 发送 index.html(通常).

You have to setup your server to send index.html (generally) for any URL that does not exist.

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

What happens is when you move to a different route within the application, it is the JS that is handling your routing. But once you hit refresh, it is the browser asking your server to handle that request and since routes are not handled at the server side, it reports the said error.

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

Hence, you need to deliver the index file, no matter what route the browser asks for.

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

Well, if we talk about hitting the api from the front end, then you may use the concept called reverse proxy, if you have got any static server in between or handle /api route before any * route at server side, to let your request be handled by the server differently.

查看此指南以配置您的服务器.

Take a look at this guide to configure your server.

然而，也有一种巧妙的方法来处理路由.通过使用 useHash: true.请在此处查看指南.

There is however a clever way to handle routing as well. By using useHash: true. Please look at the guide here.

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

这篇关于Angular 6 Application Breaks 在生产构建后重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！