Angular & Nx를 사용한 ENV 변수
13300 단어 nxenvangulartypescript
@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
}
}
따라서 웹팩 개인화 구성을 위한 포데모스 사용자
DefinePlugin
가 있습니다.// 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
마지막으로, 모든 코드를 주변 환경에서 사용할 수 있습니다. 예를 들면:
// 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"
가치
[]에스
Reference
이 문제에 관하여(Angular & Nx를 사용한 ENV 변수), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/guiseek/env-vars-with-angular-nx-26i9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)