使用 Angular 6 重定向到 Netlify 上的自定义成功页面答案

【问题标题】：Redirect to Custom Success Page on Netlify with Angular 6使用 Angular 6 重定向到 Netlify 上的自定义成功页面
【发布时间】：2018-09-28 03:56:15
【问题描述】：

我已经在 Netlify 上部署了一个 Angular 6 站点，几乎没有问题，并且我已经使用 Netlify 的内置表单获得了一个用于简单提交的表单。

我现在尝试在成功提交表单后重定向到自定义角度组件，但有点卡住了。我试图模拟 Netlify 文档中为 react 和 vue 列出的此任务的文档，我认为这是角度等效的。

我尝试过重定向到静态 html 页面和组件。像文档建议的那样发布到“/”会导致 404。

我在控制台和表单提交后没有收到任何错误，所以我不确定接下来我可以尝试什么。任何输入都是有帮助的，如果需要，我可以显示我使用的代码。

编辑：这是我用来重定向到 Netlify 内置确认页面的表单。我希望能够在 Angular 中重定向到我自己的确认组件。

<form name="contact" action="/done/" netlify method="POST" netlify-honeypot="bot-field">
  <input type="hidden" name="form-name" value="contact"/>
  <p class="hidden">
    <label>Don’t fill this out if you're human: <input name="bot-field" /></label>
  </p>
  <p>
    <label>Name <input type="text" name="name" /></label>
  </p>
  <p>
    <label>Email <input type="email" name="email" required/></label>
  </p>
  <p>
    <label>Message <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

这是一个成功的表单提交的屏幕截图，它正确重定向，除了我的 angular 组件，Netlify 仍在处理重定向页面。

【问题讨论】：

我在普通的哈巴狗网站上遇到了同样的问题。你有没有想过让重定向工作的解决方案？ URL 路径是正确的，就像你的一样，但它只是使用默认的 Netlify 确认屏幕，而不管 URL。
@ekfuhrmann 我还没有时间回去尝试解决这个问题，但我最近收到一封电子邮件，有人说他们通过“通过获取发送表单”解决了这个问题。我假设这意味着浏览器获取 API。

标签： angular netlify

【解决方案1】：

要使重定向正常工作，您可能需要一个 _redirects 文件。

使用此文件，所有 URL 都将发送到应用程序的根目录，从而使 Angular 路由器能够正常运行。

_redirects 文件应创建在应用程序的src 文件夹中。对于大多数基本站点，该文件只需要包含这一行：

/*    /index.html   200

创建_redirects 文件后，您还应该将其添加到angular.json 文件中的assets 部分。

 "assets": [
     "src/favicon.ico",
     "src/assets",
     "src/_redirects"
 ]

更多信息可以在here找到。

【讨论】：

我已经有了重定向文件，并且从其他组件重定向工作正常。我在询问提交 Netlify 表单时发生的自动重定向。我希望 Netlify 表单提交，而不是重定向到 Netlify “成功提交”页面，我希望它重定向到我的自定义 Angular 组件。
对不起，我误解了，你能显示你用来创建表单的代码吗？
别担心！我已将我正在使用的表单代码附加到我的原始问题@bas-de-groot

【解决方案2】：

来自this article：

...创建一个新页面，例如/success/ 并将action 属性添加到您的<form> 标记。

它应该看起来像这样：

<form name="contact" method="POST" action="/success/"  netlify>

【讨论】：