Environment separation for Angular, WebPack and TypeScript

web-frontend-environment-separation.md

Introduction

This is a simple overview on how to build to various environment. Note: This does not solve a CD way of doing this, however, its a pointer to how to solve it.

Components

• Angular 5
• WebPack 3
• TypeScript

Configuration

WebPack

The following configuration helps on defining both services and how to load the services as properties in to plugins. environment-specific configuration (e.g webpack.dev.js):

const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, { 
.. 
API: {myWebService: 'http://anywhere.com/public', mySecondWebService: 'https://any-other-service.com/private'}, 
.. 
}

environment-generic configuration (e.g webpack.common.js): ..  plugins: [   new DefinePlugin({     ..     'API': JSON.stringify(METADATA.API),     '__VERSION__': (JSON.stringify(process.env.npm_package_version.trim() + '.' + childProcess.execSync('git rev-list HEAD --count').toString().trim() + '.' + childProcess.execSync('git rev-list HEAD --abbrev-commit --max-count=1').toString().trim()))     ..    })   ] .. 

Angular

Configuration of custom typings

This file will be prefilled by webPack polyfill (custom-typings.d.ts):

  declare var API: any; declare var VERSION: string; interface GlobalEnvironment {  API: any,  VERSION: string, }

Usage anywhere in code Usage in any (ts) file:

 API.myWebService + `/whatever/${anything}` API.mySecondWebService + '/some/service'