Primeiro, instale @types/node para que possamos usar process.env em nosso código.
npm install --save-dev @types/node
# Or with yarn
yarn add --dev @types/node
Em seguida, atualize os targets build e serve (no arquivo project.json ou angular.json), para o seguinte.
{
"build": {
// NOTA: altere o executor para um que suporte configurações personalizadas do webpack.
"executor": "@nrwl/angular:webpack-browser",
// recorte
"options": {
// NOTE: This file needs to be created.
"customWebpackConfig": {
"path": "apps/myapp/webpack.config.js"
}
// recorte
}
},
"serve": {
// NOTA: altere o executor para um que suporte configurações personalizadas do webpack.
"executor": "@nrwl/angular:webpack-server"
// recorte
}
}
Então, podemos usar DefinePlugin em nossa configuração webpack personalizada.
// apps/myapp/webpack.config.js
const webpack = require('webpack');
function getClientEnvironment(configuration) {
// Grab NODE_ENV and MY_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in webpack configuration.
const MY_APP = /^MY_APP_/i;
const raw = Object.keys(process.env)
.filter((key) => MY_APP.test(key))
.reduce(
(env, key) => {
env[key] = process.env[key];
return env;
},
{
NODE_ENV: process.env.NODE_ENV || configuration,
}
);
// Stringify all values so we can feed into webpack DefinePlugin
return {
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
};
}
module.exports = (config, options, context) => {
config.plugins.push(
new webpack.DefinePlugin(getClientEnvironment(context.configuration))
);
return config;
};
Agora, quando definimos variáveis em nosso arquivo .env, como...
# apps/myapp/.env
MY_APP_API_URL=http://localhost:3333
Finalmente, podemos usar variáveis de ambiente em nosso código. Por exemplo:
// apps/myapp/src/main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
if (process.env['NODE_ENV'] === 'production') {
enableProdMode();
}
// This is defined in our .env file.
console.log('>>> MY_APP_API_URL', process.env['MY_APP_API_URL']);
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch((err) => console.error(err));
Você também deve atualizar os arquivos tsconfig.app.json e tsconfig.spec.json para incluir tipos do node.
{
"extends": "./tsconfig.json",
"compilerOptions": {
// recorte
"types": ["node"]
}
// recorte
}
Agora basta servir a aplicação e sua variável estará no console do browser : )
Nota:
Isso foi testado em ambiente com versões:"@nrwl/angular": "^14.4.3", "@nrwl/workspace": "14.4.3"
valeu
[]s
Top comments (0)