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?

TypeScript relative path does not resolve to index file

I'm working on a project and I set up absolute path imports in my project. But, it doesn't resolve to the index file if I put only up to the folder name.
src
|--modules
|--search
|--utils.ts
|--index.ts
When I import,
import { something } from 'modules/search/index'
it works fine.
But, I when I import like
import { something } from 'modules/search'
It says, src/modules/search.ts not found.
Following is my tsconfig.json.
{
"compileOnSave": false,
"compilerOptions": {
"rootDir": ".",
"strict": true,
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"module": "esnext",
"lib": ["es2017", "dom"],
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"baseUrl": "src",
},
"exclude": ["node_modules", "tmp"]
}
How can I solve this problem?
The expected behavior is,
import { something } from 'modules/search' should resolve to src/modules/search/index.ts
import { something } from 'modules/search/utils' should resolve to src/modules/search/utils.ts

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

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

"export 'default' (imported as 'core_1') was not found in '#angular/core'

I'm building an Angular library with ng-packagr.
When serving my app with the packed library used, I get this warning:
. Furthermore, when serving the app, I get this errormessage:
core_1 is imported alongside other modules in the top:
import core_1, { Component, Inject, Injectable, InjectionToken, NgModule } from '#angular/core';
UPDATE!!
The configuration is as follows:
ng-package.json
{
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"src": "lib",
"dest": "dist/auth",
"workingDirectory": ".ng_build",
"lib": {
"entryFile": "public_api.ts",
"externals": {
"oidc-client": "./node_modules/oidc-client/dist/oidc-client.min.js",
"rxjs/add/operator/let": "Rx.Observable.prototype"
}
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"lib": [
"es6",
"dom"
],
"moduleResolution": "node",
"declaration": true,
"experimentalDecorators": true,
"baseUrl": ".",
"stripInternal": true,
"outDir": "./dist",
"sourceMap": true,
"inlineSources": true,
"skipLibCheck": true
},
"exclude": [
"node_modules",
"dist",
"demo",
"config",
"coverage",
"src/**/*.spec.ts"
],
"angularCompilerOptions": {
"strictMetadataEmit": true,
"skipTemplateCodegen": true,
"trace": true
}
}

EUREKA
Fixed by playing with the tsconfig in both the library, and the angular project :
tsconfig.lib.json
{
"extends": "../../tsconfig.json",
"compilerOptions": {
// 👍 these two lines
"target": "es2015",
"module": "esnext",
},
"angularCompilerOptions": {
"annotateForClosureCompiler": true,
"skipTemplateCodegen": true,
"strictMetadataEmit": true,
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"enableResourceInlining": true
},
"exclude": [
"src/test.ts",
"**/*.spec.ts"
]
}
and in the target project :
tsconfig.json
{
"compilerOptions": {
"module": "esnext"
}
}
tsconfig.app.json
{
"compilerOptions": {
"module": "esnext"
}
}