I am building a map application using Angular Maps and want to import a JSON file as a list of markers defining locations. I'm hoping to use this JSON file as marker[] array inside the app.component.ts . Instead of defining a hardcoded array of markers inside the TypeScript file.
What is the best process of importing this JSON file for use in my project? Any direction greatly appreciated!
This question is related to
json
angular
google-maps
typescript
maps
For Angular 7+,
1) add a file "typings.d.ts" to the project's root folder (e.g., src/typings.d.ts):
declare module "*.json" {
const value: any;
export default value;
}
2) import and access JSON data either:
import * as data from 'path/to/jsonData/example.json';
...
export class ExampleComponent {
constructor() {
console.log(data.default);
}
}
or:
import data from 'path/to/jsonData/example.json';
...
export class ExampleComponent {
constructor() {
console.log(data);
}
}
I couldn't import a different file.json too. But I resolved it like this
const swaggerDoc = require('../swagger.json')
As of Typescript 2.9, one can simply add:
"compilerOptions": {
"resolveJsonModule": true
}
to the tsconfig.json
. Thereafter, it's easy to use a json file (and there will be nice type inference in VSCode, too):
data.json
:
{
"cases": [
{
"foo": "bar"
}
]
}
In your Typescript file:
import { cases } from './data.json';
As stated in this reddit post, after Angular 7, you can simplify things to these 2 steps:
compilerOptions
in your tsconfig.json
file:"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
import myData from '../assets/data/my-data.json';
And that's it. You can now use myData
in your components/services.
Here is complete answer for Angular 6+ based on @ryanrain answer:
From angular-cli doc, json can be considered as assets and accessed from standard import without use of ajax request.
Let's suppose you add your json files into "your-json-dir" directory:
add "your-json-dir" into angular.json file (:
"assets": [
"src/assets",
"src/your-json-dir"
]
create or edit typings.d.ts file (at your project root) and add the following content:
declare module "*.json" {
const value: any;
export default value;
}
This will allow import of ".json" modules without typescript error.
in your controller/service/anything else file, simply import the file by using this relative path:
import * as myJson from 'your-json-dir/your-json-file.json';
I had read some of the responses and they didn't seem to work for me. I am using Typescript 2.9.2, Angular 6 and trying to import JSON in a Jasmine Unit Test. This is what did the trick for me.
Add:
"resolveJsonModule": true,
To tsconfig.json
Import like:
import * as nameOfJson from 'path/to/file.json';
Stop ng test
, start again.
Reference: https://blogs.msdn.microsoft.com/typescript/2018/05/31/announcing-typescript-2-9/#json-imports
In angular7, I simply used
let routesObject = require('./routes.json');
My routes.json file looks like this
{
"routeEmployeeList": "employee-list",
"routeEmployeeDetail": "employee/:id"
}
You access json items using
routesObject.routeEmployeeList
First solution - simply change the extension of your .json file to .ts and add export default
at the beginning of the file, like so:
export default {
property: value;
}
Then you can just simply import the file without the need to add typings, like so:
import data from 'data';
Second solution get the json via HttpClient.
Inject HttpClient into your component, like so:
export class AppComponent {
constructor(public http: HttpClient) {}
}
and then use this code:
this.http.get('/your.json').subscribe(data => {
this.results = data;
});
This solution has one clear adventage over other solutions provided here - it doesn't require you to rebuild entire application if your json will change (it's loaded dynamically from a separate file, so you can modify only that file).
Angular 10
You should now edit the tsconfig.app.json
(notice the "app" in the name) file instead.
There you'll find the compilerOptions
, and you simply add resolveJsonModule: true
.
So, for example, the file in a brand new project should look like this:
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [],
"resolveJsonModule": true
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
let fs = require('fs');
let markers;
fs.readFile('./markers.json', handleJSONFile);
var handleJSONFile = function (err, data) {
if (err) {
throw err;
}
markers= JSON.parse(data);
}
Thanks for the input guys, I was able to find the fix, I added and defined the json on top of the app.component.ts file:
var json = require('./[yourFileNameHere].json');
This ultimately produced the markers and is a simple line of code.
Source: Stackoverflow.com