如何将 JSON 文件导入 Angular 库？

Posted 2023-02-19

【中文标题】如何将 JSON 文件导入 Angular 库？

【英文标题】：How to import JSON file to Angular library?

【发布时间】：2019-09-01 01:22:03

【问题描述】：

我在将 JSON 文件导入 Angular 7 库中的环境文件时遇到问题。 我的environment.ts 文件如下所示：

import firebase from './firebase.json';

export const environment = 
  production: false,
  firebase,
;

还有firebase.json:

  "apiKey": "",
  "authDomain": "",
  "databaseURL": "",
  "projectId": "",
  "storageBucket": "",
  "messagingSenderId": ""

但不幸的是，当运行ng build 时它失败了：

> sdk@0.0.0 build <path-to-project>/sdk
> ng build sdk

Building Angular Package
Building entry point 'sdk'
Compiling TypeScript sources through ngc
Bundling to FESM2015

BUILD ERROR
Unexpected token / in JSON at position 0
SyntaxError: Unexpected token / in JSON at position 0
    at JSON.parse (<anonymous>)
    at Object.transform (<path-to-project>/sdk/node_modules/rollup-plugin-json/dist/rollup-plugin-json.cjs.js:18:20)
    at <path-to-project>/sdk/node_modules/rollup/dist/rollup.js:20962:25

Unexpected token / in JSON at position 0
SyntaxError: Unexpected token / in JSON at position 0
    at JSON.parse (<anonymous>)
    at Object.transform (<path-to-project>/sdk/node_modules/rollup-plugin-json/dist/rollup-plugin-json.cjs.js:18:20)
    at <path-to-project>/sdk/node_modules/rollup/dist/rollup.js:20962:25
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sdk@0.0.0 build: `ng build sdk`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sdk@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     xxx/.npm/_logs/2019-04-10T13_40_47_486Z-debug.log

我已经试过了：

1) 添加到tsconfig.json

"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"noImplicitAny": false,

2) 添加typings.d.ts 与

declare module '*.json' 
  const value: any;
  export default value;

3) 将import 更改为require

但到目前为止还没有运气。

我的 devDependencies 包括：

"@angular-devkit/build-ng-packagr": "^0.13.8",
"@angular/cli": "~7.3.6",
"@angular/common": "~7.2.0",
"@angular/compiler": "^7.2.12",
"@angular/compiler-cli": "^7.2.12",
...

【问题讨论】：

尝试创建一个静态 JSON 文件并导入它，可能是您的文件或 JSON 格式存在问题。

你也可以添加 firebase.json 吗？

添加了 firebase.json。它在我的应用程序中运行良好，但我想将它导入到角度库 sdk 中，这就是它失败的地方。

Angular 6 - Load JSON from local的可能重复

不幸的是，那里的答案都没有解决我的问题（这似乎有所不同）。

【参考方案1】：

历经千辛万苦，我们找到了解决方案here。

这基本上是你在第一次尝试时所做的，但你需要多添加一个选项。

"resolveJsonModule": true,  
"esModuleInterop": true,
"allowSyntheticDefaultImports": true

另外：

"annotateForClosureCompiler": false

注意：对于最后一个道具，这是同一个文件，但不是将其添加到compilerOptions，而是将其添加到angularCompilerOptions

【讨论】：

不，仍然有“位置 0 处的 JSON 中的意外令牌 /”

我添加了完全相同的问题并在angularComplierOptions 上禁用annotateForClosureCompiler 修复它。