कोणीय पर अनुप्रयोग विन्यास। सर्वोत्तम अभ्यास

पर्यावरण कॉन्फ़िगरेशन फ़ाइलों और लक्ष्यों का प्रबंधन कैसे करें

जब आपने कोणीय CLI या Nrwl Nx टूल्स का उपयोग करके एक कोणीय अनुप्रयोग बनाया, तो आपके पास हमेशा वातावरण कॉन्फ़िगरेशन फ़ाइलों के साथ एक फ़ोल्डर होता है:

<APP_FOLDER>/src/environments/ └──environment.ts └──environment.prod.ts 

उदाहरण के लिए, आप environment.prod.ts का नाम बदल सकते हैं। उदाहरण के लिए, आप अतिरिक्त कॉन्फ़िगरेशन फ़ाइलें भी बना सकते हैं जैसे कि environment.qa.ts या environment.staging.ts ।

 <APP_FOLDER>/src/environments/ └──environment.ts └──environment.prod.ts └──environment.qa.ts └──environment.staging.ts 

Environment.ts फ़ाइल डिफ़ॉल्ट रूप से उपयोग की जाती है। शेष फ़ाइलों का उपयोग करने के लिए, आपको angular.json को खोलना होगा और फ़ाइल कॉन्फ़िगरेशन को बिल्ड कॉन्फ़िगरेशन में कॉन्फ़िगर करना होगा और सेवा और e2e कॉन्फ़िगरेशन में ब्लॉक जोड़ना होगा।

 { "architect":{ "build":{ "configurations":{ "production":{ "fileReplacements":[ { "replace":"<APP_FOLDER>/src/environments/environment.ts", "with":"<APP_FOLDER>/src/environments/environment.production.ts" } ] }, "staging":{ "fileReplacements":[ { "replace":"<APP_FOLDER>/src/environments/environment.ts", "with":"<APP_FOLDER>/src/environments/environment.staging.ts" } ] } } }, "serve":{ "configurations":{ "production":{ "browserTarget":"app-name:build:production" }, "staging":{ "browserTarget":"app-name:build:staging" } } }, "e2e":{ "configurations":{ "production":{ "browserTarget":"app-name:serve:production" }, "staging":{ "browserTarget":"app-name:serve:staging" } } } } } 

किसी विशिष्ट वातावरण के साथ एप्लिकेशन बनाने या चलाने के लिए, कमांड्स का उपयोग करें:

 ng build --configuration=staging ng start --configuration=staging ng e2e --configuration=staging  ng build --prod     ng build --configuration=production 

पर्यावरण फ़ाइलों के लिए एक इंटरफ़ेस बनाएँ

 // environment-interface.ts export interface EnvironmentInterface { production: boolean; apiUrl: string; } // environment.ts export const environment: EnvironmentInterface = { production: false, apiUrl: 'https://api.url', }; 

सीधे पर्यावरण फ़ाइलों का उपयोग न करें, केवल डीआई के माध्यम से

