如何在Angular组件中读取pom.xml版本并获取部署后最新版本

我之前也遇到过完全一样的需求——要把Maven项目pom.xml里的版本号同步到Angular前端展示，而且每次部署都得拿到最新的版本值。下面是我验证过的可行方案，一步步来：

第一步：用Maven资源过滤生成版本信息文件 #

首先我们得让Maven把pom里的版本号输出成一个Angular能读取的静态文件：

• 在项目的src/main/resources目录下创建一个version.json文件，内容如下：

{"version": "${project.version}"}

• 打开pom.xml，找到<build>节点，添加资源过滤配置，让Maven构建时自动替换${project.version}为实际版本号：

<build>
  <resources>
    <resource>
      <directory>src/main/resources</directory>
      <filtering>true</filtering>
      <includes>
        <include>version.json</include>
      </includes>
    </resource>
  </resources>
  <!-- 保留你原有的其他build配置 -->
</build>

执行Maven构建后，target/classes目录下的version.json就会被替换成真实版本的内容，比如{"version": "1.0.13.0-dev"}。

第二步：把版本文件放到Angular可访问的静态资源目录 #

接下来要把生成好的version.json复制到Angular的静态资源目录（比如assets），这样前端能通过HTTP请求获取它。我们可以用Maven的maven-resources-plugin自动完成这个操作：
在pom.xml的<build>里添加插件配置：

<plugin>
  <groupId>org.apache.maven.plugins</groupId>
  <artifactId>maven-resources-plugin</artifactId>
  <version>3.3.1</version>
  <executions>
    <execution>
      <id>copy-version-file</id>
      <phase>process-resources</phase>
      <goals>
        <goal>copy-resources</goal>
      </goals>
      <configuration>
        <!-- 替换成你实际的Angular dist/assets路径 -->
        <outputDirectory>${project.basedir}/src/main/webapp/dist/assets</outputDirectory>
        <resources>
          <resource>
            <directory>target/classes</directory>
            <includes>
              <include>version.json</include>
            </includes>
          </resource>
        </resources>
      </configuration>
    </execution>
  </executions>
</plugin>

⚠️ 注意：outputDirectory要根据你的项目结构调整，比如如果Angular项目在根目录的frontend文件夹下，路径可能是${project.basedir}/frontend/dist/frontend/assets。

第三步：Angular中创建服务读取版本信息 #

在Angular项目里生成一个专门的版本服务，用来读取刚才的json文件：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

// 定义版本信息的接口
interface VersionInfo {
  version: string;
}

@Injectable({
  providedIn: 'root'
})
export class VersionService {
  constructor(private http: HttpClient) { }

  getVersion(): Observable<VersionInfo> {
    // 添加no-cache请求头，避免浏览器缓存旧版本
    return this.http.get<VersionInfo>('/assets/version.json', {
      headers: { 'Cache-Control': 'no-cache' }
    });
  }
}

第四步：在组件中使用服务展示版本号 #

比如在你的根组件（app.component）里注入这个服务，获取并展示版本号：

import { Component, OnInit } from '@angular/core';
import { VersionService } from './version.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  appVersion: string = '加载中...';

  constructor(private versionService: VersionService) { }

  ngOnInit(): void {
    this.versionService.getVersion().subscribe(
      (info) => {
        this.appVersion = info.version;
      },
      (error) => {
        console.error('加载版本号失败:', error);
        this.appVersion = '未知版本';
      }
    );
  }
}

然后在组件模板里渲染：

<p>当前应用版本：{{ appVersion }}</p>

额外注意事项 #

• 每次执行mvn clean install构建项目时，Maven都会自动更新version.json的版本号，部署后Angular就能拿到最新值。
• 如果你的Angular是单独部署的，只要确保构建时把生成的version.json复制到Angular的dist/assets目录，一起部署即可。
• 关于缓存：除了请求头，如果你还想更保险，可以在构建时给version.json加版本后缀（比如version-1.0.13.0-dev.json），不过这种方式需要在Angular里动态拼接文件名，相对麻烦，用no-cache请求头已经能解决大部分场景的缓存问题。

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