Angular11电商站社交媒体分享不显示商品及SSR部署报错求解

1. 修复Canonical标签重复新增问题 #

直接在更新前删除已存在的旧标签即可，修改你的CanonicalService代码：

import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable({ providedIn: 'root' })
export class CanonicalService {
  constructor(@Inject(DOCUMENT) private doc: Document) {}

  updateCanonical(url: string): void {
    // 先移除已有canonical标签
    const existTag = this.doc.querySelector('link[rel="canonical"]');
    existTag?.remove();
    // 插入新标签
    const newTag = this.doc.createElement('link');
    newTag.rel = 'canonical';
    newTag.href = url;
    this.doc.head.appendChild(newTag);
  }
}

2. 解决MSAL在SSR环境的crypto报错 #

报错原因是SSR运行在Node.js环境，没有浏览器原生的crypto对象，且SSR阶段不需要执行任何用户认证逻辑，按以下方案处理即可：

优先方案：SSR阶段跳过所有MSAL逻辑 #

通过Angular提供的平台判断API，仅在浏览器环境初始化、执行MSAL相关操作：

1. 在用到MSAL的模块、组件、服务中注入PLATFORM_ID
2. 所有MSAL初始化、登录校验、事件监听逻辑都包在浏览器环境判断中：

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

constructor(@Inject(PLATFORM_ID) private platformId: Object) {
  if (isPlatformBrowser(this.platformId)) {
    // 把原本所有MSAL相关的初始化、执行逻辑移到此处
  }
}

如果是模块注册MSAL provider，也可以改为条件注入：

providers: [
  {
    provide: MSAL_INSTANCE,
    useFactory: (platformId: Object) => {
      if (isPlatformBrowser(platformId)) {
        return new PublicClientApplication(msalConfig);
      }
      return null;
    },
    deps: [PLATFORM_ID]
  }
]

兜底方案：Node.js全局mock crypto对象 #

如果上面的方案仍有报错，在SSR入口server.ts文件最顶部添加全局mock：

import * as crypto from 'crypto';
global.crypto = crypto.webcrypto as any;

3. 无需移除ngx-drag-scroll插件的兼容方案 #

和MSAL的处理逻辑一致，仅在浏览器环境渲染使用该插件的组件：

1. 在对应组件中声明isBrowser变量，初始化时通过isPlatformBrowser赋值
2. 用*ngIf包裹所有用到ngx-drag-scroll的DOM节点：

<ng-container *ngIf="isBrowser">
  <!-- 原有使用ngx-drag-scroll的代码放此处 -->
</ng-container>

4. SSR部署后OG标签有效性校验 #

部署完成后，不要用浏览器F12的元素面板检查，直接右键点击页面选择「查看网页源代码」，确认返回的原始HTML的head节点中已经包含完整的og:title、og:image、og:description等标签，且og:image的链接是完整的绝对路径，同时AWS S3的对应图片没有设置防盗链、允许公开访问。

5. .NET Core后端是否需要修改 #

绝大多数场景不需要修改后端业务代码：

• 如果单独部署Angular Universal SSR服务，只需要调整Azure Websites的路由规则，把页面请求转发到SSR服务，接口请求仍然转发到.NET Core后端即可
• 如果要把SSR托管到.NET Core，只需要修改Startup.cs中的SPA服务配置，不需要调整业务接口逻辑

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