{"id":295101,"date":"2019-11-24T15:00:19","date_gmt":"2019-11-24T15:00:19","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=295101"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=295101","title":{"rendered":"\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 Angular. \u041b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438"},"content":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/477214\/\">\n<h2 id=\"kak-upravlyat-faylami-konfiguracii-sredy-i-celyami\">\u041a\u0430\u043a \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0441\u0440\u0435\u0434\u044b \u0438 \u0446\u0435\u043b\u044f\u043c\u0438<\/h2>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 angular \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/cli.angular.io\/\">Angular CLI<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/nx.dev\/angular\">Nrwl Nx tools<\/a> \u0443 \u0432\u0430\u0441 \u0432\u0441\u0435\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u043f\u0430\u043f\u043a\u0430 \u0441 \u0444\u0430\u043b\u0430\u043c\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">&lt;APP_FOLDER&gt;\/src\/environments\/                        \u2514\u2500\u2500environment.ts                        \u2514\u2500\u2500environment.prod.ts<\/code><\/pre>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u0442\u044c <strong>environment.prod.ts<\/strong> \u0432 <strong>environment.production.ts<\/strong> \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <strong>environment.qa.ts<\/strong> \u0438\u043b\u0438 <strong>environment.staging.ts<\/strong>.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">&lt;APP_FOLDER&gt;\/src\/environments\/                        \u2514\u2500\u2500environment.ts                        \u2514\u2500\u2500environment.prod.ts                        \u2514\u2500\u2500environment.qa.ts                        \u2514\u2500\u2500environment.staging.ts<\/code><\/pre>\n<p>  <\/p>\n<p>\u0424\u0430\u0439\u043b <strong>environment.ts<\/strong> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e. \u0414\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c <strong>angular.json<\/strong> \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c <strong>fileReplacements<\/strong> \u0441\u0435\u043a\u0446\u0438\u044e \u0432 <strong>build<\/strong> \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0431\u043b\u043e\u043a\u0438 \u0432 <strong>serve<\/strong> \u0438 <strong>\u04352\u0435<\/strong> \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<pre><code class=\"json\">{    &quot;architect&quot;:{       &quot;build&quot;:{          &quot;configurations&quot;:{             &quot;production&quot;:{                &quot;fileReplacements&quot;:[                   {                      &quot;replace&quot;:&quot;&lt;APP_FOLDER&gt;\/src\/environments\/environment.ts&quot;,                      &quot;with&quot;:&quot;&lt;APP_FOLDER&gt;\/src\/environments\/environment.production.ts&quot;                   }                ]             },             &quot;staging&quot;:{                &quot;fileReplacements&quot;:[                   {                      &quot;replace&quot;:&quot;&lt;APP_FOLDER&gt;\/src\/environments\/environment.ts&quot;,                      &quot;with&quot;:&quot;&lt;APP_FOLDER&gt;\/src\/environments\/environment.staging.ts&quot;                   }                ]             }          }       },       &quot;serve&quot;:{          &quot;configurations&quot;:{             &quot;production&quot;:{                &quot;browserTarget&quot;:&quot;app-name:build:production&quot;             },             &quot;staging&quot;:{                &quot;browserTarget&quot;:&quot;app-name:build:staging&quot;             }          }       },       &quot;e2e&quot;:{          &quot;configurations&quot;:{             &quot;production&quot;:{                &quot;browserTarget&quot;:&quot;app-name:serve:production&quot;             },             &quot;staging&quot;:{                &quot;browserTarget&quot;:&quot;app-name:serve:staging&quot;             }          }       }    } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u0441\u0431\u043e\u0440\u043a\u0438 \u0438\u043b\u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0441 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u043c \u043e\u043a\u0440\u0443\u0434\u0435\u043d\u0438\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">ng build --configuration=staging ng start --configuration=staging ng e2e --configuration=staging  \u041a\u0441\u0442\u0430\u0442\u0438 ng build --prod  \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u0441\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 ng build --configuration=production<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"ne-ispolzuyte-environment-fayly-napryamuyu-tolko-cherez-di\">\u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 environment \u0444\u0430\u0439\u043b\u044b \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e, \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u0440\u0435\u0437 DI<\/h2>\n<p>  <\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0438 \u043f\u0440\u044f\u043c\u044b\u0445 \u0438\u043c\u043f\u043e\u0440\u0442\u043e\u0432 \u043d\u0430\u0440\u0443\u0448\u0430\u0435\u0442 \u041e\u041e\u041f \u043f\u043e\u0434\u0445\u043e\u0434 \u0438 \u0443\u0441\u043b\u043e\u0436\u043d\u044f\u0435\u0442 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u0432\u0430\u0448\u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043b\u0443\u0447\u0448\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u0436\u0435\u043a\u0442\u0438\u0442\u044c \u0432 \u0432\u0430\u0448\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u0430\u043a\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const ENVIRONMENT = new InjectionToken&lt;{ [key: string]: any }&gt;('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 { }<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"otdelyayte-konfiguraciyu-okruzheniya-i-biznes-logiki\">\u041e\u0442\u0434\u0435\u043b\u044f\u0439\u0442\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0438 \u0431\u0438\u0437\u043d\u0435\u0441 \u043b\u043e\u0433\u0438\u043a\u0438<\/h2>\n<p>  <\/p>\n<p>\u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043a \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <strong>apiUrl<\/strong>. \u0412 \u0438\u0434\u0435\u0430\u043b\u0435 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u0442\u044c \u0438\u0437 \u0434\u0432\u0443\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432:<\/p>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const environment = {   production: true,   apiUrl: 'https:\/\/api.url', };<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u0432 \u044d\u0442\u043e\u0442 \u043a\u043e\u043d\u0444\u0438\u0433 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u043b\u044f \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0434\u0435\u0431\u0430\u0433 \u0440\u0435\u0436\u0438\u043c\u0430 <strong>debugMode: true<\/strong> \u0438\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u043c\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0437\u0430\u043f\u0443\u0449\u0435\u043d\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 <strong>environmentName: \u2018QA\u2019<\/strong>, \u043d\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0439\u0442\u0435 \u0447\u0442\u043e \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u043b\u043e\u0445\u0430\u044f \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u0435\u0441\u043b\u0438 \u0432\u0430\u0448 \u043a\u043e\u0434 \u0437\u043d\u0430\u0435\u0442 \u0447\u0442\u043e-\u043b\u0438\u0431\u043e \u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043d \u0437\u0430\u043f\u0443\u0449\u0435\u043d.<\/p>\n<p>  <\/p>\n<p>\u041d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u043a\u0430\u043a\u0443\u044e-\u043b\u0438\u0431\u043e \u0441\u0435\u043a\u0440\u0435\u0442\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0438\u043b\u0438 \u043f\u0430\u0440\u043e\u043b\u0438 \u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<p>\u0414\u0440\u0443\u0433\u0438\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <strong>maxItemsOnPage<\/strong> \u0438\u043b\u0438 <strong>galleryAnimationSpeed<\/strong> \u0434\u043e\u043b\u0436\u043d\u044b \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0432 \u0434\u0440\u0443\u0433\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0438 \u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0447\u0435\u0440\u0435\u0437 <strong>configuration.service.ts<\/strong> \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441 \u043a\u0430\u043a\u043e\u0433\u043e \u0442\u043e \u044d\u043d\u0434\u043f\u043e\u0438\u043d\u0442\u0430 \u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044f config.json \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 assets.<\/p>\n<p>  <\/p>\n<h4 id=\"1-asinhronnyy-podhod-ispolzuyte-kogda-konfiguraciya-mozhet-izmenitsya-v-rantayme\">1. \u0410\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u043d\u0442\u0430\u0439\u043c\u0435)<\/h4>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ assets\/config.json  {   &quot;galleryAnimationSpeed&quot;: 5000 }  \/\/ configuration.service.ts  \/\/ ------------------------------------------------------  @Injectable({   providedIn: 'root', }) export class ConfigurationService {   private configurationSubject = new ReplaySubject&lt;any&gt;(1);    constructor(private httpClient: HttpClient) {     this.load();   }    \/\/ method can be used to refresh configuration   load(): void {     this.httpClient.get('\/assets\/config.json')       .pipe(         catchError(() =&gt; of(null)),         filter(Boolean),       )       .subscribe((configuration: any) =&gt; this.configurationSubject.next(configuration));   }    getValue(key: string, defaultValue?: any): Observable&lt;any&gt; {     return this.configurationSubject       .pipe(         map((configuration: any) =&gt; 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&lt;number&gt;;    constructor(private configurationService: ConfigurationService) {     this.galleryAnimationSpeed$ = this.configurationService.getValue('galleryAnimationSpeed', 3000);      interval(10000).subscribe(() =&gt; this.configurationService.load());   } }<\/code><\/pre>\n<p>  <\/p>\n<h4 id=\"2-sinhronnyy-podhod-ispolzuyte-kogda-konfiguraciya-pochti-nikogda-ne-menyaetsya\">2. \u0421\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043a\u043e\u0433\u0434\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f \u043f\u043e\u0447\u0442\u0438 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f)<\/h4>\n<p>  <\/p>\n<pre><code class=\"javascript\">\/\/ assets\/config.json  {   &quot;galleryAnimationSpeed&quot;: 5000 }  \/\/ configuration.service.ts  \/\/ ------------------------------------------------------  @Injectable({   providedIn: 'root', }) export class ConfigurationService {   private configuration = {};    constructor(private httpClient: HttpClient) {   }    load(): Observable&lt;void&gt; {     return this.httpClient.get('\/assets\/config.json')       .pipe(         tap((configuration: any) =&gt; 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 () =&gt; 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);   } }<\/code><\/pre>\n<p>  <\/p>\n<h2 id=\"podmenyayte-environment-peremennye-vo-vremya-deploya-ili-v-rantayme\">\u041f\u043e\u0434\u043c\u0435\u043d\u044f\u0439\u0442\u0435 environment \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0434\u0435\u043f\u043b\u043e\u044f \u0438\u043b\u0438 \u0432 \u0440\u0430\u043d\u0442\u0430\u0439\u043c\u0435<\/h2>\n<p>  <\/p>\n<p>\u041d\u0435 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0431\u043e\u0440\u043a\u0438 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f\u043c\u0438, \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u0443 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d \u0441\u0431\u043e\u0440\u043a\u0443 \u0438 \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0434\u0435\u043f\u043b\u043e\u044f \u0438\u043b\u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0438\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430. \u0415\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043a\u0430\u043a \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e:<\/p>\n<p>  <\/p>\n<h4 id=\"zamenit-znacheniya-pleysholderami-v-environment-faylah-kotorye-budut-zameneny-v-itogovoy-sborke-vo-vremya-deploya\">\u0417\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u043b\u044d\u0439\u0441\u0445\u043e\u043b\u0434\u0435\u0440\u0430\u043c\u0438 \u0432 environment \u0444\u0430\u0439\u043b\u0430\u0445 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u0437\u0430\u043c\u0435\u043d\u0435\u043d\u044b \u0432 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0439 \u0441\u0431\u043e\u0440\u043a\u0435 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0434\u0435\u043f\u043b\u043e\u044f<\/h4>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const environment = {   production: true,   apiUrl: 'APPLICATION_API_URL', };<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412\u043e \u0432\u0440\u0435\u043c\u044f \u0434\u0435\u043f\u043b\u043e\u044f \u0441\u0442\u0440\u043e\u043a\u0430 <strong>APPLICATION_API_URL<\/strong> \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u0437\u0430\u043c\u0435\u043d\u0435\u043d\u0430 \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u0430\u0434\u0440\u0435\u0441 \u0430\u043f\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<p>  <\/p>\n<h4 id=\"ispolzovat-globalnye-peremennye-i-inzhektit-konfig-fayly-s-pomoschyu-docker-volumes\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u0438\u043d\u0436\u0435\u043a\u0442\u0438\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433 \u0444\u0430\u0439\u043b\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e docker volumes<\/h4>\n<p>  <\/p>\n<pre><code class=\"javascript\">export const environment = {   production: true,   apiUrl: window.APPLICATION_API_URL, }; \/\/ in index.html before angular app bundles &lt;script src=&quot;environment.js&quot;&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043a \u0441\u0442\u0430\u0442\u044c\u0435, \u0431\u0443\u0434\u0443 \u0440\u0430\u0434 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043a\u0440\u0438\u0442\u0438\u043a\u0435 \u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u043c.<\/p>\n<p>  <\/p>\n<hr\/>\n<p>  <\/p>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0443 \u043d\u0430 <a href=\"https:\/\/medium.com\/most-wanted-experts\">Medium<\/a>, <a href=\"https:\/\/t.me\/most_wanted_experts\">Telegram<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/twitter.com\/MostWantedXpert\">Twitter<\/a>.<\/p>\n<\/div>\n<p>               <script class=\"js-mediator-script\">!function(e){function t(t,n){if(!(n in e)){for(var r,a=e.document,i=a.scripts,o=i.length;o--;)if(-1!==i[o].src.indexOf(t)){r=i[o];break}if(!r){r=a.createElement(\"script\"),r.type=\"text\/javascript\",r.async=!0,r.defer=!0,r.src=t,r.charset=\"UTF-8\";var d=function(){var e=a.getElementsByTagName(\"script\")[0];e.parentNode.insertBefore(r,e)};\"[object Opera]\"==e.opera?a.addEventListener?a.addEventListener(\"DOMContentLoaded\",d,!1):e.attachEvent(\"onload\",d):d() } } }t(\"\/\/mediator.mail.ru\/script\/2820404\/\",\"_mediator\")}(window);<\/script>      <br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/477214\/\"> https:\/\/habr.com\/ru\/post\/477214\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html js-mediator-article\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/477214\/\">\n<h2 id=\"kak-upravlyat-faylami-konfiguracii-sredy-i-celyami\">\u041a\u0430\u043a \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0441\u0440\u0435\u0434\u044b \u0438 \u0446\u0435\u043b\u044f\u043c\u0438<\/h2>\n<p>  <\/p>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 angular \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/cli.angular.io\/\">Angular CLI<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/nx.dev\/angular\">Nrwl Nx tools<\/a> \u0443 \u0432\u0430\u0441 \u0432\u0441\u0435\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u043f\u0430\u043f\u043a\u0430 \u0441 \u0444\u0430\u043b\u0430\u043c\u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">&lt;APP_FOLDER&gt;\/src\/environments\/                        \u2514\u2500\u2500environment.ts                        \u2514\u2500\u2500environment.prod.ts<\/code><\/pre>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-295101","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/295101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=295101"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/295101\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=295101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=295101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=295101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}