Angular 2 index.html - 与开发和生产不同

Question

我需要在我的angular 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>

java.html文件中的脚本标记很重要,snipcart.com会出于安全考虑进行检查.

我试图在运行时执行此操作:在index.html文件中添加不带src-url的脚本标记,然后在main.ts中使用正确的api-key值和src-url更新标记属性.

这样,snipcart会使用正确的密钥运行,但来自snipcart.com的验证失败.

所以我需要在编译时设置api-key.我的index.html在开发和生产模式上需要有所不同.

我的项目是使用angular cli创建的:

"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",

谢谢,

干杯

格尔德

Answer 1

在部署应用程序之前,您可以使用Gulp插入API密钥.您需要创建一个index2.html用于index.html在部署时使用良好的api密钥创建实际内容的方法.在index2.html,放在SNIPCART_API_KEYAPI密钥的位置.

安装Gulp并创建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文件应该替换SNIPCART_API_KEY你在你的好键中package.json创建一个index.html.

要在需要时调用Gulp任务,您可以在自己的脚本中添加一些脚本package.json.您需要调用npm run prod部署过程,以便使用生产密钥创建index.html.

的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"

我没有测试这个解决方案,但你应该得到主要的想法.;)

如果我想到更容易和更清洁的东西,我会编辑.