2017-05-11 8 views
0

my question about Server-side renderingへの回答に基づいて、私はAngular2アプリでAOTコンパイルを実装しています。Angular2 AOT静的外部jsファイルを使用したコンパイル

問題のバックグラウンド私は、Visual Studio Onlineで実行されているビルドがwebpackなどを実行しており、機能するWebアプリケーションを提供しています。次に、さまざまな環境(環境、ベースURL、重要なキー)をenv-config.jsファイルに格納する異なる環境へのVSOのリリースを行います。このenv-config.jsファイルは、アプリケーション内にバンドルされてパッケージ化されていませんが、Angularコード内のグローバル変数としてアクセスします。 app-config.ts

ENV-config.jsの

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

、我々は定数としてこれを保存、ウィンドウオブジェクトからenvConfigにアクセスし、我々は次にOpaqueTokenを用いapp.moduleに登録定数AppConfigをエクスポート。

アプリ-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コンパイラでブラウザで実行されているだけでなく実際に動作します。私は、thisthisの組み合わせと、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は、ブラウザ以外のコンパイル時に利用できるようになるとは思わないので、私はgetEnvConfig()window == nullのチェックを追加しました。 getEnvConfig()が空のIAppEnvConfigオブジェクトを返す以外の処理を行うと、ngcエラーが発生します。

私は多くのGoogle検索を行っていますが、私がここでやろうとしたクラスの新しいインスタンスを作成するためのファクトリ関数の使用を指している一般的な答え以外は何も見つかりませんでした。

申し訳ありません申し訳ありませんがそれほど意味がありません - 私は非常にばかげた何かをやっていることを明確にする/私に教えてください。事前に

おかげで、 アレックス

答えて

0

は、私は、このソリューションがあなたに合うかどうかわからないんだけど、私はそれをどのような方法を投稿してください。私は同じ問題に直面し、問題を解決するのは非常に簡単でした。関数をクラスに入れるだけです。このようなもの:

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

ありがとうございます!これをあなたのapp.module.tsにどのように登録して、それをDIと共に使うことができますか?あなたはまだOpaqueTokenを使用していますか、あるいは単にサービスと同じように注入しますか? – Alex

+0

これは普通のクラスなので、DIが必要だと思いません。私はOpaqueTokenを使ったことは一度もありませんが、InjectionTokenに置き換えられていることを読んでいます。それほど、これはすべて私にとって過酷なものではないようですが、CLIにはこのためのオプションが組み込まれています:https://github.com/angular/angular-cli/wiki/stories-application-environments –

+0

これはどのように機能しましたか? –

関連する問題