Question

在localhost上，一切正常，但是当我在Heroku页面上部署文件时，无法直接通过URL打开

无法GET / profile

内部页面通过this.router.navigate(['/profile']);完成重定向时这工作正常我到了url页面但是当我直接打开时，错误
server.js文件

const express = require('express');
 const app = express();
 app.use(express.static(__dirname + '/dist'));
 app.listen(process.env.PORT || 8080);

同样的错误与图像也无法加载它们，我是否必须再次定义路线，因为我在 app.module.ts 中定义了

 RouterModule.forRoot([
 { path: '', component: HomeComponent },
 { path: 'admin', component: AdminComponent,canActivate:[AdminAuthGaurd]},
 { path: 'profile', component: ProfileComponent},
 { path: 'accessdenied', component: NoAccessComponent},
 { path: '**', component: NotFoundComponent }
])

我怎么能

app.get('*', (req, res) => {
this.router.navigate(['*']);
  });

因为我已经在我的角度应用上处理了这些请求！任何帮助都会非常感谢

Answer 1

这很正常。在Angular中，您只有一个要提供的文件 - index.html - 当您获得www.yourdomain.com时会提供该文件。因此，我们将Angular应用程序称为SPA（单页面应用程序） - 我们确实有一个要提供的页面，Angular应用程序路径应该在应用程序内部完成。

当您尝试打开/profile时，您将离开Angular应用并到达Express应用范围，该应用范围没有任何路由来处理此类请求。如果您有这样的事情：

const express = require('express');
const app = express();
app.use(express.static(__dirname + '/dist'));
app.get('/profile', (req, res) => {
   // do something
});
app.listen(process.env.PORT || 8080);

你会得到一些东西，但它会关闭Angular应用程序（index.html）。

您可以在docs了解更多相关信息。

了解hashing strategy并告诉我它是否对您有所帮助。使用散列，您可以获取

www.yourdomain.com/#/profile

并且页面永远不会通过URL中的＃发送到服务器。如果您使用此类策略，则应保留原始的Express服务器代码。

Answer 2

你可以配置express来始终提供index.html，无论网址是什么，这都应该允许你从外部链接到达你的路线：

//  all routes lead to to index.html
let router = express.Router();
router.get('*', (req, res) => {
  res.sendFile(path.join(DIR, 'index.html'));
});
this.express.use('*', router);

无法直接打开页面角度

2 个答案: