Angular 8生产模式下出现exports is not defined错误求助

我帮你排查了一下这个问题，你遇到的生产模式启动时exports is not defined错误，主要和两个核心点有关：

核心原因分析 #

1. tsconfig模块配置冲突
   你把compilerOptions里的module设置成了UMD，但Angular 8的生产构建依赖ES模块（比如es2015）来做tree-shaking、代码压缩等优化。UMD是通用模块格式，开发模式下devServer的宽松解析能正常运行，但生产模式下webpack和ngc的严格模块处理会导致全局导出变量异常，从而抛出exports is not defined。

2. 直接导入JSON的生产兼容性问题
   开发模式下TypeScript的resolveJsonModule和esModuleInterop能让你直接导入JSON文件，但生产构建时，Angular的打包流程对这种模块导入的处理和开发环境不一致，容易出现模块导出的语法兼容问题。

具体解决方案 #

方案1：修正tsconfig的module配置（快速修复） #

先把tsconfig.json里的module从UMD改回Angular 8默认的es2015，这是最快解决问题的方式：

{
  "compileOnSave": true,
  "compilerOptions": {
    // ... 其他配置保持不变
    "module": "es2015", // 替换原来的UMD
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

修改后执行ng build --prod重新构建，应该就能解决报错。

方案2：改用HttpClient加载配置（推荐长期方案） #

直接导入JSON虽然方便，但在Angular生产环境中不是最稳妥的方式，推荐用HttpClient加载assets目录下的配置文件，同时利用APP_INITIALIZER确保应用启动前完成配置加载：

1. 保留environment.ts的默认配置

// environment.ts
export const environment = {
  production: false,
  baseUrl: "http://localhost:57973",
  loginUrl: "/Login",
  adminUrl: "/Admin",
  userIdleMinutes: "10",
  corePingIntervalSeconds: "10"
};

2. 创建配置服务
   新建src/app/config.service.ts：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class ConfigService {
  constructor(private http: HttpClient) {}

  loadConfig(): Promise<void> {
    return this.http.get('/assets/config.json')
      .toPromise()
      .then((config: any) => {
        // 用JSON配置覆盖默认环境变量
        const settings = config.settings;
        environment.production = settings.production;
        environment.baseUrl = settings.baseUrl;
        environment.loginUrl = settings.loginUrl;
        environment.adminUrl = settings.adminUrl;
        environment.userIdleMinutes = settings.userIdleMinutes;
        environment.corePingIntervalSeconds = settings.corePingIntervalSeconds;
      })
      .catch(err => {
        console.error('加载配置文件失败:', err);
        return Promise.resolve(); // 即使加载失败，应用也能继续启动
      });
  }
}

3. 配置APP_INITIALIZER
   修改src/app/app.module.ts，确保应用启动前加载配置：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ConfigService } from './config.service';

// 初始化函数，加载配置
export function initConfig(configService: ConfigService) {
  return () => configService.loadConfig();
}

@NgModule({
  imports: [HttpClientModule], // 别忘了导入HttpClientModule
  providers: [
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: initConfig,
      deps: [ConfigService],
      multi: true
    }
  ]
})
export class AppModule { }

这种方式不仅能解决生产构建的报错，还能让配置文件在构建后可以直接修改（不用重新打包），更灵活。

方案3：自定义webpack配置（不推荐） #

如果你的项目自定义了webpack配置，可以添加对JSON文件的明确处理，但Angular 8默认已经支持JSON解析，所以除非你有特殊需求，不建议用这种方式，因为会增加构建配置的复杂度。

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