Question

我是Angular世界的新手。我遵循了Angular.io指南来路由我的应用程序及其许多页面。我遇到的问题是在浏览器中单击刷新按钮时。我一直在研究这个问题，但没有放置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”，有什么特别的方法可以解决这个问题吗？刷新页面时如何解决无法在Angular中获取/的问题？

Answer 1

您的服务器需要设置为无论URL返回基本HTML页面，以便客户端路由器可以看到/dashboard并从那里获取。否则，当您直接进入/dashboard时，服务器将认为您正在要求其提供仪表板页面。

您可以使用URL重写在IIS中完成此操作。这是来自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>

另一种选择是基于哈希的URL，可以这样实现：

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

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

Answer 2

我使用 Nodejs 来提供角度文件，然后我将以下代码部分添加到 serve.js 中，然后它就起作用了。

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

I get this content from here

如果您使用 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'));
});

刷新页面时如何解决无法在Angular中获取/的问题？

2 个答案: