如何通过代码获取Angular版本并在网站中显示？

当然可以！有几种实用的方法能帮你在Angular应用里获取版本信息并展示在页面上，我给你整理了最常用的几个方案：

方法1：直接导入内置的VERSION常量（Angular 6+） #

Angular从6版本开始，就提供了一个内置的VERSION常量，这是最简单直接的方式：

import { Component } from '@angular/core';
import { VERSION } from '@angular/core';

@Component({
  selector: 'app-version-display',
  template: `<p>当前Angular版本：{{ angularVersion }}</p>`
})
export class VersionDisplayComponent {
  // 直接拿到完整版本号，比如 "16.2.0"
  angularVersion = VERSION.full;
  // 也可以单独获取主/次/补丁版本号
  // majorVersion = VERSION.major;
  // minorVersion = VERSION.minor;
}

方法2：从package.json读取版本（适合多版本展示） #

如果你不仅想展示Angular的版本，还想展示项目自身的版本，或者偏好从package.json里读取依赖版本，可以用这种方式：

1. 首先确保你的tsconfig.json里开启了resolveJsonModule和esModuleInterop（如果还没配置的话）：

{
  "compilerOptions": {
    // 其他配置...
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

2. 然后在组件里直接导入package.json并读取对应字段：

import { Component } from '@angular/core';
import packageJson from '../package.json';

@Component({
  selector: 'app-version-info',
  template: `
    <p>项目版本：{{ packageVersion }}</p>
    <p>Angular核心版本：{{ angularCoreVersion }}</p>
  `
})
export class VersionInfoComponent {
  packageVersion = packageJson.version;
  angularCoreVersion = packageJson.dependencies['@angular/core'];
}

注意：生产构建时，如果遇到打包问题，可以在angular.json的build配置里调整assets选项，确保package.json被正确包含。

方法3：构建时注入环境变量（生产环境推荐） #

如果想在构建阶段动态注入版本信息，避免把整个package.json打包到应用中（更安全轻量化），可以用环境变量的方式：

1. 在src/environments/environment.ts里预留版本字段：

export const environment = {
  production: false,
  appVersion: '',
  angularVersion: ''
};

2. 在angular.json的build配置中，添加define选项（Angular 14+支持），利用npm的内置变量注入版本：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // 其他配置...
    "define": {
      "ENVIRONMENT.appVersion": "\"${npm_package_version}\"",
      "ENVIRONMENT.angularVersion": "\"${npm_package_dependencies_@angular_core}\""
    }
  }
}

3. 最后在组件里使用这些注入的变量：

import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-build-version',
  template: `
    <p>应用构建版本：{{ environment.appVersion }}</p>
    <p>Angular版本：{{ environment.angularVersion }}</p>
  `
})
export class BuildVersionComponent {
  environment = environment;
}

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