Angular 12独立组件库如何显示package.json中的版本号？

方案一：构建前动态生成版本常量文件 #

1. 在库的src目录下创建version.ts文件，初始内容：

export const LIB_VERSION = '0.0.0';

2. 在组件中导入并使用该常量：

import { LIB_VERSION } from './version';

@Component({
  selector: 'lib-my-component',
  template: `<p>当前库版本：{{ libVersion }}</p>`
})
export class MyComponent {
  libVersion = LIB_VERSION;
}

3. 在根目录package.json的scripts中添加预构建脚本，自动从根目录package.json读取版本并替换version.ts内容：

"scripts": {
  "prebuild-lib": "node -e \"const fs = require('fs'); const pkg = require('./package.json'); fs.writeFileSync('./projects/lib-name/src/version.ts', 'export const LIB_VERSION = \\'' + pkg.version + '\\';');\""
}

4. 执行构建时先运行预脚本：npm run prebuild-lib && ng build lib-name，版本会自动注入到组件中。

方案二：用自定义Webpack注入全局版本变量 #

1. 安装自定义Webpack构建器：

npm install @angular-builders/custom-webpack --save-dev

2. 修改angular.json，将库的构建器替换为自定义Webpack构建器：

"projects.[lib-name].architect.build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "./projects/lib-name/webpack.config.js"
    },
    // 保留原有其他配置
  }
}

3. 在库目录下创建webpack.config.js，通过DefinePlugin注入版本：

const webpack = require('webpack');
const pkg = require('./package.json');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      LIB_VERSION: JSON.stringify(pkg.version)
    })
  ]
};

4. 在组件中声明全局变量并使用：

declare const LIB_VERSION: string;

@Component({
  selector: 'lib-my-component',
  template: `<p>当前库版本：{{ libVersion }}</p>`
})
export class MyComponent {
  libVersion = LIB_VERSION;
}

方案三：复制package.json到src目录（简易版） #

1. 在tsconfig.lib.json中开启JSON模块支持：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    // 保留原有其他配置
  }
}

2. 添加脚本自动复制根目录package.json到src目录（避免手动同步）：

"scripts": {
  "prebuild-lib": "cp package.json projects/lib-name/src/"
}

3. 在.gitignore中添加projects/lib-name/src/package.json，避免提交冗余文件。
4. 在组件中导入并使用：

import pkg from './package.json';

@Component({
  selector: 'lib-my-component',
  template: `<p>当前库版本：{{ pkg.version }}</p>`
})
export class MyComponent {
  pkg = pkg;
}

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