Develop Reference

Typescript - write ES6 modules and transpile to Node

I use typescript to make NPM module and I write modules like export default xyz; but I'd like TSC to translate it to CommonJS on transpilation.
And I want to keep const and other ES6, just need the exports to be Node...
I've tried many TSCONFIG, as advised in some topics, currently it looks like
{
"compilerOptions": {
"incremental": true,
"target": "ES6",
"moduleResolution": "Node",
"esModuleInterop": true,
"declaration": true,
"declarationMap": true,
"removeComments": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"sourceRoot": "",
"outDir": "dist"
},
"include": [
"./src/main.ts"
],
"exclude": []
}
but it still produces JS file with export default xyz instead of module.exports = xyz.
How do I make it work?

Define in your config which module code should be generated by the typescript compiler.
{
...
"module": "CommonJS",
...
}
ref

I was looking for creating Node16 module from ES6 import/export and I think I just didn't combine it properly.
Thanks to #jonrsharpe, found the option is modules.
{
"compilerOptions": {
"strict": true,
"target": "ES6",
"module": "Node16",
"declaration": true,
"declarationMap": true,
"removeComments": true,
"forceConsistentCasingInFileNames": true,
"sourceRoot": "",
"outDir": "dist"
},
"include": [
"./src/main.ts"
],
"exclude": []
}

Error [ERR_REQUIRE_ESM]: require() of ES Module not supported : file-url

I'm getting this strange error:
Error [ERR_REQUIRE_ESM]: require() of ES Module /home/raphy/Raphy-Template/node_modules/file-url/index.js from /home/raphy/Raphy-Template/dist/src/main/main.js not supported.
Instead change the require of index.js in /home/raphy/Raphy-Template/dist/src/main/main.js to a dynamic import() which is available in all CommonJS modules
And I do not understand why this happens:
node: v16.15.0 ,
typescript": "^4.5.4 ,
O.S: Ubuntu 20.04 Desktop
This is tsconfig.json :
{
"compilerOptions": {
"typeRoots": ["./node_modules/#types"],
"target": "es2021",
"module": "commonjs",
"lib": ["es2021"],
"outDir": "dist",
//"jsx": "react",
"jsx": "react-jsx",
"baseUrl": "./src",
"paths": {
"#sections/*": ["app/sections/*"],
"#app/*": ["app/*"]
},
"strict": true,
"sourceMap": true,
"skipLibCheck": true,
"noImplicitAny": false,
"noImplicitThis": false,
"moduleResolution": "node",
"esModuleInterop": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"allowJs": true
},
"include": ["src/**/*"],
"exclude": [
"src/index.js",
"dist",
]
}
And in main.ts I import file-url in this way:
import fileUrl from 'file-url'
Where I'm already importing many other packages in the same way without any problems:
For example: import validUrl from 'valid-url';
does not give any error
But in the compiled file /dist/src/main.js : I see :
const file_url_1 = __importDefault(require("file-url"));
How to solve the problem?

Angular Upgrade from 8 to 9 - Ivy Compilation Errors in Templates

I successfully upgrade my angular app from version 8 to version 9 according to Angular Update Guide, and i solved all the issues that occurred in ts files.
In version 8 i was not using Ivy, i was using View Engine as it is the default.
After the upgrade to 9 my angular application is working only with the Ivy disabled ("enableIvy": false in tsconfig.json). With Ivy enabled am getting a lot of errors in templates, some of those errors are:
Can't bind to 'my-property' since it isn't a known property of 'my-component'
No directive found with exportAs 'ngForm'
Can't bind to 'ngClass' since it isn't a known property of 'div'
Can't bind to 'routerLink' since it isn't a known property of 'a'
templateUrl: "./my-component.component.html", Error occurs in the template of component
I am not getting those errors using View Engine and the app works fine.
It seems to be a configuration or Modules Import issue?
Am lazy loading modules like:
loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
In package.json am using
"postinstall": "ngcc"
And in tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"downlevelIteration": true,
"importHelpers": true,
"module": "esnext",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es6",
"typeRoots": ["node_modules/#types"],
"types": ["jest"],
"lib": ["es2015", "dom"],
"skipLibCheck": true
},
"angularCompilerOptions": {
"enableIvy": true
},
}
Any Ideas? :)

In the tsconfig.json, I changed the "target" value from "ES5" to "ES2015", the same value of "module" and it work out for me.
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "ES2015",
"typeRoots": ["node_modules/#types"],
"lib": ["es2018", "dom"]
}
}

Try to change EcmaScript target: "es5". nice explain next link
I use angular 9 i have tsconfig.json this way.
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2018",
"dom"
]
}
}

WebStorm TypeScript inspection errors - isn't shown at realtime?

I'm using WebStorm 2017.2.4 with Angular 4.3 - TypeScript doesn't show errors :
Question
How can I see real time inspections ? immediately ?
(I've already tried invalidating and clear cache).
configuration :
ts.config.json file :
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"noEmitHelpers": true,
"noEmitOnError": true,
"lib": [
"dom",
"es6",
"es2015.iterable"
],
"baseUrl": ".",
"paths": {
"*": [
"./node_modules/tns-core-modules/*",
"./node_modules/*"
]
}
},
"exclude": [
"node_modules",
"platforms",
"**/*.aot.ts"
]
}

WebStorm 2017.2.4 doesn't support TypeScript 2.6 (API was broken). This problem was fixed in WebStorm 2017.2.5.
See also: https://blog.jetbrains.com/webstorm/2017/10/webstorm-2017-2-5/

TypeScript output file doesn't get updated after transpilation

I downloaded this seed for an Angular & TypeScript project. I updated the ts files and then transpiled it with no errors, but the output file doesn't get updated.
tsconfig:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": true,
"sourceMap": true,
"outFile": "dist/app.js"
},
"exclude": [
"node_modules"
],
"files": [
"app/initialize.ts",
"app/welcome/welcome.ts"
]
}
Please let me know if you need any other information.