Angular 5本地构建生成dist版本文件及在组件HTML显示的实现方法

嘿，我来帮你搞定这个Angular 5的版本显示问题！咱们分两步走，先搞定本地构建生成版本文件的逻辑，再实现组件里读取显示的功能。

首先，我们需要让本地构建（ng build）时自动在dist目录生成指定的版本文件，同时保证本地开发（ng serve）也能读取到验证用的版本内容：

1. 创建本地版本文件
   在src/assets目录下新建一个名为app-number-version的文件，内容随便写个开发用版本号，比如：

   0.0.1-dev
   

   把文件放在assets里是因为Angular CLI默认会把assets目录下的文件复制到开发和构建后的目录中，方便本地开发时访问。

2. 修改构建脚本，同步文件到dist根目录
   打开package.json，修改build脚本，让构建完成后把assets里的版本文件复制到dist根目录（和Cloud Foundry部署时生成的文件位置一致）：

   • 如果你用Mac/Linux，脚本改成这样：

     "scripts": {
       "ng": "ng",
       "start": "ng serve",
       "build": "ng build --prod && cp src/assets/app-number-version dist/",
       "test": "ng test",
       "lint": "ng lint",
       "e2e": "ng e2e"
     }
     

   • 如果你用Windows，把cp换成copy：

     "scripts": {
       "ng": "ng",
       "start": "ng serve",
       "build": "ng build --prod && copy src\\assets\\app-number-version dist\\",
       "test": "ng test",
       "lint": "ng lint",
       "e2e": "ng e2e"
     }
     

   • 想要跨平台兼容？可以先安装copyfiles工具：

     npm install copyfiles --save-dev
     

     然后脚本改成：

     "build": "ng build --prod && copyfiles -f src/assets/app-number-version dist/"
     

接下来，我们用Angular的HttpClient来读取版本文件，并在HTML中显示：

1. 导入HttpClientModule
   打开你的根模块（一般是AppModule），导入HttpClientModule，这样组件才能使用HttpClient：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { HttpClientModule } from '@angular/common/http'; // 导入这个
   import { AppComponent } from './app.component';
   import { NavbarComponent } from './navbar/navbar.component'; // 你的导航栏组件
   
   @NgModule({
     declarations: [
       AppComponent,
       NavbarComponent
     ],
     imports: [
       BrowserModule,
       HttpClientModule // 添加到imports数组
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

2. 在导航栏组件中读取版本文件
   打开你的导航栏组件（比如NavbarComponent），注入HttpClient，并在初始化时读取版本文件：

   import { Component, OnInit } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { environment } from '../../environments/environment'; // 导入环境配置
   
   @Component({
     selector: 'app-navbar',
     templateUrl: './navbar.component.html',
     styleUrls: ['./navbar.component.css']
   })
   export class NavbarComponent implements OnInit {
     public version: string = 'Loading...'; // 默认显示加载中
   
     constructor(private http: HttpClient) { }
   
     ngOnInit(): void {
       // 根据环境配置选择文件路径：开发时读assets下的，生产时读根目录的
       const filePath = environment.production ? '/app-number-version' : '/assets/app-number-version';
       
       this.http.get(filePath, { responseType: 'text' })
         .subscribe({
           next: (data) => {
             this.version = data.trim(); // 去掉可能的换行或空格
           },
           error: () => {
             this.version = 'Unknown'; // 读取失败时显示兜底内容
           }
         });
     }
   }
   

3. 在HTML中显示版本号
   打开导航栏的HTML模板（navbar.component.html），添加显示版本的元素：

   <nav class="navbar">
     <!-- 你的其他导航链接、logo等内容 -->
     <div class="navbar-version">
       Version: {{ version }}
     </div>
   </nav>
   

这样就搞定了！本地开发时用ng serve，会显示你在assets里写的开发版本号；执行ng build后，dist根目录会生成app-number-version文件，部署到Cloud Foundry时会被平台生成的文件覆盖，完全不影响生产环境的版本显示。

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