Angular 路由在页面刷新时不适用于 Netlify

Question

我使用 ng build --prod 部署到 netlify，网站运行正常。但是当我访问它时，它会通过在末尾添加 /home 来自动更改链接。它仍然有效，但如果我刷新页面或单击任何指向其他页面的链接，它就不再有效了。添加“/home”的原因是因为我设置了一个以 home 作为初始路径的 RouterModule。这是我在设置路由的“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:找不到页面”并且控制台没有错误。

Answer 1

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

/*  /index.html 200

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

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

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