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