Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to import local JSON files in Angular". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to import local JSON files in Angular".

Import local JSON files into Angular

1. First kind

Angular supports Typescript2.9+, from 6.1 + with the new features of Typescript, we can import local JSON files directly in any Typescript module by using import. [recommended for related tutorials: "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 under the project source 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}}

Where:

ResolveJsonModule allows you to import .json suffix files

EsModuleInterop allows no default exported module in the import module, which is required for .json files

1.3 step 3

Import the JSON file in the component / directive / service as follows:

/ / your JSON file path import data from'.. /.. / assets/json/data.json'

two。 The second kind

Use Angular's built-in httpCLient service

2.1 step 1

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

Src/assets/json/data.json

2.2 step 2

Import the httpClientModule module in the app.module.ts file as follows:

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

2.3 step 3

Import the JSON file using httpClient in the component / directive / service as follows:

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

3. The third kind

3.1 step 1

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

Src/assets/json/data.json

3.2 step 2

Create a * .d.ts file under the directory where the json file is placed, for example:

We create a data-typings.d.ts under 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

Import the JSON file using httpClient in the component / directive / service as follows:

/ / your JSON file path import * as data from'.. /.. / assets/json/data.json';// or import like this can also be import data from'.. / assets/json/data.json'.

Note:

If it does not take effect and prompts you to further configure resolveJsonModule error message, you need to check the tsconfig.app.json configuration file in the project, which has an option: include, make sure the path of * .d.ts in the configuration, for example:

{..., "include": ["src/**/*.d.ts"]} Thank you for reading, these are the contents of "how to import local JSON files in Angular". After the study of this article, I believe you have a deeper understanding of how to import local JSON files in Angular, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.