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>

在index.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，用于在部署时使用良好的api密钥创建真实的index.html。在index2.html中，将SNIPCART_API_KEY放在API密钥所在的位置。

安装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"

我没有测试这个解决方案但你应该得到主要想法。 ;）

如果我想到更轻松的话，我会编辑。清洁器。

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

1 个答案: