1. 第一種
Angular從6.1+開始支持Typescript2.9+，借助Typescript的新特性，我們可以使用 import 在任何Typescript模塊里只雞導(dǎo)入本地的JSON文件眯漩。要啟用次新特性琴许，需要在Angular中執(zhí)行以下幾個步驟：
1.1 步驟一
在項目源碼目錄下任意位置創(chuàng)建JSON文件细溅，例如：
src/assets/json/data.json
1.2 步驟二
在 tsconfig.json 文件中的 compilerOptions 選項下設(shè)置如下代碼：
{
...,
"compilerOptions": {
...,
"resolveJsonModule": true,
"esModuleInterop": true
}
}
其中：
-
resolveJsonModule 允許導(dǎo)入
.json后綴文件 -
esModuleInterop 允許導(dǎo)入模塊里沒有默認導(dǎo)出的module罐监，這個對于
.json文件是必須的
1.3 步驟三
在組件/指令/服務(wù)中的導(dǎo)入JSON文件梳庆，代碼如下：
// 你的JSON文件路徑
import data from '../../assets/json/data.json';
2. 第二種
使用Angular內(nèi)置的 httpCLient 服務(wù)
2.1 步驟一
在項目源碼目錄下任意位置創(chuàng)建JSON文件唐责，例如：
src/assets/json/data.json
2.2 步驟二
在app.module.ts文件中導(dǎo)入 httpClientModule 模塊鳞溉，代碼如下：
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [..., HttpClientModule]
})
export class AppModule {}
2.3 步驟三
在組件/指令/服務(wù)中使用 httpClient 導(dǎo)入JSON文件，代碼如下：
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('assets/json/data.json').subscribe((res) => {
this.jsonDataResult = res;
console.log('--- result :: ', this.jsonDataResult);
});
}
}
3. 第三種
3.1 步驟一
在項目源碼目錄下任意位置創(chuàng)建JSON文件鼠哥，例如：
src/assets/json/data.json
3.2 步驟二
在放置json文件的目錄下創(chuàng)建一個 *.d.ts 的文件熟菲，例如：
我們在 src/assets/json 文件夾下創(chuàng)建 data-typings.d.ts
注意：
你可以在src根目錄下創(chuàng)建這個文件，這樣的話可以全局被聲明
declare module '*.json' {
const value: any;
export default value;
}
3.3 步驟三
在組件/指令/服務(wù)中使用 httpClient 導(dǎo)入JSON文件朴恳，代碼如下：
// 你的JSON文件路徑
import * as data from '../../assets/json/data.json';
// 或者像這樣導(dǎo)入也可以
import data from '../../assets/json/data.json';
注意事項 :
如果不生效抄罕，提示需要進一步配置resolveJsonModule的錯誤信息，則你需要檢查項目里的 tsconfig.app.json 配置文件于颖，其中有一選項：include呆贿，確保里邊配置里* .d.ts 的路徑，例如：
{
...,
"include": [
"src/**/*.d.ts"
]
}
