Angular 5项目ng build --prod构建报错：静态JSON引用问题

我之前也碰到过和你一模一样的情况——开发环境ng serve跑起来完全没问题，一执行ng build --prod就报错，根源在于Angular生产构建的AOT编译对静态JSON导入的处理比JIT严格得多，直接用import * as config导入数组的写法在AOT下会被判定为类型不匹配或者模块结构错误。

下面给你两个靠谱的解决办法：

方法一：用Angular HttpClient加载JSON（推荐） #

这是Angular官方推荐的资源加载方式，不管开发还是生产环境都能稳定运行，步骤如下：

• 首先在你的组件或服务中导入HttpClient，并注入到构造函数里：

import { HttpClient } from '@angular/common/http';
import { OnInit } from '@angular/core';

export class YourComponent implements OnInit {
  constructor(private http: HttpClient) {}

  ngOnInit() {
    // 加载assets下的config.json文件
    this.http.get<string[]>('../../assets/config.json').subscribe(config => {
      const URL = config[1];
      // 在这里写你需要用到URL的业务逻辑
    });
  }
}

• 别忘了确保你的AppModule已经导入了HttpClientModule，否则HttpClient无法使用：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // 其他模块...
    HttpClientModule
  ]
})
export class AppModule { }

方法二：调整静态导入的写法（适合想保持同步加载的场景） #

如果你还是想通过静态导入的方式加载JSON，需要修改TypeScript配置和导入语句：

1. 打开项目根目录下的tsconfig.json，确保添加或修改以下配置：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true,
    // 其他原有配置...
  }
}

2. 修改你的导入语句，把import * as config改成默认导入：

import config from '../../assets/config.json';

// 之后正常使用config[1]即可
const URL = config[1];

为什么原来的写法不行？因为import * as config会把JSON数组包裹成一个模块对象，你实际访问的是模块对象的1属性，而不是数组的索引——开发环境的JIT编译对这种写法比较宽容，但生产AOT编译会严格检查类型，所以就报错了。

内容的提问来源于stack exchange，提问作者Dave S.