Angular请求Express时Pug模板无法渲染问题排查

这种情况我之前也碰到过，大概率是前端路由接管了请求或者请求方式不对导致的，咱们一步步排查解决：

1. 检查AngularJS的路由配置 #

AngularJS作为单页应用，会默认接管URL路由。如果你的前端路由（比如用$routeProvider或者ui-router）里配置了/verifyEmail，那当你从前端发起请求时，Angular会自己处理这个路由，根本不会把请求发到Express后端。

解决办法：

• 把/verifyEmail从前端路由中移除，或者配置路由规则时，让这个路径直接跳转到后端（比如用redirectTo或者在resolve里做页面跳转）。
• 举个例子，如果用$routeProvider：

angular.module('yourApp', ['ngRoute'])
  .config(function($routeProvider, $locationProvider) {
    $routeProvider
      // 其他前端路由
      .when('/someRoute', {
        templateUrl: 'views/someView.html'
      })
      // 对于/verifyEmail，直接让浏览器跳转
      .when('/verifyEmail', {
        resolve: {
          redirect: function($window) {
            $window.location.href = '/verifyEmail';
          }
        }
      });
  });

2. 确认前端的请求方式 #

如果前端是用$http.get('/verifyEmail')这种AJAX请求，那Express返回的Pug模板HTML会作为响应数据回到前端，但你没有把这个HTML插入到页面DOM中，所以浏览器自然看不到内容。

正确的做法应该是让浏览器做页面跳转，而不是发起AJAX请求：

// 前端代码里用这个替代AJAX请求
$window.location.href = '/verifyEmail';

这样浏览器会重新加载这个URL，Express就能正常渲染Pug模板了。

3. 检查Express后端的路由配置 #

先确认你的Express路由和视图配置是正确的：

• 确保已经设置了正确的视图目录：

const path = require('path');
app.set('views', path.join(__dirname, 'views')); // views和Express文件同级，这个配置是对的
app.set('view engine', 'pug');

• 然后/verifyEmail的路由要正确渲染模板：

app.get('/verifyEmail', (req, res) => {
  // 直接渲染verify_email.pug，因为views目录已经配置好
  res.render('verify_email');
});

4. 处理HTML5模式的路由冲突（如果开启了的话） #

如果你的Angular开启了HTML5模式（$locationProvider.html5Mode(true)），后端需要配置catch-all路由返回index.html，但一定要把/verifyEmail的路由放在catch-all之前，否则会被index.html的路由覆盖：

// 先处理verifyEmail路由，优先渲染模板
app.get('/verifyEmail', (req, res) => {
  res.render('verify_email');
});

// 然后处理单页应用的所有其他路由，返回index.html让Angular处理
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

按照上面的步骤排查，应该就能解决问题啦！

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