Webpack Frontend Dotenv loader

app.component.html

<p>
  Convict: {{ convict | json }}
  Dotenv: {{ dotenv | json }}
</p>

app.component.ts

import { Component } from '@angular/core';
import { convict, dotenv } from './config';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  convict = convict;
  dotenv = dotenv;
}

config.ts

import * as loadedConvict from '!val-loader!./convict-loader';
import * as loadedDotenv from '!val-loader!./dotenv-loader';

export interface IConvict {
  env: 'production' | 'development' | 'test' | 'local' | 'stage';
  api: string;
}

export interface IDotenv {
  test: string;
}

export const convict = loadedConvict as IConvict;
export const dotenv = loadedDotenv as IDotenv;

convict-loader.js

const convict = require('convict');
const dotenv = require('dotenv');

dotenv.config();

const config = convict({
  env: {
    doc: 'The applicaton environment.',
    format: ['production', 'development', 'test', 'local', 'stage'],
    default: 'local',
    env: 'NODE_ENV',
  },
  api: {
    doc: 'The applicaton api.',
    format: String,
    default: 'localhost',
    env: 'API',
  },
});

// Perform validation
config.validate({ allowed: 'strict' });

module.exports = () => {
  return { code: 'module.exports = ' + JSON.stringify(config.getProperties()) };
};

dotenv-loader.js

const env = {
  test: process.env.TEST || 'default_Test2',
};

module.exports = () => {
  return { code: 'module.exports = ' + JSON.stringify(env) };
};

tsconfig.json

{
  ...
  "compilerOptions": {
    ...
    "typeRoots": [
      "typings.d.ts", <- add custom types
      "node_modules/@types"
    ],
    ...
  }
}

typings.d.ts

declare module '!val-loader!*' {
  const contents: any;
  export = contents;
}