1. 第一种

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

1.1 步骤一

在项目源码目录下任意位置创建JSON文件，例如：

src/assets/json/data.json

1.2 步骤二

在 tsconfig.json 文件中的 compilerOptions 选项下设置如下代码：

1.3 步骤三

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

// 你的JSON文件路径
import data from '../../assets/json/data.json';
2. 第二种
使用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. 第三种
3.1 步骤一
在项目源码目录下任意位置创建JSON文件，例如：
src/assets/json/data.json
3.2 步骤二
在放置json文件的目录下创建一个 *.d.ts 的文件，例如：
我们在 src/assets/json 文件夹下创建 data-typings.d.ts
你可以在src根目录下创建这个文件，这样的话可以全局被声明；另外文件名是任意的，但是后缀名必须是 .d.ts
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 的路径，例如：
	...,
  "include": [
  	"src/**/*.d.ts"
    muziyull
        前端 @ 热爱·专注 @公众号「窗外的雪儿飞」
      文章被阅读
         2,263
      1. 第一种
      1.1 步骤一
      1.2 步骤二
      1.3 步骤三
      2. 第二种
      2.1 步骤一
      2.2 步骤二
      2.3 步骤三
      3. 第三种
      3.1 步骤一