Angular2 AOT编译静态外部js文件

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 中，我们从 window 对象访问 envConfig，将其存储为常量，并导出常量 AppConfig，然后我们将其注册到 app.module 使用 OpaqueToken。

app-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 and 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

我在 getEnvConfig() 中添加了对 window == null 的检查，因为我认为 window 在非浏览器编译期间不可用。如果 getEnvConfig() 做了除 return 以外的任何事情，一个空的 IAppEnvConfig 对象我得到 ngc 错误。

我已经进行了大量的谷歌搜索，但除了指向使用工厂函数创建 class 的新实例的通用答案外，没有发现任何特定于我的问题的内容，我已经尝试过在这里做。

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

提前致谢，亚历克斯

Answer 1

我不确定这个解决方案是否适合您，但我 post 无论如何。我遇到了同样的问题，发现这个问题很容易解决。只需将您的函数放在 class 中。像这样：

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文件

Angular2 AOT Compilation with static external js file

angular2-aot

angular