微前端远程应用依赖报错：Snap is not defined 问题求助

问题根源 #

在NX的Angular微前端架构里，远程应用（如MF-1）的project.json中配置的scripts不会被容器应用（Shell）加载执行。因为容器是远程模块的宿主环境，远程应用的全局脚本无法自动注入到容器的全局上下文，导致依赖全局变量的第三方库（如SnapSVG、Plotly）出现「Snap is not defined」这类错误。而在Shell的project.json中配置脚本能生效，是因为容器的脚本会直接加载到全局环境中。

可行解决方案 #

1. 远程应用改用ES模块导入，避免依赖全局变量 #

很多第三方库支持ES模块导入，无需依赖全局变量。以SnapSVG为例：

• 先安装依赖及类型定义：

  npm install snapsvg @types/snapsvg
  

• 在MF-1的组件/服务中直接导入使用：

  import Snap from 'snapsvg';
  
  export class Mf1Component implements OnInit {
    ngOnInit() {
      const svg = Snap('#svg-element');
      // 后续SVG操作逻辑
    }
  }
  

这样就绕开了全局变量的依赖，直接通过模块引用使用库的功能。

2. 通过Module Federation共享依赖 #

利用NX的Module Federation机制，将第三方库配置为共享依赖，让容器和远程应用共用同一实例：

• 在MF-1的module-federation.config.ts中添加共享配置：

  export default {
    name: 'mf1',
    exposes: {
      './Module': './apps/mf1/src/app/remote-entry/entry.module.ts',
    },
    shared: {
      '@angular/core': { singleton: true, strictVersion: true },
      '@angular/common': { singleton: true, strictVersion: true },
      '@angular/router': { singleton: true, strictVersion: true },
      'snapsvg': { singleton: true, eager: true } // 添加这一行
    },
  };
  

• 在Shell的module-federation.config.ts中同步配置共享snapsvg，或者让Shell作为依赖提供者，确保远程应用能获取到正确的库实例。

3. 远程应用内动态加载全局脚本 #

如果必须使用全局变量的方式，可以在远程应用的组件初始化时动态加载脚本：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'mf1-component',
  templateUrl: './mf1.component.html',
})
export class Mf1Component implements OnInit {
  ngOnInit() {
    const script = document.createElement('script');
    // 可以使用项目assets中的脚本路径，或者CDN地址
    script.src = '/assets/snapsvg.js';
    script.onload = () => {
      // 脚本加载完成后再执行依赖Snap的逻辑
      const svg = (window as any).Snap('#svg-element');
      // 后续操作
    };
    document.body.appendChild(script);
  }
}

注意要确保脚本路径正确，且在脚本加载完成后再调用相关API。

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