각도 2 index.html - 개발 및 생산을 위해 다릅니다

Question

각도 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> 

스크립트 태그는 index.html 파일에서 사용할 수있는 것이 중요하다, snipcart.com는 보안을 위해 그것을 확인합니다.

런타임시이 작업을 시도했습니다 : src-url없이 script.html 파일을 index.html 파일에 추가 한 다음 main.ts에서 올바른 api-key 값과 src-url로 태그 속성을 업데이트하십시오 .

그런 식으로 snipcart가 올바른 키로 실행되지만 snipcart.com에서 유효성 검사가 실패합니다.

그래서 컴파일 타임에 api-key를 설정해야합니다. 내 index.html은 개발 및 제작 모드에서 달라야합니다.

내 프로젝트는 각 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

당신은 당신의 응용 프로그램을 배포하기 전에 API 키를 삽입 할 꿀꺽를 사용할 수 있습니다. index2.html을 생성해야 배포시 좋은 api 키가있는 index.html 실제를 만드는 데 사용됩니다. index2.html에는 API 키가있는 곳의 SNIPCART_API_KEY을 입력합니다.

꿀꺽를 설치하고 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']); 

을 만들이 꿀꺽 파일이 package.json에있는 좋은 키를 사용하여 SNIPCART_API_KEY을 교체해야하고 index.html을 만들 수 있습니다.

필요한 경우 Gulp 작업을 호출하려면 package.json에 스크립트를 추가하십시오. 배포 프로세스에서 npm run prod으로 전화하여 프로덕션 키와 함께 index.html을 생성해야합니다.

또한 내가이 솔루션을 테스트하지 않았지만 메인 아이디어를 얻을해야 "start-dev":"gulp default && npm npm start"

같은 다른 스크립트를 만들 수

{ 
//... 
"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" } 
    } 
} 

package.json. ;)

더 편하게 생각한다면 편집 해 드리겠습니다. & 클리너.