9

I'm having trouble importing JSON file to my environment file in Angular 7 library. My environment.ts file looks like this:

import firebase from './firebase.json';

export const environment = {
  production: false,
  firebase,
};

And firebase.json:

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

But unfortunately when running ng build it fails:

> 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

I've tried already:

1) Adding to tsconfig.json 

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

2) Adding typings.d.ts with

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

3) Changing import to require

But no luck so far.

My devDependencies include:

"@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",
...
Gerda
  • 91
  • 1
  • 4
  • Try creating a static JSON file and importing it, probably an issue with your file or JSON format. – sabithpocker Apr 10 '19 at 14:40
  • Can you add firebase.json as well? – sabithpocker Apr 10 '19 at 14:44
  • Added firebase.json. It was working fine in my app, but I would like to import it to angular library sdk and that's where it fails. – Gerda Apr 10 '19 at 14:45
  • Possible duplicate of [Angular 6 - Load JSON from local](https://stackoverflow.com/questions/50924901/angular-6-load-json-from-local) – Kamil Naja Apr 10 '19 at 14:49
  • Unfortunately none of the answers there solve my problem (which seems to be different). – Gerda Apr 10 '19 at 15:27
  • Your setup looks fine, I wonder if the problem is related to environment file rewrite? Can you try and import the json and log it in another file, not environment? – sabithpocker Apr 10 '19 at 15:30
  • So I tried to import JSON file to one of my services in the library. The build still fails. I also tried to make the file completely empty, still the same thing... – Gerda Apr 11 '19 at 05:54
  • May be check the issues at rollup-plugin-json, like [this one](https://github.com/rollup/rollup-plugin-babel/issues/48#issuecomment-211025960). If nothing helps open an issue with them, they might help. – sabithpocker Apr 11 '19 at 08:48

1 Answers1

10

After a lot of suffering we found that solution here.

It's basically what you've done in the first try, but you need to add one option more.

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

Additionally:

"annotateForClosureCompiler": false

Note: for the last prop, that's the same file but instead of adding it to the compilerOptions, add it to angularCompilerOptions

David
  • 4,336
  • 2
  • 23
  • 31
Radek Konrad Furmański
  • 119
  • 4