基于环境变量排除Angular构建文件夹及混合应用代码按需构建咨询

一、通过环境变量+依赖注入区分两端业务代码 #

首先在Angular的环境配置中添加标识，用来区分当前构建的是桌面版还是Web版：

1. 在src/environments下创建两个环境文件：

   • environment.web.ts（Web版）：

     export const environment = {
       production: false,
       isDesktop: false
     };
     

   • environment.desktop.ts（桌面版）：

     export const environment = {
       production: false,
       isDesktop: true
     };
     

2. 定义通信服务的统一接口，再分别实现两端的具体逻辑：

   // 统一接口
   export abstract class CommunicationService {
     abstract sendMessage(data: any): void;
     abstract receiveMessage(callback: (data: any) => void): void;
   }
   
   // Web端实现（基于HttpClient）
   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   
   @Injectable()
   export class BrowserCommunicationService extends CommunicationService {
     constructor(private http: HttpClient) { super(); }
   
     sendMessage(data: any): void {
       this.http.post('/api/message', data).subscribe();
     }
   
     receiveMessage(callback: (data: any) => void): void {
       // 这里可实现WebSocket等Web端消息监听逻辑
     }
   }
   
   // 桌面端实现（基于WebView2消息机制）
   import { Injectable } from '@angular/core';
   
   @Injectable()
   export class DesktopCommunicationService extends CommunicationService {
     constructor() { super(); }
   
     sendMessage(data: any): void {
       window.chrome.webview.postMessage(data);
     }
   
     receiveMessage(callback: (data: any) => void): void {
       window.chrome.webview.addEventListener('message', (event) => {
         callback(event.data);
       });
     }
   }
   

3. 在根模块中根据环境变量动态注入对应的服务：

   import { NgModule } from '@angular/core';
   import { environment } from '../environments/environment';
   import { CommunicationService } from './services/communication.service';
   import { BrowserCommunicationService } from './services/browser-communication.service';
   import { DesktopCommunicationService } from './services/desktop-communication.service';
   
   @NgModule({
     providers: [
       {
         provide: CommunicationService,
         useClass: environment.isDesktop ? DesktopCommunicationService : BrowserCommunicationService
       }
     ]
   })
   export class AppModule { }
   

4. 在angular.json中配置构建选项，指定不同环境对应的文件替换：

   "architect": {
     "build": {
       "builder": "@angular-devkit/build-angular:browser",
       "options": {
         // 默认构建配置
       },
       "configurations": {
         "web": {
           "fileReplacements": [
             {
               "replace": "src/environments/environment.ts",
               "with": "src/environments/environment.web.ts"
             }
           ]
         },
         "desktop": {
           "fileReplacements": [
             {
               "replace": "src/environments/environment.ts",
               "with": "src/environments/environment.desktop.ts"
             }
           ]
         }
       }
     }
   }
   

Angular的Tree Shaking机制会自动移除未被注入的服务代码，确保Web版不包含桌面端实现，桌面版不包含Web端实现。

二、基于环境变量排除指定文件夹 #

如果需要直接排除整个文件夹（比如把桌面专属组件放在src/app/desktop，Web专属放在src/app/browser），可以通过不同的TypeScript配置文件实现：

1. 创建两个TS配置文件，继承主配置并添加排除规则：

   • tsconfig.web.json（Web版排除桌面文件夹）：

     {
       "extends": "./tsconfig.json",
       "exclude": [
         "src/app/desktop/**/*",
         "src/environments/environment.desktop.ts"
       ]
     }
     

   • tsconfig.desktop.json（桌面版排除Web文件夹）：

     {
       "extends": "./tsconfig.json",
       "exclude": [
         "src/app/browser/**/*",
         "src/environments/environment.web.ts"
       ]
     }
     

2. 在angular.json的构建配置中，为不同环境指定对应的TS配置：

   "architect": {
     "build": {
       "configurations": {
         "web": {
           "tsConfig": "tsconfig.web.json",
           "fileReplacements": [
             {
               "replace": "src/environments/environment.ts",
               "with": "src/environments/environment.web.ts"
             }
           ]
         },
         "desktop": {
           "tsConfig": "tsconfig.desktop.json",
           "fileReplacements": [
             {
               "replace": "src/environments/environment.ts",
               "with": "src/environments/environment.desktop.ts"
             }
           ]
         }
       }
     }
   }
   

3. 执行构建命令时指定对应环境：

   • 构建Web版：ng build --configuration web
   • 构建桌面版：ng build --configuration desktop

如果有专属资源文件（比如桌面版图标、配置），也可以在angular.json的assets配置中添加排除规则，确保无关资源不会被打包。

内容的提问来源于stack exchange，提问作者Praveen Kumar N