如何在 Angular 中加载没有 SSR 的功能模块（延迟加载模块）？

Question

Angular 开发者！我正在开发一个 Angular 应用程序，其中需要从服务器端呈现大量路由，在 angular 中称为 Angular Universal (SSR)。但是，在我的应用程序中，有很多私有路由和功能模块实际上不需要从服务器呈现。如果它们在客户端呈现就没问题。这些实际上是私人路线，如用户个人资料、用户个人资料编辑模块。

保护这些路由不被服务器渲染的方法是什么。或者如何让路由只在客户端呈现？

Answer 1

此答案来自 eneajaho 来自 reddit。

嗨，我运行几个月前进入你的用例，我“找到”了一个解决方案，并且还在 angular 回购中打开了一个问题，以添加解决方案在文档中，但没有成功。无论如何，这是问题所在：https://github.com/angular/angular/issues/41187

解决方案：您应该编辑发生服务器端路由的 server.ts 文件，并添加一组您不想在服务器端呈现的路由。示例：

const EXCLUDED_ROUTES: string[] = [
  '/test',
  '/auth(/)?*',
  '/back(/)?*',
];

然后，您应该在文件中添加一个带有排除路由的get，在服务器呈现应用程序的路由之前。而这条路由会直接return index.html 文件，所以它不会渲染它，而是将它作为一个静态文件来服务，就像客户端渲染一样。

server.get(EXCLUDED_ROUTES, (req, res) => {
  res.sendFile(join(distFolder, 'index.html'));
});

全部代码：

/**
 * EXCLUDED_ROUTES contains all the paths that we don't want to render on the server
 *  Examples:
 *    '/test'
 *    '/back(/)?*' // regex: string starts with /back, '/' is optional, '*' it can be anything
 */
const EXCLUDED_ROUTES: string[] = [
  '/test',
  '/auth(/)?*',
  '/back(/)?*',
];

/**
 * Is used to exclude the routes from rendering on the server. Ex. Auth Page, Admin Page
 * To add or remove excluded routes modify the EXCLUDED_ROUTES array
 */
server.get(EXCLUDED_ROUTES, (req, res) => {
  res.sendFile(join(distFolder, 'index.html'));
});

如何在 Angular 中加载没有 SSR 的功能模块（延迟加载模块）？

How to load a feature module (lazyloaded module) without SSR in Angular?

server-side-rendering

angular-universal

angular