वैश्विक चर और प्रत्यक्ष आयात का उपयोग करना ओओपी दृष्टिकोण का उल्लंघन करता है और आपकी कक्षाओं की परीक्षण क्षमता को जटिल करता है। इसलिए, ऐसी सेवा बनाना बेहतर है जिसे आपके घटकों और अन्य सेवाओं में इंजेक्ट किया जा सके। डिफ़ॉल्ट मान निर्दिष्ट करने की क्षमता वाली ऐसी सेवा का एक उदाहरण यहां दिया गया है।

 export const ENVIRONMENT = new InjectionToken<{ [key: string]: any }>('environment'); @Injectable({ providedIn: 'root', }) export class EnvironmentService { private readonly environment: any; // We need @Optional to be able start app without providing environment file constructor(@Optional() @Inject(ENVIRONMENT) environment: any) { this.environment = environment !== null ? environment : {}; } getValue(key: string, defaultValue?: any): any { return this.environment[key] || defaultValue; } } @NgModule({ imports: [ BrowserModule, HttpClientModule, AppRoutingModule, ], declarations: [ AppComponent, ], // We declare environment as provider to be able to easy test our service providers: [{ provide: ENVIRONMENT, useValue: environment }], bootstrap: [AppComponent], }) export class AppModule { } 

अपने पर्यावरण कॉन्फ़िगरेशन और व्यावसायिक तर्क को अलग करें

पर्यावरण कॉन्फ़िगरेशन में केवल गुण शामिल होते हैं जो पर्यावरण से संबंधित होते हैं, उदाहरण के लिए एपीयूआरएल । आदर्श रूप से, पर्यावरण विन्यास में दो गुण होने चाहिए:

 export const environment = { production: true, apiUrl: 'https://api.url', }; 

इस कॉन्फ़िगरेशन में भी आप डिबगोड सक्षम करने के लिए एक संपत्ति जोड़ सकते हैं : सही मोड डीबग या आप सर्वर का नाम जोड़ सकते हैं जहां एप्लिकेशन एनवायरनमेंट: 'क्यूए' चल रहा है, लेकिन यह मत भूलो कि यह बहुत बुरा अभ्यास है यदि आपका कोड सर्वर के बारे में कुछ भी कह रहा है जिस पर वह चल रहा है ।

किसी भी संवेदनशील जानकारी या पासवर्ड को पर्यावरण कॉन्फ़िगरेशन में संग्रहीत न करें।

अन्य कॉन्फ़िगरेशन सेटिंग्स जैसे कि maxItemsOnPage या GalleryAnimationSpeed को किसी अन्य स्थान पर संग्रहीत किया जाना चाहिए और कॉन्फ़िगरेशन. service.ts का उपयोग करना उचित है , जो कुछ समापन बिंदु से सेटिंग्स प्राप्त कर सकते हैं या संपत्ति फ़ोल्डर से बस config.json लोड कर सकते हैं।

1. अतुल्यकालिक दृष्टिकोण (उपयोग जब कॉन्फ़िगरेशन रनटाइम में बदल सकता है)

 // assets/config.json { "galleryAnimationSpeed": 5000 } // configuration.service.ts // ------------------------------------------------------ @Injectable({ providedIn: 'root', }) export class ConfigurationService { private configurationSubject = new ReplaySubject<any>(1); constructor(private httpClient: HttpClient) { this.load(); } // method can be used to refresh configuration load(): void { this.httpClient.get('/assets/config.json') .pipe( catchError(() => of(null)), filter(Boolean), ) .subscribe((configuration: any) => this.configurationSubject.next(configuration)); } getValue(key: string, defaultValue?: any): Observable<any> { return this.configurationSubject .pipe( map((configuration: any) => configuration[key] || defaultValue), ); } } // app.component.ts // ------------------------------------------------------ @Component({ selector: 'app-root', changeDetection: ChangeDetectionStrategy.OnPush, templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { galleryAnimationSpeed$: Observable<number>; constructor(private configurationService: ConfigurationService) { this.galleryAnimationSpeed$ = this.configurationService.getValue('galleryAnimationSpeed', 3000); interval(10000).subscribe(() => this.configurationService.load()); } } 

2. तुल्यकालिक दृष्टिकोण (उपयोग जब कॉन्फ़िगरेशन लगभग कभी नहीं बदलता है)

 // assets/config.json { "galleryAnimationSpeed": 5000 } // configuration.service.ts // ------------------------------------------------------ @Injectable({ providedIn: 'root', }) export class ConfigurationService { private configuration = {}; constructor(private httpClient: HttpClient) { } load(): Observable<void> { return this.httpClient.get('/assets/config.json') .pipe( tap((configuration: any) => this.configuration = configuration), mapTo(undefined), ); } getValue(key: string, defaultValue?: any): any { return this.configuration[key] || defaultValue; } } // app.module.ts // ------------------------------------------------------ export function initApp(configurationService: ConfigurationService) { return () => configurationService.load().toPromise(); } @NgModule({ imports: [ BrowserModule, HttpClientModule, AppRoutingModule, ], declarations: [ AppComponent, ], providers: [ { provide: APP_INITIALIZER, useFactory: initApp, multi: true, deps: [ConfigurationService] } ], bootstrap: [AppComponent], }) export class AppModule { } // app.component.ts // ------------------------------------------------------ @Component({ selector: 'app-root', changeDetection: ChangeDetectionStrategy.OnPush, templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { galleryAnimationSpeed: number; constructor(private configurationService: ConfigurationService) { this.galleryAnimationSpeed = this.configurationService.getValue('galleryAnimationSpeed', 3000); } } 

तैनाती या रनटाइम के दौरान पर्यावरण चर को बदलें

कई टीमों ने नियम का उल्लंघन करते हुए "पहले से ही निर्मित बिल्ड में कॉन्फ़िगरेशन को बदलने के बजाय प्रत्येक वातावरण के लिए आवेदन को इकट्ठा करके" एक बार निर्माण करें, कई को तैनात करें "।

अलग-अलग कॉन्फ़िगरेशन के साथ अलग-अलग असेंबली न बनाएं, इसके बजाय, केवल एक उत्पादन असेंबली और विकल्प मान का उपयोग परिनियोजन के दौरान या कोड निष्पादन के दौरान करें। ऐसा करने के लिए कई विकल्प हैं:

पर्यावरण फाइलों में प्लेसहोल्डर्स के साथ मूल्यों को बदलें जो तैनाती के दौरान अंतिम विधानसभा में प्रतिस्थापित किया जाएगा

 export const environment = { production: true, apiUrl: 'APPLICATION_API_URL', }; 

परिनियोजन के दौरान, स्ट्रिंग APPLICATION_API_URL को एपीआई सर्वर के वास्तविक पते से बदल दिया जाना चाहिए।

वैश्विक चर का उपयोग करें और डॉक वॉल्यूम के साथ कॉन्फ़िगर फ़ाइलों को इंजेक्ट करें

 export const environment = { production: true, apiUrl: window.APPLICATION_API_URL, }; // in index.html before angular app bundles <script src="environment.js"></script> 

लेख पर आपका ध्यान देने के लिए धन्यवाद, मुझे रचनात्मक आलोचना और टिप्पणियों पर खुशी होगी।

मध्यम , टेलीग्राम या ट्विटर पर भी हमारे समुदाय में शामिल हों।