Question

由my question about Server-side rendering的答案指导，我正在考虑在我的Angular2应用程序中实现AOT编译。

我遇到的问题的一些背景知识：我们在Visual Studio Online中运行构建，运行webpack等，并提供运行正常的webapp。然后，我们在VSO中发布了一个不同环境的版本，它将一些值（环境，基本URL，重要键）放入env-config.js文件中。此env-config.js文件未捆绑并打包在应用程序中，但我们在Angular代码中将其作为全局js变量进行访问。

env-config.js

var envConfig = {
    'environment': 'local',
    'baseApiUrl': 'localhost:5555',
}

在app-config.ts中，我们从窗口对象访问envConfig，将其存储为常量，然后导出常量AppConfig，然后我们使用app.module注册OpaqueToken。

应用-config.ts

export function getEnvConfig(): IAppEnvConfig {
    if (window == null) {
        return {
            'environment': '',
            'baseApiUrl': ''
        };
    }
    else {
        return (window as any).envConfig;
    }
}

export const _envConfig: IAppEnvConfig = getEnvConfig();

export const AppConfig: IAppConfig = {
    applicationName: 'Web Application',
    environment: _envConfig.environment,
    baseApiUrl: _envConfig.baseApiUrl,
    otherSetting: 'someValue'
}

这在使用JIT编译器的浏览器中运行良好。我正在关注this和this以及其他教程的组合以启用AOT编译。

运行ngc会给我以下错误：

"node_modules/.bin/ngc" -p app/tsconfig-aot.json Error encountered 
resolving symbol values statically. Calling function 'getEnvConfig',  
function calls are not supported. Consider replacing the function or lambda 
with a reference to an exported function, resolving symbol AppConfig

我在window == null中添加了对getEnvConfig()的检查，因为在非浏览器编译期间我认为window不可用。如果getEnvConfig()执行除返回空IAppEnvConfig对象以外的任何操作，则会收到ngc错误。

我做了很多谷歌搜索，但除了指向使用工厂函数创建类的新实例的通用答案之外，我没有发现任何特定于我的问题，我试图在这里做。

很抱歉，如果这没有多大意义 - 请随时澄清/告诉我，我正在做一些非常愚蠢的事情。

提前致谢，亚历

Answer 1

我不确定这个解决方案是否适合您，但我会以任何方式发布。我遇到了同样的问题，问题很容易解决。简单地将您的功能放在一个类中。像这样：

export class AppConfig {
  _envConfig = AppConfig.getEnvConfig();
  AppConfig = {
    applicationName: 'Web Application',
    environment: this._envConfig.environment,
    baseApiUrl: this._envConfig.baseApiUrl,
    otherSetting: 'someValue'
  };

  static getEnvConfig() {
    if (window == null) {
      return {
        'environment': '',
        'baseApiUrl': ''
      };
    } else {
      return (window as any).envConfig;
    }
  }

  private constructor(){}
}

Angular2 AOT编译与静态外部js文件

1 个答案: