如何在浏览器直接访问Angular路由？Express路由渲染问题求助

错误原因分析 #

1. 初始错误「Cannot get /login」：Angular是单页应用（SPA），前端路由由Angular Router处理，但直接访问/login时请求会发送到Express后端，此时后端未配置对应路由，因此返回404错误。
2. 新增路由后报错「No default engine was specified and no extension was provided」：你使用了res.render()方法，但Express未配置模板引擎，且Angular打包后是静态HTML文件，不需要模板渲染，应直接返回打包后的入口文件。

修正后的Express代码 #

var express = require("express");
var path = require("path"); // 引入path模块处理跨系统路径
var app = express();

// 托管Angular打包生成的静态资源文件
app.use(express.static(path.join(__dirname, "dist/website")));

// 所有非静态资源的请求，统一返回Angular入口文件，由前端路由处理路径匹配
app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, "dist/website/index.html"));
});

app.listen(4200);

代码说明 #

• 引入path模块：确保在不同操作系统下路径解析正常，避免因路径分隔符差异导致的错误。
• 统一路由规则app.get('*', ...)：无论用户访问根路径/还是子路径/login，只要请求的不是静态资源，都返回Angular的入口index.html，让Angular Router完成前端路由的匹配和组件渲染。
• 替换res.render()为res.sendFile()：Angular打包后生成的是静态HTML文件，无需模板引擎渲染，直接返回文件即可。

Angular路由补充说明 #

你当前配置了useHash: true，路由会带上#前缀（如example.com/#/login），这种哈希模式下，#后的内容不会发送到服务器，后端无需额外处理也能正常访问子路径。如果想要去掉#（HTML5模式），除了后端配置上述路由规则外，还需修改Angular路由配置：

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: false})], // 将useHash改为false
  exports: [RouterModule]
})

内容的提问来源于stack exchange，提问作者allforthenoob