1

Im trying to hide api key in my angular project environment using @angular-builders/custom-webpack which will fetch value from system environment variable through process.env during build .

But after sucessful build , i'm still able to see the actual value in main.js file.

//custom.webapack.config
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      "nvar": {
        ENVIRONMENT: JSON.stringify(process.env.ENVIRONMENT),
        SomeAPIKey: JSON.stringify(process.env.DDSK),
        SomeOtherAPIKey: JSON.stringify(process.env.SomeOtherAPIKey)
      }
    })
  ]
};

//typings.d.ts


declare var nvar: Env;

interface Env {
    ENVIRONMENT: string;
    SomeAPIKey: string;
    SomeOtherAPIKey: string;
  }

environment.ts

export const environment = {
  production: true,
  apiURL: 'some api url',
  appUrl:''some url,
  googleClientId:'client key',
  __dds:nvar.SomeAPIKey
}

//angular.json


"builder":"@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path":"custom-webpack.config.js"
          },

Output


enter image description here

Naveenkumar A
  • 21
  • 1
  • 4

0 Answers0