मैं कोणीय मानचित्रों का उपयोग करके एक मानचित्र एप्लिकेशन का निर्माण कर रहा हूं और स्थानों को परिभाषित करने वाले मार्करों की एक सूची के रूप में JSON फ़ाइल आयात करना चाहता हूं। मैं इस JSON फ़ाइल को मार्कर के रूप में उपयोग करने की उम्मीद कर रहा हूं [] app.component.ts के अंदर सरणी। टाइपस्क्रिप्ट फ़ाइल के अंदर मार्करों के हार्डकोड सरणी को परिभाषित करने के बजाय।
मेरी परियोजना में उपयोग के लिए इस JSON फ़ाइल को आयात करने की सबसे अच्छी प्रक्रिया क्या है? किसी भी दिशा में बहुत सराहना की!
जवाबों:
Aonepathan का वन-लाइनर मेरे लिए हाल ही में टाइपस्क्रिप्ट अपडेट होने तक काम कर रहा था।
मुझे Jecelyn Yeen की पोस्ट मिली जो इस स्निपेट को आपकी TS परिभाषा फ़ाइल में पोस्ट करने का सुझाव देती है
typings.d.tsनीचे सामग्री के साथ प्रोजेक्ट के रूट फ़ोल्डर में फ़ाइल जोड़ें
declare module "*.json" {
const value: any;
export default value;
}
और फिर अपना डेटा इस तरह आयात करें:
import * as data from './example.json';
टाइपस्क्रिप्ट 2.9 ( डॉक्स ) ने बेहतर, बेहतर समाधान पेश किया। कदम:
resolveJsonModuleअपनी tsconfig.jsonफ़ाइल में इस पंक्ति के साथ समर्थन जोड़ें :"compilerOptions": {
...
"resolveJsonModule": true
}
आयात कथन अब एक डिफ़ॉल्ट निर्यात मान सकता है:
import data from './example.json';
और intellisense अब json फ़ाइल की जाँच करेगा यह देखने के लिए कि क्या आप Array आदि विधियों का उपयोग कर सकते हैं। बहुत अच्छा।
Cannot find module '*.json'. Consider using '--resolveJsonModule' to import module with '.json' extensionts(2732)
"esModuleInterop": true,टाइपस्क्रिप्ट डॉक्स में निर्दिष्ट के रूप में भी जोड़ने की आवश्यकता थी , हालांकि वे इसके बजाय के commonjsरूप में उपयोग करने के लिए कहते moduleहैं esnext। यह या तो काम करने लगता है। क्या एस्केज के डिफ़ॉल्ट के साथ छड़ी करने का विरोध करने के लिए सामान्य (जैसे डॉक्स में उल्लिखित) स्विच करने का कोई कारण है?
"esModuleInterop":true। इसके अलावा VS कोड अभी भी मुझे एक त्रुटि दिखा रहा है .. लेकिन सब कुछ ठीक काम करता है
"allowSyntheticDefaultImports": trueमें compilerOptionsएक ताजा कोणीय 9.1.11 परियोजना के साथ भी है।
जैसा कि इस लाल पोस्ट में कहा गया है , कोणीय 7 के बाद, आप इन 2 चरणों में चीजों को सरल बना सकते हैं:
compilerOptionsअपनी tsconfig.jsonफ़ाइल में उन तीन पंक्तियों को जोड़ें :"resolveJsonModule": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
import myData from '../assets/data/my-data.json';
और बस। अब आप myDataअपने घटकों / सेवाओं में उपयोग कर सकते हैं ।
esModuleInteropलिए है?
यहाँ पर पूर्णांक का उत्तर है
से कोणीय CLI डॉक , json आस्तियों के रूप में माना जाता है और ajax अनुरोध के उपयोग के बिना मानक आयात से पहुँचा जा सकता।
मान लीजिए कि आप अपनी जसन फ़ाइलों को "अपने जोंस-डायर" निर्देशिका में शामिल करते हैं:
"your-json-dir" को angular.json फ़ाइल में जोड़ें (:
"assets": [
"src/assets",
"src/your-json-dir"
]
टाइपिंग बनाएँ या संपादित करें। dot.ts फ़ाइल (आपके प्रोजेक्ट रूट पर) और निम्नलिखित सामग्री जोड़ें:
declare module "*.json" {
const value: any;
export default value;
}
यह टाइपस्क्रिप्ट त्रुटि के बिना ".json" मॉड्यूल के आयात की अनुमति देगा।
अपने नियंत्रक / सेवा / कुछ और फ़ाइल में, बस इस रिश्तेदार पथ का उपयोग करके फ़ाइल आयात करें:
import * as myJson from 'your-json-dir/your-json-file.json';
इनपुट दोस्तों के लिए धन्यवाद, मैं फिक्स को खोजने में सक्षम था, मैंने ऐप डॉट कॉम के शीर्ष पर json को जोड़ा और परिभाषित किया।
var json = require('./[yourFileNameHere].json');
यह अंततः मार्करों का उत्पादन किया और कोड की एक सरल रेखा है।
error TS2304: Cannot find name 'require'.जोड़कर हल किया गया declare var require: any;, जैसा कि प्रश्न स्टैकओवरफ्लो के उत्तर के लिए स्वीकृत उत्तर की टिप्पणियों में समझाया गया है ।
"compilerOptions": { ... "types": ["node"] },यहां उन लोगों के लिए संबंधित उत्तर है जिनकी आवश्यकता है: stackoverflow.com/a/35961176/1754995
var json = require('./[yourFileNameHere]');बिना विस्तार के। संकलन के समय मेरे पास एक त्रुटि है: Module not found: Error: Can't resolve [yourFileNameHere] in [file name]क्या आपके पास इस मुद्दे को बायपास करने का कोई विचार है?
पहला समाधान - बस अपनी .json फ़ाइल के एक्सटेंशन को .ts में बदलें और फ़ाइल export defaultकी शुरुआत में जोड़ें , जैसे:
export default {
property: value;
}
तब आप बस टाइपिंग जोड़ने की आवश्यकता के बिना फ़ाइल आयात कर सकते हैं, जैसे:
import data from 'data';
दूसरा समाधान HttpClient के माध्यम से json मिलता है।
अपने घटक में HttpClient इंजेक्ट करें, जैसे:
export class AppComponent {
constructor(public http: HttpClient) {}
}
और फिर इस कोड का उपयोग करें:
this.http.get('/your.json').subscribe(data => {
this.results = data;
});
इस समाधान में यहां दिए गए अन्य समाधानों पर एक स्पष्ट उत्साह है - यह आपको पूरे आवेदन को फिर से बनाने की आवश्यकता नहीं है यदि आपका जोंस बदल जाएगा (यह एक अलग फ़ाइल से गतिशील रूप से लोड किया गया है, इसलिए आप केवल उस फ़ाइल को संशोधित कर सकते हैं)।
मैंने कुछ प्रतिक्रियाओं को पढ़ा था और वे मेरे लिए काम नहीं करती थीं। मैं टाइपस्क्रिप्ट 2.9.2, कोणीय 6 का उपयोग कर रहा हूं और जैस्मीन यूनिट टेस्ट में JSON को आयात करने की कोशिश कर रहा हूं। यह मेरे लिए क्या चाल है।
जोड़ें:
"resolveJsonModule": true,
सेवा tsconfig.json
आयात जैसे:
import * as nameOfJson from 'path/to/file.json';
बंद करो ng test, फिर से शुरू करो ।
संदर्भ: https://blogs.msdn.microsoft.com/typescript/2018/05/31/announcing-typescript-2-9/#json-imports
कोणीय 7+ के लिए,
1) प्रोजेक्ट के रूट फोल्डर में एक फ़ाइल "टाइपिंग ..dts" जोड़ें (जैसे, src / typings.d.ts):
declare module "*.json" {
const value: any;
export default value;
}
2) आयात और JSON डेटा तक पहुँच या तो:
import * as data from 'path/to/jsonData/example.json';
...
export class ExampleComponent {
constructor() {
console.log(data.default);
}
}
या:
import data from 'path/to/jsonData/example.json';
...
export class ExampleComponent {
constructor() {
console.log(data);
}
}
src/app/services/फ़ोल्डर में एक सेवा है और आपका json src/assets/data/फ़ोल्डर में है तो आपको इसे निर्दिष्ट करना होगा../../assets/data/your.json
कोणीय 7 में, मैंने बस इस्तेमाल किया
let routesObject = require('./routes.json');
मेरा मार्ग.जॉन फ़ाइल इस तरह दिखता है
{
"routeEmployeeList": "employee-list",
"routeEmployeeDetail": "employee/:id"
}
आप का उपयोग करके json आइटम तक पहुँचते हैं
routesObject.routeEmployeeList
reuqireत्रुटि फेंक देगा - बस declare var require: any;वर्ग घटक के शीर्ष पर जोड़ें ।
टाइपस्क्रिप्ट 2.9 के रूप में , एक बस जोड़ सकते हैं:
"compilerOptions": {
"resolveJsonModule": true
}
को tsconfig.json। इसके बाद, एक json फ़ाइल का उपयोग करना आसान है ( और VSCode में अच्छा प्रकार का अनुमान भी होगा):
data.json:
{
"cases": [
{
"foo": "bar"
}
]
}
आपकी टाइपस्क्रिप्ट फ़ाइल में:
import { cases } from './data.json';
let fs = require('fs');
let markers;
fs.readFile('./markers.json', handleJSONFile);
var handleJSONFile = function (err, data) {
if (err) {
throw err;
}
markers= JSON.parse(data);
}
कोणीय १०
आपको अब इसके बजाय फ़ाइल में "tsconfig.app.json नोटिस " ( नाम में "ऐप" ) को संपादित करना चाहिए ।
वहाँ आप पाएंगे compilerOptions, और आप बस जोड़ते हैं resolveJsonModule: true।
इसलिए, उदाहरण के लिए, एक नए प्रोजेक्ट में फ़ाइल इस तरह दिखनी चाहिए:
/* 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"
]
}