如何在Angular SharedModule中导出自定义工具函数供跨模块复用

首先要明确Angular模块exports数组的设计边界：它仅支持导出Angular可识别的类（组件、指令、管道）、其他NgModule，不支持直接导出纯TS函数/普通对象。如果把工具对象直接塞到exports数组里，不仅不会生效，还会触发编译报错。

结合你现有的代码结构，有三种可落地的实现路径，按适配度从高到低排列：

方案1：将工具函数包装为可注入服务（最贴合Angular设计） #

这是最常用的实现方式，完全不用在各功能组件里单独引入工具文件：

1. 新建可注入的工具服务，直接复用原有工具文件的逻辑，不需要修改原有实现：

   import { Injectable } from '@angular/core';
   import * as utility from '../shared/functions/helper-functions';
   
   @Injectable()
   export class UtilityService {
     // 把原有工具方法直接挂载到服务上
     readonly toCamelCase = utility.toCamelCase;
     // 其他原有工具方法都可以按照这个模式暴露
   }
   

2. 把这个服务注册到SharedModule的providers数组中（如果需要全局单例，也可以直接给装饰器加{ providedIn: 'root' }参数，不需要手动加到providers里）。
3. 各功能组件不需要再单独引入原工具文件，只需要通过依赖注入获取服务实例，就能调用方法：

   // 组件内部代码
   constructor(private util: UtilityService) {}
   
   // 调用方式和原来完全一致
   this.util.toCamelCase('your-test-string')
   

这种方式的优势：

• 完全符合Angular依赖注入的设计逻辑
• 后续如果工具函数需要依赖其他Angular能力（比如HttpClient、路由信息），可以直接在服务内部注入，纯函数无法实现这类能力
• 只要组件所属的模块引入了SharedModule，就能自动获取到服务实例，无需重复写工具文件的引入路径

方案2：将模板中使用的工具函数包装为管道 #

如果你的工具函数主要是在组件模板里使用，比服务更轻量的实现方式是把函数包装成管道：

1. 新建管道类，复用原有工具函数逻辑：

   import { Pipe, PipeTransform } from '@angular/core';
   import { toCamelCase } from '../shared/functions/helper-functions';
   
   @Pipe({ name: 'toCamelCase' })
   export class ToCamelCasePipe implements PipeTransform {
     transform(value: string): string {
       return toCamelCase(value);
     }
   }
   

2. 把这个管道同时加到SharedModule的declarations和exports数组里。
3. 所有引入了SharedModule的模块，不需要在组件类里做任何引入、注入操作，直接在模板里就能使用：

   {{ 'dash-separated-text' | toCamelCase }}
   

方案3：保留纯函数调用方式，通过TS路径别名简化引入路径 #

很多人会有认知误区：只要在SharedModule里用export * from把工具文件的导出重新抛出来，其他组件就不用单独引入了。实际上TS的模块作用域是文件级别的，不管模块怎么re-export，组件本身的作用域要拿到这些函数，还是必须写对应的import语句，Angular不会自动把这些符号注入到组件文件里。

如果不想把函数包装成服务/管道，只想要简化冗长的相对路径引入，可以通过TS配置的路径别名实现优化：

1. 在项目的tsconfig.json里配置路径映射，把工具文件的长相对路径映射成短路径：

   {
     "compilerOptions": {
       "baseUrl": "./",
       "paths": {
         "@shared/helpers": ["src/app/shared/functions/helper-functions.ts"]
       }
     }
   }
   

2. 之后哪怕组件要引入工具函数，也不需要写层层嵌套的相对路径，只需要写短路径即可：

   // 替换前：层级很深的相对路径
   // import * as utility from '../shared/functions/helper-functions';
   // 替换后：统一短路径
   import * as utility from '@shared/helpers';
   

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