Angular 页面刷新时路由在 Netlify 上不起作用

Question

我使用 ng build --prod 部署到 netlify，网站运行正常。但是当我转到它时，它会通过在末尾添加 /home 来自动更改 link 。它仍然有效，但如果我刷新页面或单击任何 links 到其他页面，它就不再有效了。添加“/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]

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

Answer 1

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

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

Answer 2

老问题，但对于那些可能偶然发现如何在 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数组。

Answer 3

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

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

Answer 4

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

Getting 404 on Refresh Page

打开angular.json
在资产下，添加 _redirects。这让生成的 dist 文件夹包含您的 soon-to-be _redirects 文件。<project-name>.architect.build.options.assets
在 src 文件夹中，使用以下行添加 _redirects。无论如何，Netlify 使用它重定向到索引，允许 angular 路由接管。
部署！大功告成！

Answer 5

以防有人在寻找无需创建 _redirects 文件的解决方案。

您可以使用散列路由策略来解决问题。您的网址看起来有点像这样 name.netlify.app/#/hello/login，您需要做的就是在导入 RouterModule 时指定 {useHash: true}，例如

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

Angular 页面刷新时路由在 Netlify 上不起作用

Angular routing not working on Netlify on page refresh

netlify

angular