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.
Related
I created typescript using typeORM to connect mySQL. seemed to work fine with the below config
{
"compilerOptions": {
"lib": [
"es5",
"es6"
],
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"outDir": "./build",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"strictPropertyInitialization": false
},
"files": [
"./src/index copy.ts",
"./src/index.ts",
"./src/entity/Catalog.ts",
"./src/entity/CatalogTimestamp.ts",
"./src/entity/User.ts",
"./src/entity/contracts.ts",
"./src/entity/metadata.ts",
"./src/entity/networks.ts",
"./src/entity/parcels.ts",
"./src/entity/tokens.ts"
],
"exclude": [
"./build"
]
}
But, I am trying to add it to an existing typescript where I am using stacks.js to call functions on a smartcontract. This code worked fine (see [https://stackoverflow.com/questions/71146879/error-ts1378-top-level-await-expressions-are-only-allowed-when-the-module-o][1])
Now when I run
npm start
I get the above error referencing this part of the code where run is redlined.
async function run() {
const transaction = await makeContractCall(txOptions);
const broadcastResponse = await broadcastTransaction(transaction, network);
const txId = broadcastResponse.txid;
console.log(broadcastResponse)
}
run().then(console.log).catch(console.error);
This part of the code works fine when the target is set to es2020.
Can you use both the es5 target and the ES2020? I a trying to read/write from a mySQL file to/from a Stacks smart contract NFT.
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 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
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.
I use gulp-typescript to compile the angular2 app. I get the following error.
C:/src/Terminal.Web/src/Terminal.Web/node_modules/angular2/src/facade/async.d.ts(3,53):
error TS2307: Cannot find module '#reactivex/rxjs/dist/cjs/Rx'.
C:/src/Terminal.Web/src/Terminal.Web/node_modules/angular2/src/facade/async.d.ts(4,25):
error TS2307: Cannot find module '#reactivex/rxjs/dist/cjs/Rx'.
[12:18:32] TypeScript: 4 semantic errors
C:/src/Terminal.Web/src/Terminal.Web/node_modules/angular2/src/facade/async.d.ts(5,22):
error TS2307: Cannot find module '#reactivex/rxjs/dist/cjs/Operator'.
C:/src/Terminal.Web/src/Terminal.Web/node_modules/angular2/src/facade/lang.d.ts(2,22):
error TS2304: Cannot find name 'BrowserNodeGlobal'.
This is the gulp task.
paths.appJs = "app/**/*.ts";
paths.appNg2ComponentsJs = "ng2components/**/*.ts";
paths.appHtml = "app/**/*.html";
paths.appJsOut = paths.webroot + "app/";
paths.angualr2Typings = "node_modules/angular2/typings/";
gulp.task("compile-app-components", function () {
var tscResult = gulp.src([paths.appNg2ComponentsJs, paths.angualr2Typings + "**/*.d.ts"])
.pipe(tsc({
"target": "es5",
"module": "system",
"declaration": false,
"noImplicitAny": false,
"removeComments": true,
"noLib": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"listFiles": true,
}));
return tscResult.js
.pipe(gulp.dest(paths.appJsOut));
});
First, you should not add .d.ts definition files to your gulp build task:
paths.appJs = "app/**/*.ts";
paths.appNg2ComponentsJs = "ng2components/**/*.ts";
paths.appHtml = "app/**/*.html";
paths.appJsOut = paths.webroot + "app/";
gulp.task("compile-app-components", function () {
var tscResult = gulp.src([paths.appNg2ComponentsJs, paths.appJs])
.pipe(tsc({
"target": "es5",
"module": "system",
"declaration": false,
"noImplicitAny": false,
"removeComments": true,
"noLib": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"listFiles": true
}));
return tscResult.js
.pipe(gulp.dest(paths.appJsOut));
});
Moreover, you need to write
///<reference path="path/to/file.d.ts" />
lines at the beginning of your .ts scripts (i.e. to those in paths.appJs) where they are necessary (TypeScript compiler tells you when it does not know an identifier).
If you are using JSPM the solution is move the tsconfig to wwwroot
Add the following line to the wwwroot/tsconfig.json so that systemjs won’t try to load sourcemaps:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": false
},
"exclude": [
"jspm_packages"
]
}