A brief analysis of how to import local JSON files in Angular

This article will introduce to you how to import local JSON files in Angular. I hope it will be helpful to you!

Import local JSON files into Angular

1. The first type

Angular supports Typescript2.9 starting from 6.1. With the new features of Typescript, we can directly import local JSON files in any Typescript module by using import. [Related tutorial 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 . The json file is necessary

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-inhttpCLient service

2.1 Steps 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 in the directory where the json file is placed File, 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 analysis of how to import local JSON files in Angular. For more information, please follow other related articles on the PHP Chinese website!