Angular Universal 无法解析 .json 文件答案

【问题标题】：Angular universal doesn't resolve .json filesAngular Universal 无法解析 .json 文件
【发布时间】：2020-09-23 10:10:51
【问题描述】：

我构建了 Angular Universal (SSR) 应用程序。现在我为快递服务器安装了软件包。在那个包里面有这样的行：

require(./package) -> 这不起作用（angular 无法解决它）因为 angular 期望像 require(./package.json) 一样需要它

require(../folderdir) -> 这不起作用（angular 无法解决它）因为 angular 期望像 require(../folderdir/index.json) 一样需要它

如何告诉 Angular Universal 也解析 .json 扩展？

附：我使用 Angular cli，我没有要修改的 webpack 配置文件。

【问题讨论】：

标签： angular webpack angular-universal

【解决方案1】：

步骤：1-更新您的 package.json 以便您可以在客户端浏览器上使用 fs 模块npm-package.json

"browser": {
    "fs": false,
    "os": false,
    "path": false
  }

Reference

使用fs模块读取.json file

import {Observable} from "rxjs/Observable";
 import {TranslateLoader} from '@ngx-translate/core';
          
  declare var require: any;
  import {join} from 'path';
      
  const fs = require('fs');
      
  export class Loader {
      
    getJson(){

   const assets_folder = join(process.cwd(), 'dist', 'server', this.prefix);
  const jsonData = JSON.parse(fs.readFileSync(`${assets_folder}/${lang}${this.suffix}`, 'utf8'));

  return jsonData;
 }
}

More Information on importing json with SSR

或者你可以直接导入整个json文件

import * as indexJSON from 'assets/index.json';


use indexJSON where ever you want.

或

将文件typings.d.ts添加到项目的根文件夹，内容如下

declare module "*.json" {
    const value: any;
    export default value;
}

然后像这样导入您的数据：

import * as data from './example.json';

2019 年 7 月更新：

Typescript 2.9 ([docs][2]) 引入了一个更好、更智能的解决方案。步骤：

在您的tsconfig.json 文件中使用此行添加resolveJsonModule 支持：

"compilerOptions": {
    ...
    "resolveJsonModule": true
  }

import 语句现在可以假定默认导出：

import data from './example.json';
Credit

【讨论】：

我不是进口的，是node包里写的，改不了
也许你可以 fork 它进行更改并使用它
或使用备用库