角度路由在页面刷新时无法在 Netlify 上运行答案

【问题标题】：Angular routing not working on Netlify on page refresh角度路由在页面刷新时无法在 Netlify 上运行
【发布时间】：2019-01-24 00:51:11
【问题描述】：

我使用ng build --prod 部署到 netlify，并且该网站正常运行。但是当我转到它时，它会通过在末尾添加/home 来自动更改链接。它仍然有效，但是如果我刷新页面或单击任何指向其他页面的链接，它就不再有效了。添加“/home”的原因是因为我有一个RouterModule 设置，它的初始路径为home。这是我在“app.module.ts”中设置路由的代码：

 NgbModule.forRoot(),
    RouterModule.forRoot([
      {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
      },
      {
        path: 'home',
        component: HomeComponent
      },
      {
        path: 'terms-and-conditions',
        component: TermsAndConditionsComponent
      },
      {
        path: 'privacy',
        component: PrivacyPolicyComponent
      },
      {
        path: 'about',
        component: AboutComponent
      },
      {
        path: 'contact',
        component: ContactComponent
      },
      {
        path: 'team',
        component: TeamComponent
      },
      {
        path:'safety',
        component: SafetyComponent
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]

那么为什么构建不适用于页面链接？它只是进入“404：找不到页面”并且控制台没有错误。

【问题讨论】：

也许你从 9 月 3 日起就解决了这个问题，但我提供的解决方案应该可以工作，至少对我来说是这样：)
@AJT_82 我现在会调查一下。
@AJT_82 这行得通！非常感谢你，我花了很多时间试图解决这个问题，但在任何地方都找不到解决方案/解释。
@AJT_82 我还有一个问题。官网将托管在apache上。我是否需要撤消这些更改并执行其他操作才能使其正常工作？

标签： angular netlify

【解决方案1】：

老问题，但对于那些可能偶然发现如何在 Netlify 中启用角度路由的人来说。在您的src 文件夹中创建一个文件_redirects，将以下内容添加到其中：

/*  /index.html 200

在您的angular.json 文件中将以下内容添加到projects.architect.build.options.assets

{
  "glob": "_redirects",
  "input": "src",
  "output": "/"
}

如果您碰巧在 angular.cli.json 文件中使用旧版本的 Angular，请按照以下步骤操作：https://medium.com/@mgd4375/how-to-enable-angular-routing-in-a-netlify-deployment-with-the-angular-cli-e2eda69f1b5b 在 angular.cli.json 文件中进行等效更改，即将 "_redirects" 添加到相应的 assets 数组中。

【讨论】：

这个答案在 18 个月后仍然适用！谢谢。
2021 年 12 月仍然有效！

【解决方案2】：

使用 Angular CLI 在 Netlify 部署中启用 Angular 路由

在刷新页面上获取 404

打开 angular.json
在资产下，添加 _redirects。这让构建的结果 dist 文件夹包含您即将成为的 _redirects 文件。<project-name>.architect.build.options.assets
在 src 文件夹中，使用以下行添加 _redirects。 Netlify 无论如何都使用它来重定向到索引，从而允许角度路由接管。
部署！大功告成！

【讨论】：

只是为了帮助。如果有人在添加此行后构建项目时遇到错误。使用src/_redirects

【解决方案3】：

尝试构建命令：ng build --prod --base-href ./ 并将文件添加到根项目netlify.toml：

# A basic redirects rule
[[redirects]]
  from = "/*"
  to = "/index.html"

【讨论】：

不幸的是它没有用。它和以前一样的错误。

【解决方案4】：

我用原来的目录名错误地命名了我的构建目录创建项目

在您的 angular.json 中检查项目属性下的名称构建目录，在我的例子中 bci
所以你的 Publish 目录 应该是 netlify 上的 dist/bci

【讨论】：

【解决方案5】：

以防任何人都在寻找解决方案，而无需创建 _redirects 文件。

您可以通过使用哈希路由策略来解决该问题。您的 URL 看起来有点像 name.netlify.app/#/hello/login，您只需在导入 RouterModule 时指定 {useHash: true}，例如

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

【讨论】：