角度2のindex.html - 異なる開発・生産

Question

のための私は、角2プロジェクトにsnipcartを実装する必要があります。 以下のスクリプトタグは、私のindex.htmlファイルの先頭に挿入する必要があります。

ただし、data-api-keyは開発環境と本番環境で異なります。どのようにすればいいですか？

<script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" 
     id="snipcart" 
     data-api-key="insert-your-key-here"> 
</script> 

スクリプトタグは、index.htmlファイルで利用可能であることが重要である、snipcart.comはセキュリティ上の目的のためにそれをチェックします。

私は、実行時にこれを実行しようとしている： index.htmlファイルにSRC-urlにせずにスクリプトタグを追加してからmain.tsにタグが正しいAPIキー値とSRC-URLと属性を更新。

このようにsnipcartは正しいキーで実行されますが、snipcart.comからの検証は失敗します。

コンパイル時にapi-keyを設定する必要があります。私のindex.htmlは開発と生産モードで異なる必要があります。

"angular-cli": "1.0.0-beta.19-3", 

"@angular/common": "~2.1.0", 
"@angular/compiler": "~2.1.0", 
"@angular/core": "~2.1.0", 
"@angular/forms": "~2.1.0", 
"@angular/http": "~2.1.0", 
"@angular/platform-browser": "~2.1.0", 
"@angular/platform-browser-dynamic": "~2.1.0", 
"@angular/router": "~3.1.0", 

おかげで、あなたはあなたのアプリケーションを展開する前に、あなたのAPIキーを挿入するためにがぶ飲みを使用することができ

乾杯

ゲルト

Answer 1

：

私のプロジェクトは、角度CLIを使用して作成されます。 展開時に適切なapiキーを使用してindex.htmlを実際に作成するために使用されるindex2.htmlを作成する必要があります。 index2.htmlで は、APIキーがあることshoud SNIPCART_API_KEYを置きます。

このガルプファイルは、あなたのpackage.jsonで見つかっ良いキーでSNIPCART_API_KEYを交換し、index.htmlを作成する必要がありますがぶ飲みをインストールし、gulpfile.js

var gulp = require('gulp'); 
var package = require('./package.json'); 
var replace = require('gulp-replace'); 
var argv = require('yargs').argv; 
var gulpif = require('gulp-if'); 
var rename = require('gulp-rename'); 

gulp.task('snipcart', function() { 
    gulp.src(['index2.html']) 
    .pipe(gulpif(argv.production, replace("SNIPCART_API_KEY", package.config.prod.snipcart_api_key))) 
    .pipe(gulpif(!argv.production, replace("SNIPCART_API_KEY", package.config.dev.snipcart_api_key))) 
    .pipe(rename('index.html')) 
    .pipe(gulp.dest('.'')) 
}); 

gulp.task('default', ['snipcart']); 

を作成します。

必要に応じてGulpタスクを呼び出すには、package.jsonにスクリプトを追加できます。 あなたはそれが生産キーでのindex.htmlが作成されますので、あなたの展開プロセスでnpm run prodを呼び出す必要があります。

package.json

{ 
//... 
"scripts": { 
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ", 
    "prod": "gulp default --production", 
    "dev": "gulp default" 
    //... 
    } 
//... 
    "config" : { 
    "dev": { "snipcart_api_key" : "YOUR_KEY" }, 
    "prod": { "snipcart_api_key" : "YOUR_KEY" } 
    } 
} 

また、私はこのソリューションをテストしていないが、あなたがメインのアイデアを得る必要があります"start-dev":"gulp default && npm npm start"

のような他のスクリプトを作成することができます。 ;）

私は何か簡単に考えると編集します&クリーナー。