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

打开angular.json
在资产下，添加_redirects。这样一来，生成的dist文件夹就会包含您即将成为_redirects的文件。<project-name>.architect.build.options.assets
在src文件夹中，使用以下行添加_redirects。无论如何，Netlify都会使用它重定向到索引，从而允许角度路由接管。
部署！完成了！

Answer 3

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

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

Answer 4

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

在您的angular.json中，检查projects属性下的名称。构建目录，以我为例 bci
因此您的发布目录应该在netlify上为 dist / bci

刷新页面时Netlify上的角路由不起作用

4 个答案: