使用Webpack打包TypeScript编写的AngularJS库后无法被其他项目识别

嘿，我之前也踩过类似的AngularJS模块打包坑，咱们一步步拆解问题、解决它：

1. 先确认AngularJS模块的导出是否正确 #

AngularJS的模块本质是字符串名称，你的入口文件mylib.module.ts必须明确导出这个名称，否则Webpack的UMD打包无法正确暴露模块。比如：

import * as angular from 'angular';

// 定义并注册你的组件、指令等
const myLibModule = angular.module('myLib', [])
  .component('myComponent', {
    template: '<div>My Component</div>'
  })
  .name; // 关键：获取模块的名称字符串

// 导出这个名称，供外部引用
export default myLibModule;

2. 调整Webpack配置的细节 #

你的现有配置已经用了umd目标，但补充两个关键配置可以避免环境兼容问题：

module.exports = {
  entry: './mylib.module.ts',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'my-lib.js',
    library: 'mylib',
    libraryTarget: 'umd',
    globalObject: 'this', // 兼容浏览器/Node等不同环境的全局对象
    libraryExport: 'default' // 明确导出默认项（对应你在TS中export default的模块名）
  },
  externals: {
    angular: 'angular' // 关键：不要把AngularJS打包进你的库，避免外部项目重复加载导致冲突
  },
  // 确保你配置了TypeScript loader，比如ts-loader
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  }
};

3. 检查外部项目的引入方式 #

在其他AngularJS项目中，必须保证加载顺序和依赖声明正确：

• 先加载AngularJS，再加载你的库：

<script src="path/to/angular.min.js"></script>
<script src="path/to/my-lib.js"></script>

• 在主模块中依赖你的库模块：

// 这里的'myLib'就是你在library模块中定义的名称
angular.module('myApp', ['myLib']);

如果用模块加载器（比如RequireJS），要正确获取UMD导出的模块名：

require(['angular', 'path/to/my-lib'], function(angular, myLibModuleName) {
  angular.module('myApp', [myLibModuleName]);
});

4. 验证打包后的文件 #

可以直接打开my-lib.js，搜索UMD相关代码，确认它正确导出了你的模块名称。比如应该能看到类似逻辑：

// 示例UMD导出片段
if (typeof exports === 'object' && typeof module === 'object')
  module.exports = factory(require("angular"));
else if (typeof define === 'function' && define.amd)
  define(["angular"], factory);
else if (typeof exports === 'object')
  exports["mylib"] = factory(require("angular"));
else
  root["mylib"] = factory(root["angular"]);

这里的factory函数应该返回你导出的AngularJS模块名称字符串，这样外部才能拿到它去做依赖声明。

按这个流程排查下来，基本就能解决“模块找不到”的问题了。

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