Angular Universal 15中如何在loadChildren加载模块时引入外部JS

你可以通过模块初始化逻辑结合Angular Universal的平台适配能力，实现服务端（供Google爬虫抓取）和客户端都能加载目标JS库的效果，具体实现如下：

实现步骤 #

1. 在目标模块中添加脚本加载逻辑 #

在abc.module.ts中，利用APP_INITIALIZER在模块初始化前加载外部脚本，同时通过PLATFORM_ID区分服务端/客户端环境，借助Angular提供的DOCUMENT注入（服务端由Domino模拟支持）完成脚本注入：

首先导入依赖：

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

然后定义脚本加载工厂函数：

export function loadExternalScriptFactory(document: Document, platformId: Object) {
  return () => new Promise<void>((resolve) => {
    const scriptUrl = 'https://your-external-script-url.js';
    
    if (isPlatformServer(platformId)) {
      // 服务端渲染时，直接在head注入同步脚本，确保爬虫能获取
      const script = document.createElement('script');
      script.src = scriptUrl;
      script.async = false;
      document.head.appendChild(script);
      resolve();
    } else if (isPlatformBrowser(platformId)) {
      // 客户端时检查脚本是否已存在，避免重复加载
      const existingScript = document.querySelector(`script[src="${scriptUrl}"]`);
      if (!existingScript) {
        const script = document.createElement('script');
        script.src = scriptUrl;
        script.onload = script.onerror = () => resolve();
        document.head.appendChild(script);
      } else {
        resolve();
      }
    } else {
      resolve();
    }
  });
}

2. 配置模块的初始化提供者 #

在模块的providers数组中注册APP_INITIALIZER，确保模块加载前先执行脚本加载：

@NgModule({
  // 模块的其他配置（组件、路由等）
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: loadExternalScriptFactory,
      deps: [DOCUMENT, PLATFORM_ID],
      multi: true
    }
  ]
})
export class AbcModule { }

关键说明 #

• 服务端环境下，Angular Universal使用Domino模拟DOM，因此可以安全使用document对象创建并注入脚本，设置async: false能确保脚本被包含在服务端渲染的HTML中，供Google爬虫抓取。
• 客户端环境下，通过检查已存在的脚本标签避免重复加载，同时通过onload/onerror确保模块初始化不会因脚本加载失败而阻塞。

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