2017-05-11 1 views
0

Dirigé par la réponse à my question about Server-side rendering, je cherche à implémenter la compilation AOT dans mon application Angular2. Un peu d'arrière-plan au problème que j'ai: nous avons une version de Visual Studio Online, qui exécute webpack etc, et une version webapp fonctionnant. Nous avons ensuite une version dans VSO pour différents environnements qui met des valeurs (environnement, base urls, clés importantes) dans un fichier env-config.js. Ce fichier env-config.js n'est pas fourni et empaqueté dans l'application, mais nous y accédons en tant que variable js globale dans notre code angulaire.Angular2 AOT Compilation avec fichier js externe statique

env-config.js

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

Dans app-config.ts, nous avons accès à envConfig de l'objet de la fenêtre, stocker cela comme une constante, et d'exporter la AppConfig constante, que nous enregistrons alors à l'aide d'un app.moduleOpaqueToken .

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' 
} 

Cela fonctionne vraiment bien en cours d'exécution dans le navigateur avec le compilateur JIT. Je suis une combinaison de this et this et d'autres tutoriels pour activer la compilation AOT.

Courir MBAC me donne l'erreur suivante:

"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 

J'ai ajouté le chèque pour window == null en getEnvConfig() parce que je ne pense pas window sera disponible lors de la compilation non-navigateur. Si getEnvConfig() fait autre chose que de retourner un objet IAppEnvConfig vide, j'obtiens l'erreur ngc. J'ai fait beaucoup de googling, mais je n'ai trouvé rien de spécifique à mon problème, autre que des réponses génériques pointant vers l'utilisation d'une fonction factory pour créer une nouvelle instance d'une classe, ce que j'ai essayé de faire ici. Désolé si cela n'a pas beaucoup de sens - s'il vous plaît n'hésitez pas à obtenir des éclaircissements/dites-moi que je fais quelque chose d'incroyablement stupide.

Merci à l'avance, Alex

Répondre

0

Je ne sais pas si cette solution vous conviendra, mais je l'afficher aucune façon. J'ai fait face au même problème et le problème était assez facile à résoudre. Mettez simplement vos fonctions dans une classe. Quelque chose comme ceci:

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(){} 
} 
+0

Merci! Comment l'enregistrer dans votre app.module.ts pour que vous puissiez l'utiliser avec le DI? Utilisez-vous toujours l'OpaqueToken ou injectez-vous simplement comme si vous étiez un service? – Alex

+0

Eh bien, c'est juste un cours régulier, je ne pense pas que vous ayez besoin de DI. Je n'ai jamais travaillé avec OpaqueToken, cependant j'ai lu quelque chose sur le fait qu'il soit remplacé par InjectionToken. Néanmoins, tout cela me semble trop compliqué et la CLI a une option intégrée pour cela: https://github.com/angular/angular-cli/wiki/stories-application-environments –

+0

Comment cela a-t-il fonctionné? ? –