Angular中如何不使用SSR加载懒加载特性模块并设置仅客户端渲染路由

方案1：服务端入口直接拦截指定路由（最推荐，实现成本最低） #

你可以直接在SSR的服务端代码（默认是server.ts）中，提前匹配所有不需要SSR的私有路由，直接返回客户端的静态index.html，跳过SSR渲染流程。
示例代码（基于默认的Express服务端）：

// 请放在Universal渲染中间件的前面
const privateRoutes = ['/profile/*', '/edit/*', '/user/*']; // 替换为你的私有路由规则
app.get(privateRoutes, (req, res) => {
  res.sendFile(join(distFolder, 'index.html'));
});

// 后面再接原来的Universal渲染逻辑
app.get('*', (req, res) => {
  res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});

这个方案相当于服务端碰到私有路由时，完全不做服务端渲染，直接把静态页面返回给浏览器，由客户端完成后续的路由解析、组件渲染逻辑。

方案2：Angular 运行环境判断适配 #

如果你需要更细粒度的控制，可以在Angular代码内判断当前运行环境，在服务端侧跳过私有路由的渲染。
首先导入平台判断API：

import { isPlatformServer, isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID, Inject } from '@angular/core';

然后在对应组件/路由守卫中注入平台ID并判断：

constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

ngOnInit() {
  if (isPlatformServer(this.platformId)) {
    // 服务端环境下直接返回空内容，或者做重定向逻辑
    return;
  }
  // 客户端环境下才执行私有数据加载、页面渲染逻辑
  this.loadUserData();
}

如果用在路由守卫中，可以直接在服务端环境下重定向到公共页面，避免私有路由的服务端渲染：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  if (isPlatformServer(this.platformId)) {
    return this.router.createUrlTree(['/']);
  }
  // 客户端环境下再走正常的登录鉴权逻辑
  return this.authService.isLoggedIn();
}

方案3：懒加载模块的服务端过滤 #

如果你的私有路由对应的都是懒加载特性模块，可以在路由配置的loadChildren中加环境判断，服务端侧不加载私有模块，客户端侧正常加载即可。

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