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

Posted 2023-03-13

【中文标题】Angular2 AOT 编译与静态外部 js 文件

【英文标题】：Angular2 AOT Compilation with static external js file

【发布时间】：2017-10-10 14:21:20

【问题描述】：

根据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，然后我们使用OpaqueToken 将其注册到app.module。

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 和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() 除了返回一个空的IAppEnvConfig 对象之外，我会得到 ngc 错误。

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

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

提前致谢， 亚历克斯

【参考方案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()

【讨论】：

谢谢！你将如何在你的 app.module.ts 中注册它以便你可以将它与 DI 一起使用？你仍然使用 OpaqueToken 还是像使用服务一样注入？

嗯，这只是一堂普通课，所以我不认为你需要 DI。我从未使用过 OpaqueToken，但是我读到了一些关于它被 InjectionToken 取代的信息。尽管如此，这一切对我来说似乎都是多余的，因为 CLI 有一个内置选项：github.com/angular/angular-cli/wiki/…

正在进行中，基本上遵循您的回答:) 但是，我没有将 AppConfig 作为对象导出，而是将配置值设置为类属性。当它起作用时，我会接受你的回答！