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>

脚本标签在 index.html 文件中可用很重要，snipcart.com 将出于安全目的进行检查。

我试过在运行时这样做：在 index.html 文件中添加不带 src-url 的脚本标签，然后在 main.ts 中使用正确的 api-key 值和 src-[=46 更新标签属性=].

这样 snipcart 使用正确的密钥运行，但 snipcart.com 的验证失败。

所以我需要在编译时设置api键。我的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 - 开发和生产不同

Angular 2 index.html - different for development and production

snipcart

angular