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.
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 done a small change in a css file, rebuild the project and deploy it.
However I can not see the change.
What I am doing wrong or missing in the building process?
Some help will be really appreacite.
Thanks.
EDIT
"development": {
"outputPath": "C:/inetpub/wwwroot/project/public",
"baseHref": "https://example.org/",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
environment.dev.ts
export const environment = {
apiUrl: 'https://example.org/',
loginUrl: 'https://example.org/notice.php',
indexUrl: 'https://example.org/',
assestHost: 'https://example.org/',
production: true,
};
My bad, I had a problem doing the merge.
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
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');