Angular universal不能解析.json文件

Question

我构建了Angular Universal (SSR)应用程序。现在我为express server安装了包。在该包中有类似这样的行：

require(./package) ->这不起作用(angular无法解析它)，因为angular希望像require(./package.json)一样需要它

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

如何让angular universal也解析.json扩展？

附言:我使用的是angular cli，并且我没有需要修改的webpack配置文件。

Answer 1

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

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

使用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;
 }
}

也可以直接导入整个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 (文档)引入了一个更好、更智能的解决方案。步骤：

1. 在tsconfig.json文件中使用以下行添加resolveJsonModule支持：

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

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

import data from './example.json';