Angular集成独立TypeScript单例库报错：无法读取instance属性

核心原因 #

你的Webpack配置针对Node.js环境构建，且未正确配置库导出格式，导致Angular无法正确识别模块导出的CodeLib类，进而出现Cannot read properties of undefined (reading 'instance')错误。

修复步骤 #

1. 修改Webpack配置文件 #

更新webpack.config.js，调整目标环境并添加库导出配置：

const path = require('path');

const config = {
  entry: {
    index: path.resolve(__dirname, 'src/index.ts')
  },
  // 移除target: 'node'，默认target为web（浏览器环境）
  module: {
    rules: [
      { // 补全规则的对象格式，原配置存在语法缺失
        test: /\.ts$/,
        exclude: [/node_modules/],
        loader: 'ts-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    // 配置跨模块兼容的库导出格式
    library: 'CodeLib',
    libraryTarget: 'umd',
    umdNamedDefine: true,
    globalObject: 'this' // 确保在浏览器/Node环境均能正常运行
  },
  mode: 'production'
}

module.exports = config;

2. 检查TypeScript配置（tsconfig.json） #

确保tsconfig.json的模块设置与Webpack兼容，同时生成Angular需要的类型声明：

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "declaration": true,
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

3. 重新构建并测试 #

• 重新打包库：执行npm run build
• 重新生成tarball并安装到Angular项目
• 在Angular组件中正常导入使用：

import { CodeLib } from 'libname';

ngOnInit() {
  CodeLib.instance.setToken('Hello World');
}

失败原因解析 #

• target: 'node'：Webpack会按照Node.js环境打包，使用Node专属的模块导出逻辑，而Angular运行在浏览器环境，无法正确解析该格式。
• 缺少library配置：Webpack默认不会将代码打包为可被外部项目导入的库格式，必须明确指定导出方式（如UMD），确保跨模块系统兼容。

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