刷新页面时Netlify上的角路由不起作用 [英] Angular routing not working on Netlify on page refresh

问题描述

我使用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:找不到页面"，并且控制台没有错误.

解决方案

这个老问题，但是对于那些可能在Netlify中启用角度路由的人可能会迷惑不解.在src文件夹中创建一个文件_redirects，向其中添加以下内容:

/*  /index.html 200

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

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

如果碰巧将旧版本的Angular与angular.cli.json文件一起使用，请遵循以下步骤:添加到相应的assets数组中.

I deploy to netlify using ng build --prod, and the website works. But when I go to it, it automatically changes the link by adding /home onto the end. It still works, but then if I refresh the page or click any links to other pages, it doesn't work anymore. The reason the "/home" is added on is because I have a RouterModule set up that has home as it's initial path. Here is the code I have in my "app.module.ts" that sets up routes:

 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]

So why is it that the build doesn't work for the page linking? It just goes to a "404: page not found" and the console has no errors.

解决方案

Old question, but for those who might stumble on it on how to enable angular routing in Netlify. Create a file _redirects in your src folder, add the following to it:

/*  /index.html 200

in your angular.json file add the following to projects.architect.build.options.assets

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

If you happen to use older version of Angular with angular.cli.json file, follow this: https://medium.com/@mgd4375/how-to-enable-angular-routing-in-a-netlify-deployment-with-the-angular-cli-e2eda69f1b5b where you do the equivalent change in angular.cli.json file, i.e add "_redirects" to the corresponding assets array.

这篇关于刷新页面时Netlify上的角路由不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！