A brief discussion on how to import local JSON files in Angular

This article will introduce to you how to import local JSON files in Angular. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

#1. The first type

Angular supports Typescript2.9 starting from 6.1, with the help of Typescript’s new features, we can directly import local JSON files in any Typescript module by using import. [Related recommendations: "angular Tutorial"]

To enable this new feature, you need to perform the following steps in Angular:

1.1 Step 1

Create a JSON file anywhere in the project source code directory, for example:

src/assets/json/data.json

1.2 Step 2

Set the following code under the compilerOptions option in the tsconfig.json file:

{
  ...,
  "compilerOptions": {
    ...,
    "resolveJsonModule": true,
    "esModuleInterop": true
  }
}

Among them:

• resolveJsonModule Allows the import of .json suffix files
• esModuleInterop Allows the import of modules that do not export by default. This is for .json The file is required

1.3 Step 3

Import the JSON file in the component/command/service, the code is as follows:

// 你的JSON文件路径
import data from '../../assets/json/data.json';

2. The second method

uses Angular’s ​​built-in httpCLient service

2.1 Step 1

Create a JSON file anywhere in the project source code directory, for example:

src/assets/json/data.json

##2.2 Step 2

Import the

httpClientModule module in the app.module.ts file, the code is as follows:

import { HttpClientModule } from '@angular/common/http';
@NgModule({
  imports: [..., HttpClientModule]
})
export class AppModule {}

2.3 Step 3

Use

httpClient in the component/command/service to import the JSON file, the code is as follows:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-second-way',
  template: `<div>{{jsonDataResult | json}}`
})
export class SecondWayComponent {
  jsonDataResult: any;
  
  constructor(private http: HttpClient) {
      this.http.get(&#39;assets/json/data.json&#39;).subscribe((res) => {
        this.jsonDataResult = res;
        console.log(&#39;--- result :: &#39;,  this.jsonDataResult);
      });
  }
}

3. The third type

3.1 Step 1

Create a JSON file anywhere in the project source code directory, for example:

src/assets/json/data.json

3.2 Step 2

Create a

*.d.ts file in the directory where the json file is placed, for example:

We create data-typings.d.ts in the src/assets/json folder

Note: You can create this file in the src root directory, so that it can be declared globally; in addition, the file name is arbitrary, but the suffix must be .d.ts

declare module '*.json' {
  const value: any;
  export default value;
}

3.3 Step 3

Use

httpClient in the component/command/service to import the JSON file. The code is as follows:

// 你的JSON文件路径
import * as data from '../../assets/json/data.json';
// 或者像这样导入也可以
import data from '../../assets/json/data.json';

Notes: If it does not take effect and prompts an error message that further configuration of resolveJsonModule is required, then you need to check the
tsconfig.app.json configuration file in the project. There is an option: include, make sure it is in the configuration. * The path of .d.ts, for example:

{
	...,
  "include": [
  	"src/**/*.d.ts"
  ]
}

For more programming-related knowledge, please visit:

Programming Video! !

The above is the detailed content of A brief discussion on how to import local JSON files in Angular. For more information, please follow other related articles on the PHP Chinese website!