时间戳

首页 > 解决方案 > Angular Universal 无法解析 .json 文件

angular - Angular Universal 无法解析 .json 文件

问题描述

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

require(./package)- >这不起作用（角度无法解决它）因为角度需要它喜欢require(./package.json)

require(../folderdir)- >这不起作用（角度无法解决它）因为角度需要它喜欢require(../folderdir/index.json)

我怎样才能告诉 Angular Universal 也解决.json扩展？

PS 我使用 angular cli，我没有要修改的 webpack 配置文件。

标签： angularwebpackangular-universal

解决方案

步骤：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;
 }
}

有关使用 SSR 导入 json 的更多信息

或者你可以直接导入整个 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]) 引入了一个更好、更智能的解决方案。脚步：

  1. 在您的文件中添加resolveJsonModule此行的支持：tsconfig.json
"compilerOptions": {
    ...
    "resolveJsonModule": true
  }

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

import data from './example.json';
信用

推荐阅读