如何在Angular模板中展示项目依赖包的实际已安装版本号

结论先行 #

两个需求都可以实现：

• 可以正常读取项目依赖的版本号
• 即使使用~/^指定版本范围，也可以获取到当前实际安装的精确版本号

实现方案 #

方案1：直接读取对应依赖包的package.json（最推荐，可拿到实际安装版本） #

这个方案直接读取node_modules下对应依赖自身的package.json文件，拿到的就是当前已经安装的精确版本，不受根目录package.json中~/^版本范围的影响。

1. 先修改tsconfig.json，开启JSON模块导入支持：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    // 其余原有配置保持不变
  }
}

2. 在业务代码中导入对应依赖的package.json即可，例如读取@angular/core的版本：

import { Component } from '@angular/core';
// 导入目标依赖的package.json
import angularCorePkg from '@angular/core/package.json';

@Component({
  selector: 'app-version-demo',
  template: `<p>当前安装的Angular版本：{{ angularVersion }}</p>`
})
export class VersionDemoComponent {
  // 直接取version字段即可，为精确的实际安装版本
  angularVersion = angularCorePkg.version;
}

方案2：读取根目录package.json（仅能拿到声明的版本范围） #

如果你只需要展示你在package.json中声明的版本范围（带~/^符号），可以直接导入根目录的package.json：

// 按你项目的实际路径调整导入路径，src/app下的组件通常需要回退两层到根目录
import rootPkg from '../../package.json';

// 拿到的是你在dependencies中写的版本范围，例如 "^15.2.0"
const declaredAngularVersion = rootPkg.dependencies['@angular/core'];

注意：该方案默认会打包整个package.json的内容到前端产物中，可能泄露敏感配置信息，不推荐使用，建议只提取需要的字段做按需导入。

方案3：构建前生成版本配置文件（最安全） #

如果担心敏感信息泄露，可以通过构建钩子提前生成仅包含版本信息的配置文件：

1. 在项目根目录新建generate-versions.js脚本：

const fs = require('fs');
// 读取需要的版本信息
const appVersion = require('./package.json').version;
const rxjsVersion = require('rxjs/package.json').version;
const angularVersion = require('@angular/core/package.json').version;

// 生成ts文件内容
const fileContent = `
export const APP_VERSIONS = {
  app: '${appVersion}',
  rxjs: '${rxjsVersion}',
  angular: '${angularVersion}'
} as const;
`.trim();

// 写入到环境变量目录
fs.writeFileSync('./src/environments/versions.ts', fileContent);

2. 修改package.json的脚本，添加构建前钩子：

{
  "scripts": {
    "prestart": "node generate-versions.js",
    "prebuild": "node generate-versions.js",
    // 其余原有脚本保持不变
  }
}

3. 代码中直接导入生成的文件使用即可：

import { APP_VERSIONS } from '../environments/versions';

console.log(APP_VERSIONS.angular); // 实际安装的精确版本

常见疑问解答 #

• 使用~/^自动拉取最新版本时，能拿到实际安装版本吗？
  可以，上述方案1和方案3读取的都是node_modules中已安装的依赖自身的版本信息，和你根目录声明的版本范围无关，每次安装依赖后读到的都是当前实际安装的精确版本号。

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