Angular：如何添加独立TypeScript代码并让ng build自动转译

一、规划目录结构 #

在src目录下新建一个独立的公共代码目录（比如src/shared或src/utils），专门存放和组件无关的TypeScript代码。调整后的项目结构如下：

+- src
|  +- app/
|  |  +- components, etc
|  +- shared/  # 新增公共代码目录
|  |  +- utils/
|  |  |  +- date-helper.ts
|  |  +- app-constants.ts
|  +- index.html
|  +- main.ts
+- public
   +- js/
   +- css/

二、编写并导出TS代码 #

在新建的目录中编写通用逻辑，用ES模块语法导出需要对外暴露的内容。例如：

// src/shared/utils/date-helper.ts
export function formatDate(date: Date): string {
  return new Intl.DateTimeFormat('zh-CN').format(date);
}

export const APP_BUILD_VERSION = 'v2.0.1';

三、配置ng build自动转译并适配旧JS代码 #

场景1：旧代码是ESM模块 #

要让旧ESM代码能导入TS转译后的JS文件，需给Angular添加额外打包入口：

1. 在src/shared下创建index.ts，统一导出所有需要暴露的内容：

export * from './utils/date-helper';
export * from './app-constants';

2. 修改angular.json的build.options，添加additionalEntryPoints配置：

"build": {
  "options": {
    // 保留原有配置...
    "additionalEntryPoints": [
      {
        "input": "src/shared/index.ts",
        "output": "shared-utils"
      }
    ]
  }
}

执行ng build后，dist目录会生成shared-utils.js，你可以将其移动到public/js目录，或者直接让旧ESM代码从dist路径导入：

// public/js/old-esm-module.js
import { formatDate } from '../shared-utils.js';
console.log(formatDate(new Date()));

场景2：旧代码是全局脚本（非ESM） #

如果旧代码是直接在全局运行的，将TS方法挂载到window对象即可：

1. 在TS代码中添加全局挂载逻辑：

// src/shared/utils/date-helper.ts
export function formatDate(date: Date): string {
  return new Intl.DateTimeFormat('zh-CN').format(date);
}

// 挂载到window，供全局脚本调用
(window as any).formatDate = formatDate;

2. 在main.ts中导入该TS文件，确保它被打包进主bundle：

// src/main.ts
import './shared/utils/date-helper';
// 保留原有代码...

之后旧的全局JS代码就能直接调用formatDate()方法。

四、在新Angular组件中调用 #

直接用ES模块语法导入即可，和普通组件代码的调用方式一致：

// src/app/components/home/home.component.ts
import { formatDate, APP_BUILD_VERSION } from '../../shared/utils/date-helper';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent {
  ngOnInit() {
    console.log(formatDate(new Date()));
    console.log('当前版本：', APP_BUILD_VERSION);
  }
}

五、检查TS编译配置 #

确保tsconfig.app.json的include字段包含src下所有TS文件，保证新增代码能被TypeScript编译器处理：

"include": [
  "src/**/*.ts"
]

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