寻求支持AngularJS应用的Vite HMR插件及改造方案

针对你在AngularJS代码修改后需要全量刷新的问题，以下是经过验证的改造思路和具体实现方案：

1. 显式关联导入依赖，修复Vite依赖追踪问题 #

AngularJS的依赖注入机制会导致部分导入的服务/指令没有被代码直接引用，Vite无法自动追踪这些依赖关系。改造核心是把模块注册逻辑显式化，让Vite能识别依赖链：

改造前（无法触发HMR） #

// user.service.ts
import angular from 'angular';

class UserService { /* 服务逻辑 */ }

angular.module('app').service('userService', UserService);

// app.module.ts
import './user.service.ts'; // 仅用于注册，无直接代码引用

改造后（可触发HMR） #

// user.service.ts
import angular from 'angular';

export class UserService { /* 服务逻辑 */ }

// 导出显式的注册函数
export function registerUserService(module: angular.IModule) {
  module.service('userService', UserService);
}

// app.module.ts
import angular from 'angular';
import { registerUserService } from './user.service.ts';

const appModule = angular.module('app', []);

// 显式调用注册函数，建立依赖关联
registerUserService(appModule);

2. 利用Vite HMR API手动处理AngularJS模块更新 #

通过Vite的HMR API监听模块更新事件，手动销毁旧的AngularJS实例并重新初始化，实现局部刷新：

全局应用级HMR处理 #

// main.ts
import angular from 'angular';
import { createApp } from './app.module.ts';

// 初始化应用
let appInstance = createApp();

// 监听模块更新
if (import.meta.hot) {
  import.meta.hot.accept('./app.module.ts', (newModule) => {
    // 销毁旧应用实例
    angular.element(document.body).empty();
    // 创建新应用实例
    appInstance = newModule.createApp();
  });
}

其中createApp是封装的AngularJS应用初始化函数，示例：

// app.module.ts
export function createApp() {
  const appModule = angular.module('app', []);
  // 注册所有服务、指令、控制器
  return angular.bootstrap(document.body, ['app']);
}

单个服务/指令的精细HMR处理 #

// user.service.ts
import angular from 'angular';

export class UserService { /* 服务逻辑 */ }

export function registerUserService(module: angular.IModule) {
  module.service('userService', UserService);
}

// 监听当前模块更新
if (import.meta.hot) {
  import.meta.hot.accept(() => {
    const appModule = angular.module('app');
    // 移除旧服务的注册队列
    appModule._invokeQueue = appModule._invokeQueue.filter(item => 
      item[1] !== 'service' || item[2][0] !== 'userService'
    );
    // 注册新服务
    registerUserService(appModule);
    // 重新编译依赖该服务的DOM节点
    angular.element(document.querySelectorAll('[ng-controller]')).injector().invoke(['$compile', ($compile: angular.ICompileService) => {
      $compile(document.body)();
    }]);
  });
}

注：_invokeQueue是AngularJS内部私有API，仅建议在开发环境使用。

3. 调整TypeScript配置，防止未引用导入被Tree Shaking #

由于AngularJS的DI特性，部分导入未被直接引用，TypeScript可能会标记为无用代码被Vite Tree Shaking忽略，导致HMR失效。修改tsconfig.json：

{
  "compilerOptions": {
    "preserveValueImports": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false
  }
}

preserveValueImports会强制保留所有导入模块，确保Vite能追踪到依赖关系。

4. 渐进式迁移：用Svelte包裹AngularJS组件实现局部HMR #

在迁移过程中，将AngularJS组件包裹在Svelte组件内，利用Svelte成熟的HMR机制实现局部刷新：

<!-- AngularJSWrapper.svelte -->
<script lang="ts">
  import { onMount, onDestroy } from 'svelte';
  import angular from 'angular';

  let container: HTMLElement;
  let scope: angular.IScope;

  onMount(() => {
    // 编译并挂载AngularJS组件
    const element = angular.element('<div ng-controller="UserController"></div>');
    container.appendChild(element[0]);
    scope = element.injector().invoke(['$rootScope', ($rootScope) => $rootScope.$new()]);
    angular.element(element).compile()(scope);
    scope.$digest();
  });

  onDestroy(() => {
    // 销毁AngularJS作用域和DOM
    scope.$destroy();
    angular.element(container).empty();
  });
</script>

<div bind:this={container}></div>

修改AngularJS的UserController时，Svelte的HMR会自动刷新该包裹组件，无需全量刷新应用。

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