Angular 2 index.html - разный для разработки и производства

Question

Мне нужно реализовать снипкарту в моем проекте Angular 2. Тег скрипта ниже должен быть вставлен в заголовок моего файла 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 проверит это в целях безопасности.

Я попытался сделать это во время выполнения: добавьте тег script без src-url в файл index.html, а затем в main.ts обновите атрибуты тега, указав правильное значение ключа api и src-url.

Таким образом, snipcart работает с правильным ключом, но проверка на snipcart.com не проходит.

Поэтому мне нужно установить ключ API во время компиляции. Мой 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",

Спасибо,

ура

Герд

Answer 1

Вы можете использовать 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"

Я не тестировал это решение, но вы должны понять основную идею.;)

Я отредактирую, если я подумаю о чем-то более простом и чистом.