Angular 8 + TS 3环境下moment is not defined问题求助

我之前在Angular 8搭配TypeScript 3的项目里碰到过几乎一模一样的Moment.js使用问题，折腾了好一阵才搞定，给你几个亲测有效的排查和解决方向：

1. 确认依赖与类型定义的匹配性 #

TypeScript 3对类型定义的兼容性要求比TS2更严格，别只装moment，一定要同时安装对应版本的@types/moment，而且两者版本要尽量匹配：

npm install moment @types/moment --save

如果之前装过，建议删掉node_modules和package-lock.json后重新安装，避免版本不兼容的问题。

2. 调整TypeScript配置 #

打开tsconfig.json，在compilerOptions里添加或修改这几个配置项，让TS能正确识别Moment的CommonJS模块导出：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "types": ["moment"] // 全局引入类型定义，无需每个文件单独导入类型
  }
}

3. 优化导入方式 #

你之前用的import * as moment from 'moment';在TS3+Angular8里可能会有模块解析问题，改成默认导入试试：

import moment from 'moment';

如果还是想用命名空间导入，确保@types/moment的版本支持这种导入方式，比如2.29.x以上的@types/moment对两种导入都兼容。

4. 理解模块封装与全局调用的差异 #

你提到开发者工具看到webpack加载了moment，但控制台直接调用moment()失败——这很正常，因为Angular的模块是封装的，模块内的变量不会自动挂载到全局window对象上。如果要在控制台测试，得先在组件代码里手动挂载（仅用于测试，生产环境不建议）：

import moment from 'moment';
(window as any).moment = moment;

之后再去控制台调用moment()就能正常访问了。

5. 路由守卫中的使用优化 #

如果是路由守卫里的代码失效，建议把Moment的使用封装成Angular服务，比如创建一个MomentService：

import { Injectable } from '@angular/core';
import moment from 'moment';

@Injectable({ providedIn: 'root' })
export class MomentService {
  getUnixTimestamp(): number {
    return moment().unix();
  }
}

然后在路由守卫和AuthenticationHelper里注入这个服务，代替直接导入moment，这样能避免模块加载顺序的问题，也更符合Angular的依赖注入规范：

// 在AuthenticationHelper里注入MomentService
constructor(private momentService: MomentService) {}

// 替换原来的moment().unix()
this.momentService.getUnixTimestamp()

6. 全局脚本引入（可选方案） #

如果上面的方法都不行，可以尝试在angular.json的scripts数组里全局引入moment的JS文件：

"architect": {
  "build": {
    "options": {
      "scripts": [
        "./node_modules/moment/min/moment.min.js"
      ]
    }
  }
}

这种方式下，代码里不需要再import moment，直接使用全局的moment变量即可，记得确保@types/moment已经安装，避免TS报错。

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