外部プロパティファイルの読み込み角度2+

Question

Angular 2+には、外部のconfig.jsonファイルにapi urlを作成してビルドする前に読み込む方法があるのか​​どうか疑問に思っていました。現在の状況では、サービスで変数として変数を定義するだけなので、URLを変更したい場合は、コードを手動で変更して再構築する必要があります。この設定ファイルでは、設定プロパティを変更したときに毎回コードを再構築する必要がないように、そこに定義することを考えていました。

Answer 1

新しいangle-cliには、開発環境（dev）と生産環境（prod）のような異なる環境という概念があります。

cli ng-myおよび/ environmentsフォルダーで新しいアプリケーションを作成するときは、環境ファイルを含むスキャフォールドの一部です。アプリケーションは（NGサーブ）構築された（NGビルド）または提供しています

├── environment.ts 
├── environment.prod.ts 

、環境。{envが}環境/からファイルを.TS引っ張られ、SRC /アプリ/内のファイルを置き換えています。デフォルトではこれはdevです。

は、製品版をつかむためには、使用して生産に環境を設定し、次の

#build 
$ ng build --environment=production 
#shorthand 
$ ng b -prod 

#serve 
$ ng serve --environment=production 
#shorthand 
$ ng s -prod 

SAMPLEのENVファイル

export const environment = { 
    production: false, 
    envName: 'qa' 
}; 

ngのビルドコマンドの詳細を読むhere

例

export const environment = { 
    production: false, 
    apiUrl: 'http://example.com/api' 
}; 

app.component

import { Component } from '@angular/core'; 
import { environment } from './environment'; 

@Component({ 
    moduleId: module.id, 
    selector: 'myapp-app', 
    templateUrl: 'myapp.component.html', 
    styleUrls: ['myapp.component.css'] 
}) 
export class MyappAppComponent { 
    title = 'myapp works!'; 
    environmentName = environment.apiUrl; 
} 

テンプレート

<h1> 
    {{title}} 
</h1> 

<h2> 
    {{environmentName}} 
</h2>