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

Question

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

4

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

重要的是，script标签在index.html文件中可用，snipcart.com将检查此项以确保安全性。

我已经尝试在运行时执行此操作：将没有src-url的脚本标签添加到index.html文件中，然后在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",

谢谢，

祝好

Gerd

- Zambiorix

所以我需要在编译时设置API密钥。我的index.html在开发模式和生产模式下需要有所不同。我无法理解您是如何得出这个结论的。 - Günter Zöchbauer

snipcart.com会加载我的网站以验证脚本标签的存在（包括对src、id和data-api-key属性的验证）。如果我在main.ts中更新了脚本标签，这个验证就会失败。因此，我必须从一开始就设置正确的api-key，也就是说，在运行时不能更改... - Zambiorix

你尝试过将 index.html 进行模板化吗？也就是说，使用 Mustache 等工具，基于模板生成 index.html，并且可以将配置值传递给模板，这样就可以根据这些值生成 index.html。例如，对于 Grunt，可以使用 https://www.npmjs.com/package/grunt-mustache-render。 - asotog

谢谢asotog，我对Angular和JavaScript开发还比较新。我会研究一下的。 - Zambiorix

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rousseauo · Accepted Answer

您可以使用Gulp在部署应用程序之前插入API密钥。

您需要创建一个index2.html，该文件将用于在部署时创建真正的index.html并包含正确的API密钥。

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

我没有测试这个解决方案，但您应该能够理解主要思路。 ;)

如果我觉得有更简单、更清晰的方法，我会进行编辑。