Angular 5构建报错“Property does not exist on type”如何解决？

这个问题我在做Angular Universal项目时也碰到过，本质是生产环境配置缺失加上SSR场景下的环境适配问题，给你一步步的修复方案：

1. 先解决prod构建的核心错误 #

你看到的TS2339错误，是因为生产环境的配置文件里没定义wpBase属性——开发时用的environment.ts有这个属性，所以项目能正常跑，但执行ng build --prod时，Angular会切换到environment.prod.ts，而这个文件里只有默认的production: boolean属性，自然找不到wpBase。

修复步骤： #

• 打开src/environments/environment.prod.ts，添加和开发环境一致的wpBase属性：

export const environment = {
  production: true,
  wpBase: '你的生产环境WordPress API地址' // 和environment.ts里的配置结构保持一致
};

• 为了避免后续再出现这类类型不匹配问题，可以给环境配置加个统一的类型约束：
  在environment.ts里定义接口：

export interface AppEnvironment {
  production: boolean;
  wpBase: string;
}

export const environment: AppEnvironment = {
  production: false,
  wpBase: '开发环境WP API地址'
};

然后在environment.prod.ts里继承这个接口：

import { AppEnvironment } from './environment';

export const environment: AppEnvironment = {
  production: true,
  wpBase: '生产环境WP API地址'
};

2. Angular Universal场景下的额外适配 #

因为你正在做SSR，还要考虑服务端渲染时的环境配置问题——服务端不会直接读取客户端的environment文件，需要手动传递环境变量：

调整服务端配置（server.ts）： #

// 在server.ts中，先定义服务端的环境变量
const serverEnvironment = {
  production: true,
  wpBase: process.env.WP_API_URL || '默认生产环境WP地址' // 可以通过系统环境变量注入，更灵活
};

// 渲染AppServerModule时，把服务端环境注入到应用中
const app = await AppServerModuleNgFactory.create(platformServer, {
  providers: [
    { provide: APP_BASE_HREF, useValue: req.baseUrl },
    { provide: 'SERVER_ENVIRONMENT', useValue: serverEnvironment }
  ]
});

调整ProjectsService适配SSR： #

把直接导入environment改成依赖注入的方式，这样客户端和服务端都能正确获取wpBase：

import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';
import { Headers } from '@angular/http';

@Injectable()
export class ProjectsService {
  private _wpBase: string;

  constructor(
    @Inject('SERVER_ENVIRONMENT') private serverEnv: any,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {
    // 判断当前是客户端还是服务端，获取对应环境的wpBase
    if (isPlatformServer(this.platformId)) {
      this._wpBase = this.serverEnv.wpBase;
    } else {
      import('../../environments/environment').then(env => {
        this._wpBase = env.environment.wpBase;
      });
    }
  }
}

3. 验证修复效果 #

修改完成后，先执行ng build --prod确认构建报错消失，再启动Universal服务验证SSR场景下wpBase能正常读取。如果还有问题，检查angular.json里的生产环境配置，确保fileReplacements正确指向了environment.prod.ts：

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    // 其他prod配置项...
  }
}

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