I am trying to import a .json file into a typescript file in angular.
import * as languagesData from './../../data/languages.json';
The above import statement gives the following error:
untouchable-app/library/data/languages"' resolves to a non-module entity and cannot be imported using this construct.
Folder structure.
library/
projects/
node_modules/
tsconfig.json
typings.d.ts
I have updated to typescript version 2.9.2
package.json
"devDependencies": {
"typescript": "^2.9.2"
}
typings.d.ts
declare module "*.json" {
const value: any;
export default value;
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"resolveJsonModule": true,
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
],
"paths": {
"library": [
"library/"
],
"library/*": [
"library/*"
]
}
}
}
library/services/report/report.service.ts
import * as languagesData from './../../data/languages.json';
projects/project-name/src/app/app.component.ts
import { ReportService } from 'library/services/report/report.service';
Note
I have a "library" folder which contains common components and services that can be shared across multiple apps contained in my projects folder. I am importing a service from the library into my application. The service file is the one that contains the import statement to the json data.
