angular2-starter 설정 파일 (환경 (테스팅, 프로덕션) 변수, 별칭 .env 또는 .conf)

Question

예를 들어 PHP Laravel과 같은 많은 프레임 워크에는 로컬 구성을 가진 파일 (dev, test, production 환경과 다릅니다)이 있습니다. angular-starter 프로젝트의 모든 로컬 환경 변수 값 (예 : Google Analytics, snetry.io 등의 키)을 포함하는 구성 파일을 제공하는 방법은 무엇입니까? AOT와도 작동 내가 솔루션을 다음과 같은 것을 제안

Answer 1

:

주요 디렉토리에있는 우리의 각도 스타트 프로젝트와 저장소에서

(어디 package.json, 고정 표시기 및 기타 상위 폴더 파일) 우리는 다음과 같은 몸을 가진 파일 .env.example.js을 만들 :

// copy this file to './.env.js' and modify variables in EnvData 

var Env = { 
    // If some of below variable is NULL then that varabile feature is off 
    google_analaytics : 'XX-YYYYYYYY-Z', 
    sentry_clientKey_publicDSN: 'https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx@sentry.io/yyyyyy', 
    // ... here you can put more variables 
}; 

module.exports = Env; 

그런 다음 우리는 .env.js에이 파일을 복사하고 마지막 .gitignore에 파일을 포함한다. 그리고 나서 파일 .env.example.js과 .gitignore을 git 저장소에 저지합니다.

index.html 웹 패킹을 생성 할 때 js 파일에서 작동하기 때문에 .ts (typescript) 대신 .js 파일을 사용합니다. 이제는 webpack 설정 파일에서이 변수를 사용하는 방법을 보여 드리겠습니다. 이제 ./config/webpack.common.js에 가서 코드 아래 찾아 줄을 추가하자

<% if (htmlWebpackPlugin.options.env.google_analaytics) { %> 
    <!-- Google Analytics: --> 
    <script> 
    (function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=r;A[l]=A[l]||function(){ 
    (A[l].q=A[l].q||[]).push(arguments)},A[l].l=1*new Date();a=n.createElement(g), 
    r=n.getElementsByTagName(g)[0];a.async=1;a.src=u;r.parentNode.insertBefore(a,r) 
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); 

    ga('create', '<%= htmlWebpackPlugin.options.env.google_analaytics %>', 'auto'); 
    ga('send', 'pageview'); 
    </script> 
    <% } %> 

그리고 타이프 라이터 모듈/컴포넌트/클래스 (.TS 내부 : 사용자가 변경할 수있는 구글 분석 섹션에서 ./src/index.html에 그런

new HtmlWebpackPlugin({ 
    template: 'src/index.html', 
    title: METADATA.title, 
    chunksSortMode: 'dependency', 
    metadata: METADATA, 
    inject: 'head', 
    env: require('../.env') // <-- new line 
    }), 

을에 파일) 당신은 우리가 예를 아래에 (예 방식으로 TS에 JS)를 가져옵니다 (변수 값을 사용할 수 있습니다)를 설치 보초를위한 것입니다

import * as Raven from 'raven-js'; // http://sentry.io 
import * as Env from '../../.env.js'; 
... 
let sentryDSN = Env['sentry_clientKey_publicDSN'] 
if(sentryDSN) 
{ 
    Raven.config(sentryDSN).install(); 
    ... 
} 
... 

그게 모든 :)