I need to import this json file that it is in the assets filder.
{
"HOME": "home"
}
So I do in my component:
import config from "../../../assets/file/config.json";
But I obtain this error:
Cannot find module '../../..//config.json'. Consider using '--resolveJsonModule' to import module with '.json' extension
So I modified my tsconfig.json in this way:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"lib": ["es2018", "dom"],
"resolveJsonModule": true,
"esModuleInterop": true
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
But the error it doesn't disappear, it is throwed the same. Anyone can help me?
folder structure is
assets/ file/ and in the /file there is the config.jo;
Try the import statement below :-
import * as config from "../../../assets/file/config.json";
Try importing it directly from the asset as :
import config from "assets/file/config.json";
And further, if it doesn't work, you may need to set "resolveJsonModule": true in ts.config
Related
I'm building a node module that builds reports using html-pdf.
I got an html file in which I'm trying to access images in ways like:
These images are under src/templates/ and bundled as dist/templates.
This should be consumed from a nextjs application.
What I noticed is that the absolute path worked for me, I mean, if I print it points to the image.
For full path: i'm doing path.join(__dirname, "templates", "header-footer.png")
tsconfig.json
{
"include": ["src", "types"],
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"lib": ["dom", "esnext"],
"esModuleInterop": true,
"importHelpers": true,
"sourceMap": true,
"declaration": true,
"moduleResolution": "node",
"skipLibCheck": true,
"rootDir": "./src",
"outDir": "./dist",
"strict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"noUnusedLocals": true,
"noUnusedParameters": true
}
}
Any clues about this?
I've tried also to use a URL relative to the root directory of the site su
<img src="/templates/header-footer.png" />
So, after burning my brain for some days, i found that i have to define a basepath within the lib options as this
var options = {
format: "A4",
base: "file:///" + __dirname + "/",
localUrlAccess: true, // set this to true to enable local file access
};
and in my html refer to he files as:
src="templates/header-logo.png"
This works.
I have problem importing json files into typescript. I have configured tsconfig.json according to the convention, but it still does not work in the environment.ts file, however in the environment.prod.ts file, the import works perfectly
environment.ts
import { domain, clientId, audience, serverUrl } from '../../auth_config.json';
export const environment = {
production: false,
auth: {
domain,
clientId,
redirectUri: window.location.origin,
audience,
},
dev: {
serverUrl,
},
};
ERROR -->
Cannot find module '../../auth_config.json'. Consider using '--resolveJsonModule' to import module with '.json' extensionts(2732)
environment.prod.ts
import { domain, clientId, audience, serverUrl } from '../../auth_config.json';
export const environment = {
production: true,
auth: {
domain,
clientId,
redirectUri: window.location.origin,
audience,
},
dev: {
serverUrl,
},
};
Its work ok.
My tsconfig.json
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
}
],
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [],
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"strict": true,
"resolveJsonModule": true,
"esModuleInterop": true
},
}
I am several days, without finding why. Thank you.
Here you can see the error.
Now mark it in console, but not in the file.
Just faced a similar problem and found the solution on typescriptlang.org. You need to enable following option:
resolveJsonModule -
Allows importing modules with a ‘.json’ extension, which is a common practice in node projects. This includes generating a type for the import based on the static JSON shape.
TypeScript does not support resolving JSON files by default.
So enabling this option in you tsconfig.json under compilerOptions should do the job:
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
}
],
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [],
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"strict": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"resolveJsonModule": true
},
}
Maybe you also need to enable allowSyntheticDefaultImports to avoid eslint errors.
I have a json file which looks like this
{
"type": "service_account",
"project_id": "blele",
"private_key_id": "9c0a8fe58c6a35a1640677b7dbf5b",
"private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCQAsmXWkbeNsLn\nktPmTGONatPlZevmvSDO0IIMymUuRHPOuTQRm6k6WkYB1BB5gulGOsOc10hGrscK\nJtxj/G+eZguTvybosKdwVbm5sZ1jCUlS/TdmAVtJVWGf1YT/nxS1RuT+d7obFGN3\nNhMzQ2sm6JwmPIfF7kcfcU9Cjgjj5mDMa7OO2PQ4/gkKi+8/HhMge/4Wde\nd+/htb6ZA6BdHFSoevHHgTkkygJF47oDeirSN5VDDc1FYqSSZnCZ45uRik3RsAcw\ndInRhknSKdcbqyug9FQgM6l9T8a0sMpwgVcAjq3WaJaUgO1Wd9nfMhoItZvc6cIc\nbbBl3FxRAgMBAAECggEACK2gNQBGsRBfR0hdE/Y0oWnlJg8tSdM\nWDx6WgZIkhrfBZyvGndsUb5YS9MASLwfA+pYFRFg84lgMLjP4i1FBcSwsrM0kgN8\n/uqB5Fx4EQj7X0uZXmMKdysMwRXbaebWYJhqW0g4hIl3YW6urIGRoPb3q+n/Muy1\nhmZhaTTi34cDJLZSbywiMxSBSqlHstlLeK7jQTIU3y0lmC4snTiMjjXjDxGHD0em\nLKlMAouZbr/kj9M+iSj+9SQoH7ZR9FD7saoncJuOUZdH7Mwz+TvqS7bbm70P7zRR\nVwpDAeqc6XP8Hv6f2hhD62x5kmopSB0CP0MhZ/JjUQKBgQDCPDdP0MnlCnRf5xV8\n6ZJSWK5QOr894GKhQwbiddVTaNPPKlqqN+HM/r69SAwNYoZ+pAH9Us01vbWaoZIE\n0afNWqRcKAQucF6kU5C3zVpMFlW2bX9wxKZA3WdIyKnND7WiHr6zO+bqNoUckY0N\nUi6pS3m4ZnPSdfVb3ULHgt8eiQKBgQC9zgrwnotEUsyD85IaEDBXEPf3XfjmKN/n\n3WppgzDgC95qQVcgkb6LZcNsKXQqBcmeNP8UDIbhVmylMw18MBM9UjNBK8BztI3Q\n9ESsrYVOFnnxQfUqDSPCraHI4qD4/sKQi/8l/CKx4Al9exnvj1awJssAfQSAJraJ\nEjzGCiOdiQKBgQC/+5bMPFmiGsBGHnk9uvwWinLY+AgY19WFAWQnqEJPrDhW9s0g\nnBWCcnUDT9ghzrWTLPaOdi5BJR8AFRznyHZsYmA8eo0PfZ/+Gl7bXY0X0aespfQl\n+Sk+ydgRt80l05Y7BNqG+/lUnMjbIP5jIUzfpqtL2XA3oMIAp+UeoDt6yQKBgE6f\nKcLwOYoMrjC+VTe8mvmFyuFJqM9WASGfgvO/5x/3aqMi+78+/+noNmH4bej2SsTg\n+QRKKqMNCLQnNmn3UYNLm6LXoc9t2gdIphBMLxL2L3zx+3IIvXl4\ntDD81zZNMkErG9wyyNrgxtgl8RZQcu4mggyrRu/CMh\nAU4EdEzxmT3jtAg28bGUys1ZINw0OY2Tlr4wZzW/iaIIK34VvtsByrNJ1G4nKlnS\n6xIYt5gv7buhMI/E8MBcf5EOThegr0kS/GYTd2H5u/Oj+gE33+V5C9qdk84v2Hn6\n1dUqBNjWjtlbRXjxFv4UAQ4=\n-----END PRIVATE KEY-----\n",
"client_email": "firebase-adminsdk-0fcdc#be.iam.gserviceaccount.com",
"client_id": "10713329946488",
"auth_uri": "https://accounts.google.com/o/oauth2/auth",
"token_uri": "https://oauth2.googleapis.com/token",
"auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
"client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-0fc.gserviceaccount.com"
}
in ./.keys/admin.keys.json
I want to import that file in index.ts.
When I did something like this
import firebaseKeys from './.keys/admin.keys.json'
it is giving me an error (red underline on the vscode saying
Module
'"/Users/aia/Desktop/ble-typescript/functions/src/.keys/admin.keys"'
can only be default-imported using the 'esModuleInterop' flagts(1259)
admin.keys.json(1, 1): This module is declared with using 'export =',
and can only be used with a default import when using the
'esModuleInterop' flag.
this how my tsconfig looks like
{
"compilerOptions": {
"moduleResolution": "node",
"experimentalDecorators": true,
"module": "commonjs",
"noImplicitReturns": true,
"noUnusedLocals": true,
"outDir": "lib",
"sourceMap": true,
"strict": true,
"target": "es2017",
"resolveJsonModule": true
},
"compileOnSave": true,
"include": [
"src"
],
"exclude": ["node_modules"]
}
This is my first project so can someone help me in comprehending how i can use .json file in typescript?
You can do this by adding "esModuleInterop": true under "compilerOptions" in your tsconfig.json:
{
"compilerOptions": {
..
"resolveJsonModule": true,
"esModuleInterop": true
},
..
}
Form more information on compiler options, see the compiler options documentation.
I need to use mock json to test my front-end render.
import MOCK_FAQ from '../../mocks/FAQ.json';
When I try to import the file i got this exception:
Cannot find module '../../mocks/FAQ.json'. Consider using '--resolveJsonModule' to import module with '.json' extensionts(2732)
But I'm ready using this property on my tsconfig file:
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"isolatedModules": true,
"jsx": "react",
"lib": [
"dom",
"es6"
],
"moduleResolution": "node",
"noEmit": true,
"strict": true,
"target": "esnext"
},
"exclude": [
"node_modules",
"babel.config.js",
"metro.config.js",
"jest.config.js"
]
}
Someone can helps? o/
It should work if you set "resolveJsonModule": true. and save tsconfig.json like:
import * as MOCK_FAQ from '../../mocks/FAQ.json';
Or you can try another way to import json file as below:
const MOCK_FAQ = require('../../mocks/FAQ.json');
Currently my Angular project compiles on save and whenever there is a code change. I would like it such that it only compiles on a save.
My tsconfig.json:
{
"compileOnSave": true,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2018",
"dom"
]
}
}
Turn of the autoSave feature.
To Change:
File > Preferences > Settings > Search autoSave > select off
User Settings after change:
"files.autoSave": "off",
You'll need to run ng serve --watch=false if you don't want it to watch for changes.