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

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

Answer 1

老问题，但对于那些可能偶然发现如何在 Netlify 中启用角度路由的人来说。在您的

_redirects

文件夹中创建一个文件

src

，向其中添加以下内容：

/*  /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 2

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

刷新页面出现 404

1. 打开 angular.json

2. 在资产下，添加 _redirects。这使得构建中生成的 dist 文件夹包含您即将成为的 _redirects 文件。

   <project-name>.architect.build.options.assets

   

3. 在 src 文件夹中，添加 _redirects 并使用以下行。无论如何，Netlify 使用它来重定向到索引，从而允许角度路由接管。

4. 部署！你完成了！

Answer 3

尝试构建命令：

ng build --prod --base-href ./

并将文件添加到根项目netlify.toml：

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

Answer 4

我错误地将我的构建目录命名为我以前使用的原始目录名称 创建项目

1. 在 angular.json 中检查项目属性下的名称 构建目录，就我而言 bci

2. 所以你的发布目录应该是netlify上的dist/bci

Answer 5

如果有人正在寻找解决方案而无需创建 _redirects 文件。

可以使用哈希路由策略来解决这个问题。您的 URL 看起来有点像这样

name.netlify.app/#/hello/login

，您需要做的就是在导入

{useHash: true}

例如

 时指定 

RouterModule

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

Answer 6

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

加

project..architect.build.outputPath：“dist/” 因为我的默认设置为“dist/”

或

更改“构建和部署 > 持续部署 > 构建设置”下的 netlify“发布目录”以匹配 angular.json 中的输出路径