如何在Angular中导入本地JSON文件

第一种

Angular从6.1+开始支持Typescript2.9+，借助Typescript的新特性，我们可以使用 import 在任何Typescript模块里只鸡导入本地的JSON文件。要启用次新特性，需要在Angular中执行以下几个步骤：

1.1步骤一

在项目源码目录下任意位置创建JSON文件，例如：  src/assets/json/data.json

2.2步骤二

    在 tsconfig.json 文件中的 compilerOptions 选项下设置如下代码：
    {   ...,   "compilerOptions":
     { ...,
      "resolveJsonModule": true,
      "esModuleInterop": true 
     } 
    }
     其中：
    resolveJsonModule 允许导入 .json 后缀文件 esModuleInterop
    允许导入模块里没有默认导出的module，这个对于 .json 文件是必须的

3.3 步骤三
在组件/指令/服务中的导入JSON文件，代码如下：

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

第二种

使用Angular内置的 httpCLient 服务

2.1 步骤一 在项目源码目录下任意位置创建JSON文件，例如： src/assets/json/data.json

2.2 步骤二 在app.module.ts文件中导入 httpClientModule 模块，代码如下：

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

2.3 步骤三 在组件/指令/服务中使用 httpClient 导入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.1 步骤一 在项目源码目录下任意位置创建JSON文件，例如： src/assets/json/data.json

3.2 步骤二 在放置json文件的目录下创建一个 *.d.ts 的文件，例如：

    我们在 src/assets/json 文件夹下创建 data-typings.d.ts 注意：
    你可以在src根目录下创建这个文件，这样的话可以全局被声明
    
    declare module '*.json' {   const value: any;   export default value; }

3.3 步骤三 在组件/指令/服务中使用 httpClient 导入JSON文件，代码如下：

    // 你的JSON文件路径 import * as data from '../../assets/json/data.json';
    // 或者像这样导入也可以 import data from '../../assets/json/data.json';
    
    注意事项 : 如果不生效，提示需要进一步配置resolveJsonModule的错误信息，则你需要检查项目里的
    tsconfig.app.json 配置文件，其中有一选项：include，确保里边配置里* .d.ts 的路径，
    例如：
    javascript { ...,   "include": [ "src/**/*.d.ts"  ] }