Сначала установите @types/node
, чтобы мы могли использовать process.env
в нашем коде.
npm install --save-dev @types/node
# Or with yarn
yarn add --dev @types/node
Затем обновите цели build
и serve
(в файле project.json
или angular.json
) на следующие.
{
"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
}
}
Затем мы можем использовать DefinePlugin
в нашей пользовательской конфигурации webpack.
// 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;
};
Теперь, когда мы определяем переменные в нашем файле .env
, например…
# apps/myapp/.env
MY_APP_API_URL=http://localhost:3333
Наконец, мы можем использовать переменные среды в нашем коде. Например:
// 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));
Вы также должны обновить файлы tsconfig.app.json
и tsconfig.spec.json
для включения типов узлов.
{
"extends": "./tsconfig.json",
"compilerOptions": {
// recorte
"types": ["node"]
}
// recorte
}
Теперь просто обслужите приложение, и ваша переменная появится в консоли браузера: )
Примечание:
Это было проверено в версионной среде:"@nrwl/angular": "^14.4.3", "@nrwl/workspace": "14.4.3"
[email protected]
[]s