web-dev-qa-db-ja.com

Angularを使用して.json設定をenvironment.tsにインポートし、APIを使用する方法

以下のURLがあるアセットフォルダーにあるJsonファイルをインポートしたい：

config.json：

{
    "url1": "https://jsonplaceholder.typicode.com/posts",

    "url2" : "https://reqres.in/api/users",

    "url3":"https://fakerestapi.azurewebsites.net/api/Authors"
}

したがって、URLをハードコーディングする代わりに、Jsonファイルからインポートしたいのですが、正確にそれを行う方法がわかりません。

以下に私の問題を示します。

1。Jsonファイルをenvironment.tsにインポートする方法と、そこからAPIを使用するサービスを取得します

2。ファイルをインポートする場合、prodとlocで同じにする必要がありますdev

欲しいもの：

.jsonまたはenvironments.prodをロードする代わりに、アセットフォルダーに格納されている.tsファイルにいくつかのURLが含まれる構成ファイルがあります。Jsonファイル構成をロードし、それに基づいてアプリケーションを実行したい

私がしたこと：

以下は、アセットフォルダーに配置したJsonファイルです

{
    "baseUrl": "https://jsonplaceholder.typicode.com/",
    "baseUrl2": "https://reqres.in/api/users"
}

ConfigServiceService.ts設定ファイルを保存するため

public _config: Object;

    constructor(public http:Http) { }

    getData(){
       debugger;
       return this.http.get("./assets/config.json").pipe(map(res =>  res.json()));
    }

この後、サービスファイルを呼び出すためのServiceProviderService.tsを作成します

configData:any;


   constructor(public http:Http,public config:ConfigServiceService) {

   }

   jsonData(){
       debugger;
       return this.configData;
   }

   ngOnInit(){
      debugger;
      this.config.getData().subscribe(res =>{
         console.log(res);
         this.configData = res;
      });


   }

app.component.ts

 title = 'sample';
 constructor(public serv :ServiceProviderService){
      this.serv.jsonData();
 }

Jsonデータを取得できず、そこにあるロジックをServiceProviderService.tsファイルに配置している場合、それをコンストラクターに配置すると、未定義になります。

注：ここに複数のURLがある場合、各URLはさまざまな個別のサービスファイルに配布されます。1つのサービスファイルのbase1 URLと別のサービスファイルのbase2 URLを想定しています。どうすればそれを達成できますか

https://stackblitz.com/edit/read-local-json-file-5zashx

app.component.tsで未定義になる

enter image description here

javascriptjsonangulartypescript
4
Dexter

これが最善の解決策かどうかはわかりませんが、ここに私がやったことがあります（デフォルトのAngularプロジェクトに既にあるものをカットアンドペーストすることによって）。私は同じ目標を持っていました：I使用している環境（デバッグまたは本番）に応じて、「API URL」を使用可能にする必要がありました。

最初に、2つの既存の.tsファイルに追加の構成設定を追加しました。

  • src\environments\environment.prod.ts
  • src\environments\environment.ts

..so現在、各ファイルは次のようになっています。

export const environment = {
  production: false,
  apiUrl: "http://localhost:53104"
};

main.tsファイルにはenvironmentオブジェクトで読み取るコードがすでにあり、environment.production値を使用しているため、このファイルに少しコードを追加してenvironment.apiUrl値についても同じようにします。

export function getAPIUrl() {
  console.log("API URL: " + environment.apiUrl);
  return environment.apiUrl;
}

const providers = [
  { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] },
  { provide: 'API_URL', useFactory: getAPIUrl, deps: [] }
];

. . . 

platformBrowserDynamic(providers).bootstrapModule(AppModule)
   .catch(err => console.log(err));

これで、コンポーネント内のこの新しい「API_URL」値にアクセスできます。

例えば：

export class FetchDataComponent {
  public forecasts: WeatherForecast[];

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string, @Inject('API_URL') APIUrl: string) {
    http.get<WeatherForecast[]>(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result => {
      this.forecasts = result;
    }, error => console.error(error));

    console.log("FetchDataComponent, URL: " + APIUrl);
  }
}

このページを開くと、出力ウィンドウに自分のURLが表示されます。

FetchDataComponent, URL: http://localhost:53104

このソリューションは大丈夫ですか？他のソリューションよりも（コードがほとんどないので）はるかにシンプルに見えます。

実際、さらに簡単な解決策は、 "API_URL"プロバイダーを使用せず、これをコンポーネントに貼り付けることです。

import { environment } from '../../environments/environment';

..次に、以下を使用して値にアクセスします。

console.log("FetchData, URL: " + environment.apiUrl);

仕事完了！

0
Mike Gledhill

必須 ????アセットからjsonファイルを読み取る

/assets/urls.json ????

{
  "urls": {
    "dev": "dev.com",
    "prod": "prod.com"
  }
}

env.ts

const { urls } = require("../assets/urls.json");

export const environment: IEnv = {
  production: false,
  baseUrl: urls.dev
};

env.prod.ts

const { urls } = require("../assets/urls.json");
export const environment: IEnv = {
  production: true,
  baseUrl: urls.prod
};

????インストールする必要がありますnpm i @types/nodeおよび更新tsconfig.app.json このような

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": ["node"]
  },
  "exclude": ["test.ts", "**/*.spec.ts"]
}
0
malbarmavi

Jsonファイルをインポートする場合

  1. config.jsonをassetsディレクトリに追加します。
  2. 編集typings.d.tsファイル：
    declare module "*.json" {
        const value: any;
        export default value;
    }
  1. 入力のパスを「typeRoots」にtsconfig.jsonで追加します。次に例を示します。
"typeRoots": [
      "node_modules/@types", "./src/typings.d.ts"
],
  1. 環境ファイルにconfig.jsonをインポートします。
import * as config from '../assets/config.json';

export const environment = {
  baseUrl: config.default.url1
  production: true
};

以上です。頑張ってください！

0
Yakir Tsuberi