در بین توسعه دهندگان، خیلی رایج است، چند نسخه از Application خود را داشته باشند که Environmentهای مختلفی را مورد هدف قرار می‌دهد؛ مثل development که مربوط به حالت توسعه می‌باشد و production که مربوط به حالت ارائه نهایی است. هر Environment تعدادی متغیر منحصر بفرد خود را خواهد داشت؛ مثلAPI Endpoint ، app version و ... . انگیولار تنظیمات Environment را فراهم کرده است تا بتوانیم متغیر‌های منحصر بفردی را برای هر Environment، تعریف کنیم.
اگر شما می‌خواهید به صورت خودکار یک flag را اعمال کنید، اجازه بدهید بگوییم prod-- ، در این حالت angular compiler متغیر API endpoint را با API endpoint مربوط به حالت ارائه نهایی برای شما جایگزین می‌کند. چیزی که شما نمی‌خواهید این است که به صورت دستی endpoint را قبل از build پروژه، تغییر دهید. این موضوع شانس دچار اشتباه شدن را کاهش می‌دهد.
Dealing with only 2 Environments
به صورت پیش فرض انگیولار از دو Environment پشتیبانی می‌کند. فایل‌های Environment در دایرکتوری environment آن قرار دارند که در مسیر زیر می‌باشد:
داخل دایرکتوری src، در ریشه WorkSpace یا پوشه پروژه شما( آشنایی با مفهوم WorkSpace در انگیولار ).
در داخل دایرکتوری environment، دو فایل با نام‌های environment.ts و environment.prod.ts وجود دارند. همانطور که ممکن است حدس زده باشید، فایل دوم برای حالت ارائه نهایی می‌باشد؛ در حالیکه فایل اول برای حالت توسعه است و همچنین به عنوان Environment پیش فرض نیز می‌باشد. Angular CLI compiler ، به صورت خودکار فایل اول را با فایل دوم، هر زمان که شما build را با prod-- انجام میدهید، جایگزین می‌کند:
ng build --prod
اگر فایل environment.ts را باز کنید، خصوصیت production به false تنظیم شده است؛ درحالیکه در environment.prod.ts خصویت production به true تنظیم شده‌است. همه متغیرها بر اساس Environment مشخصی، تفاوت ایجاد می‌کنند که به صورت مناسب باید در دو فایل قرار داده شوند:
// environment.ts environment variables
export const environment = {
production: false,
APIEndpoint: 'https://dev.endpoint.com'
};
// environment.prod.ts environment variables
export const environment = {
production: true,
APIEndpoint: 'https://prod.endpoint.com'
}; برای دستیابی به این متغیرها، environment را import کرده و از آن همانند زیر استفاده می‌کنیم:
import { environment } from './../environments/environment'; که به صورت زیر از آن استفاده می‌شود:
const APIEndpoint = environment.APIEndpoint;
Dealing with 3 or More Environment
این موضوع خیلی رایج است که برای Application های خود، بیش از دو Environment داشته باشیم. ممکن است که شما نیاز داشته باشید به:
staging environment ، beta environment ، production environment ، development environment و ... . انگیولار یک راه را برای ما فراهم کرده است که به صورت دستی Environmentهای بیشتری را که ممکن است نیاز داشته باشیم، اضافه کنیم. در اینجا ما نیاز به دو Environment دیگر به نام‌های staging و beta داریم. کار را با ایجاد کردن دو فایل دیگر در کنار environment های موجود شروع می‌کنیم:
1-environment.staging.ts
2-environment.beta.ts
سپس هر کدام از آن‌ها را به صورت زیر ویرایش می‌کنیم:
// environment.staging.ts environment variables
export const environment = {
production: true
APIEndpoint: "https://staging.endpoint.com"
};
// environment.beta.ts environment variables
export const environment = {
production: true,
APIEndpoint: "https://beta.endpoint.com"
}; در ادامه نیاز است در فایل angular.json، تنظیمات را تغییر دهیم ( که در ریشه Workspace می‌باشد) . با انجام اینکار، این امکان به Angular CLI داده خواهد شد که دو environment جدید ایجاد شده را شناسایی و در صورت نیاز از آن‌ها استفاده کند.
در ابتدا فایل angular.json را باز می‌کنیم و کلید configurations را می‌یابیم که در مسیر زیر می‌باشد:
projects -> yourappname -> architect -> build -> configurations
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"serviceWorker": true
}
} سپس از کلید production و تنظمیات درون آن، یک نمونه تهیه می‌کنیم و در زیر کلید production قرار می‌دهیم. سپس کلید production را به staging تغیر می‌دهیم. در قسمت fileReplacements مقدار کلید with را از
"with":"src/environments/environment.prod.ts"
"with":"src/environments/environment.staging.ts"
اکنون تنظیمات جدید شما برای staging environment باید به صورت زیر باشد:
"configurations": {
"production": {
// ...
},
"staging": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}],
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"extractCss": false,
"namedChunks": false,
"aot": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"serviceWorker": true
}
} در ادامه همین روال را برای beta environment هم تکرار کنید.
نکته
ممکن است شما نیاز داشته باشید تا تنظیمات بالا را به حالتی دقیق‌تر نسبت به environment مورد نظر اصلاح کنید. مثلا ممکن است نیاز داشته باشید، Service worker را در حالت staging فعال نگه دارید و در حالت beta آن را غیر فعال کنید که این تضمین می‌کند وقتی ریفرش انجام می‌شود، app ، Service worker و منابع مربوط به آن را در مرورگر کش نکرده باشد.
Building your App
در نهایت برای build کردن application خود با environmentهای سفارشی ایجاد شده، میتوانید از پرچم configurations-- استفاده کنید؛ همانند زیر:
//for staging environment ng build --configuration=staging //for beta environment ng build --configuration=beta
و در نهایت برای استفاده کردن از environment پیش فرض، استفاده از دستور زیر به تنهایی کافی می‌باشد:
//for production environment ng build --prod //for dev environment ng build
اکنون شما میتوانید پروژه انگیولار خود را با هر تعداد environment ای که دوست دارید، configure کنید.
