Develop Reference

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"
]
}
}

Why a TypeScript project generated with Create React App can find modules and an Express one doesn't?

I use WebStorm, I created a React project and an Express project with a build-in wizard. I manually added TypeScript to the latter.
Here's my tsconfig.json for React:
{
"compilerOptions": {
"target": "es2017",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
And here's one for express:
{
"compilerOptions": {
"sourceMap": true,
"outDir": "output",
"esModuleInterop": true,
"noImplicitAny": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"strict": true,
"isolatedModules": true,
"module": "esnext",
"target": "es2017",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"allowJS" : true
},
"exclude": [
"node_modules"
],
"include": [
"source/**/*"
]
}
For the express project I needed to set "type": "module" in package.json.
The problem: when I use import in the React project I don't need to add the extension .js to file names, but in the Express project it's necessary, otherwise I'm getting ERR_MODULE_NOT_FOUND.
import {serviceRouter} from "./ServiceRouter";
vs
import {serviceRouter} from "./ServiceRouter.js";

When using ES6 modules ("type": "module"), extensions are mandatory, see https://nodejs.org/api/esm.html#esm_mandatory_file_extensions

TsUml is not creating connection between classes

I have this assignment where i have to generate a class diagram from TypeScript files. I have successfully downloaded TsUml and it generates the classes without any connections between them
I 've tried re-writing the tsconfig.json file as shown below but it still doesn't work.
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5"
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules",
"src/**/*.spec.ts",
"src/**/__tests__/*.ts"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}

Angular 2 - AoT 404

from : https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
After compiling my project with ngc, I keep getting a 404 on start
404 GET /aot/app/app.module.ngfactory
if I try to access the resource in the browser it works
200 GET /aot/app/app.module.ngfactory.js
I dont understand why angular does not add the ".js" extension here
details :
I modified my main.ts:
import { platformBrowser } from '#angular/platform-browser';
import { AppModuleNgFactory } from '../aot/app/app.module.ngfactory';
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
I compiled with ngc:
node_modules\.bin\ngc -p tsconfig-aot.json
tsconfig-aot.json:
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
},
"files": [
"app/app.module.ts",
"app/main.ts"
],
"angularCompilerOptions": {
"genDir": "aot",
"skipMetadataEmit" : true
}
}
thanks