Netlify环境下Angular路由在页面刷新时无法正常工作

Question

我使用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：页面未找到”，并且控制台没有错误。

- Betzel11

---

也许自9月3日以来，您已经解决了这个问题，但我提供的解决方案应该可以工作，至少对我而言是这样的 :) - AT82

@AJT_82 我现在会去查看。 - Betzel11

@AJT_82 这个可行！非常感谢，我花了很多时间试图弄清楚这个问题，但是无论在哪里都找不到解决方案/解释。 - Betzel11

@AJT_82 我还有一个问题。官方网站将托管在 Apache 上。我需要撤销这些更改并采取其他措施才能使其在上面正常工作吗？ - Betzel11

Answer 1

虽然这是个老问题，但对于那些想知道如何在Netlify中启用Angular路由的人还是很有帮助的。在你的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数组中。

- AT82

---

这个答案18个月后仍然相关！谢谢。 - markau

仍然在2021年12月有效！ - Pavindu

仍然在2022年9月运行！ - Rohit Maurya

glob 的意思是什么？ - amoonu

仍然在2023年3月运行！ - desoga

已在 Angular 15+ 中测试并仍然有效。谢谢！ - Raul Bermudez

Answer 2

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

刷新页面时出现404错误

1. 打开angular.json文件

2. 在assets下加入_redirects文件。这样，构建后的dist文件夹将包含您的即将生成的_redirects文件。<project-name>.architect.build.options.assets

   

3. 在src文件夹中添加带有以下行的_redirects文件。Netlify使用此文件重定向到index，从而允许使用Angular路由功能。

4. 部署！完成！

- MADHUR GUPTA

---

只是帮忙。如果有人在添加了这行代码后构建项目时出现错误，请使用src/_redirects文件。 - shehan96

2023年1月，通过添加“src/_redirects”而不仅仅是“_redirects”，根据@shehan96的提示，可以完美地工作。 - gregoryp

Answer 3

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

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

- jon_eldiablo

---

很遗憾，它没有起作用。它和之前一样出现了相同的错误。 - Betzel11

Answer 4

如果有人不想创建_redirects文件，也可以采用哈希路由策略来解决问题。你的URL将类似于这样：name.netlify.app/#/hello/login，你只需要在导入RouterModule时指定{useHash: true}即可解决问题。

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

- Adavize Aliyu

Answer 5

我最初创建项目时，错误地将构建目录命名为原始目录名称

1. 在您的angular.json中检查projects属性下的构建目录名称，在我的情况下是 bci

2. 因此，您的发布目录应该是netlify上的dist/bci

- Winnipass

Answer 6

我遇到了同样的问题，并使用@AT82的解决方案来修复它。

此外，

project.<app-name>.architect.build.outputPath: "dist/"

因为我的默认设置是dist/<app-name>。

或者

在"构建和部署 > 持续部署 > 构建设置"下更改Netlify的"发布目录"，使其与angular.json中的outputPath匹配。

- Tuna