【问题标题】:Angular - After Build Inner Routing Not Working - 404 ErrorAngular - 构建内部路由后不起作用 - 404错误
【发布时间】:2020-07-17 11:48:28
【问题描述】:

我使用的是 Angular 9.0,在 ng serve -o 模式下一切正常,但是当我尝试使用 ng build 构建项目时,我只能查看根页面。当我尝试转到任何其他页面时,它会返回 404 错误,这是我在本地 ng serve 模式下没有遇到的问题。有关如何解决此问题的任何线索?

所以http://www.example.com/ http://www.example.com/dashboard 返回 404

编辑: 为了测试不同的场景,看看可能导致问题的原因,我设法确定了问题。如果我使用 routerLink,导航工作正常,但如果我使用 href 或 window.location.href,它就不起作用。知道为什么在使用 href 或 window.location.href 时会崩溃吗?

【问题讨论】:

    标签: angular angular-routing angular9 angular-builder


    【解决方案1】:

    ng serve 自动处理 URL 重定向到 index.html

    app.module.ts 中的以下添加应该可以解决您的问题。

    import { PathLocationStrategy, LocationStrategy } from '@angular/common';
    
    ...
    
    providers: [ { provide: LocationStrategy, useClass: PathLocationStrategy } ]
    

    https://angular.io/api/common/PathLocationStrategy

    编辑:

    href 是浏览器提供的用于在页面之间导航(切换)的默认属性,其中整个页面将被重新加载而失去当前状态。

    A more detailed explanation on href vs routerLink.

    因此,如果您将文件托管在 Apache 服务器上,它会尝试在不存在的 /dashboard 目录中查找 index.html 文件,因此会出现 404 错误。 要解决此问题,您必须将所有流量重写回index.htmlA more detailed explanation on rewrites.

    【讨论】:

    • 感谢您的回复。这个提供者部分也进入 app.module.ts?想要确认,因为根据 angular.io 上的示例,它会出现在项目的每个页面上。
    • 是的,没错。它进入 @NgModule 装饰器。
    • 您如何为您的index.html 文件提供服务?
    • 您能详细说明一下吗?
    • Zan 我更新了我的问题并在标题编辑下添加了更多信息。你认为这可能有帮助吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-08-23
    • 1970-01-01
    • 1970-01-01
    • 2020-09-29
    • 2018-02-02
    • 1970-01-01
    相关资源
    最近更新 更多