将Angular Universal引入Netlify进行部署

Angular是为了SPA（单页面应用）而设计的，由于它很难被爬虫索引，所以通过引入SSR（服务器端渲染）来增加它易于被索引的可能性。

在Angular中，有一个名为Universal的SSR（服务器端渲染）选项。
这个选项可以在Angular官方网站的Universal介绍页面上找到。

通用的附加

使用以下命令将其添加到我的项目中。

ng add @nguniversal/express-engine

如果命令正常执行，将会添加以下文件：
server.ts
src/app/app.server.module.ts
src/main.server.ts
tsconfig.server.json

当追加完成后，我们将尝试执行预渲染。

npm run prerender

接下来，创建netlify.toml文件。
只要将其保存在项目根目录下，在构建时会自动加载。

[build]
 command = "npm run prerender"
 functions = "./functions"
 publish = "dist/[自プロジェクト]/browser"

其他

由于SSR，服务器端的渲染处理无法使用window、localStorage等功能，因此需要使用isPlatformBrowser()来区分服务器端和浏览器端的处理。

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

export class SomeComponent {
    constructor(
        @Inject(PLATFORM_ID) private platformId: any) {
        // 処理...
    }

    ngOnInit():void {
        if (isPlatformBrowser(this.platformId)) {
            // browser側の処理...
        }
        if (isPlatformServer(this.platformId)) {
            // // server側の処理...
        }
    }
}

请参考相关页面。

在Netlify的社区上发布的一篇文章：
https://www.netlify.com/blog/2021/02/08/pre-rendering-with-angular-universal/

以上