如何解决刷新页面时Cannot GET / in Angular？

Question

我是 Angular 世界的新人。我按照 Angular.io 指南路由我的应用程序及其许多页面。我遇到的问题是当我点击浏览器中的刷新按钮时。我 "Cannot GET /dashboard" 我一直在研究这个问题，我确实已经放置了 href="/"。

这是我的路由文件

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: '', component: LoginComponent },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },

  { path: '**', redirectTo: '', pathMatch: 'full' }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      routes,
      {
        enableTracing: false
      }
    )],
  exports: [RouterModule]
})
export class AppRoutingModule { }

如前所述，我可以进入 url 但是当我刷新页面时我得到 "Cannot GET /dashboard" 我需要做些什么来解决这个问题？如何解决刷新页面时Cannot GET / in Angular？

Answer 1

无论 URL，您的服务器都需要设置为 return 基本 HTML 页面，这样客户端路由器就可以看到 /dashboard 并获取它从那里。否则，当您直接转到 /dashboard 时，您的服务器会认为您要求它提供仪表板页面。

您可以在 IIS 中使用 URL 重写来完成此操作。这是来自 https://blog.angularindepth.com/deploy-an-angular-application-to-iis-60a0897742e7 的示例：

<system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular Routes" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="./index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

另一种选择是基于散列的 URLs，可以这样实现：

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

之所以有效，是因为服务器看不到 URL 的哈希部分。有关详细信息，请参阅 https://angular.io/guide/router。

Answer 2

我使用 Nodejs 来提供 angular 文件，然后我将以下代码部分添加到 serve.js 然后就可以了。

app.route('/*').get(function (req, res) {
  return res.sendFile(path.join(staticRoot + 'index.html'));
});

如果您使用 Nginx 或 Apache 来提供文件，您必须使用 URLRewrite 重定向到 index.html。服务器将客户端重定向到 index.html，它将导入 Angular 并且 RoutingModule 处理导航。

我的serve.js内容是：

// index.html and its contents are inside the `html` folder
// and the server.js is located on the same path as the `html` folder.
var express = require('express'),
  path = require('path'),
  fs = require('fs');
var compression = require('compression');
var app = express();
var staticRoot = __dirname + '/html/';
var env = process.env.NODE_ENV || 'production';

app.set('port', (process.env.PORT || 3002));

app.use(compression());
/* other middleware */

/* place any backend routes you have here */

app.use(function (req, res, next) {
  //if the request is not html then move along
  var accept = req.accepts('html', 'json', 'xml');
  if (accept !== 'html') {
    return next();
  }
  // if the request has a '.' assume that it's for a file, move along
  var ext = path.extname(req.path);
  if (ext !== '') {
    return next();
  }
  fs.createReadStream(staticRoot + 'index.html').pipe(res);
});

app.use(express.static(staticRoot));

/**
* Redirect to index.html
*/
app.route('/*').get(function (req, res) {
  return res.sendFile(path.join(staticRoot + 'index.html'));
});


app.listen(app.get('port'), function () {
  console.log('app running on port', app.get('port'));
});

如何解决刷新页面时Cannot GET / in Angular？

How to fix Cannot GET / in Angular when refreshing the page?

typescript

angular-routing

angular