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"
]
}
}
Related
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?
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
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
lib1.js is an es6 module
export function greet() {
console.log('Hello from Greet');
}
In main.js call greet(). VsCode auto import will add an import for
const { greet } = require('./lib1');
...instead of
import { greet } from './lib1';
jsconfig.json
{
"compilerOptions": {
"target": "es6",
"allowSyntheticDefaultImports": true
},
"module": "es2015"
}
How do I fix this?
P.S. I've tried "type": "module" in package.json too.
in most case , it will work fine with a jsconfig at root.
ex: jsconfig.json
{
"compilerOptions": {
"target": "es2020",
"module": "esnext",
"jsx": "react",
"checkJs": true,
"lib": ["esnext", "dom"],
"esModuleInterop": true, // force import
"moduleResolution": "node",
"allowSyntheticDefaultImports": true, // force import
},
"include": ["src/**/*"]
}
but if for any reason you use also a tsConfig in your root (example for generate d.ts from js), you will need to add "allowJs": true
ex: tsConfig.json
{
"include": ["src/"],
"exclude": ["node_modules"],
"compilerOptions": {
"target": "ES6",
"module": "ES6",
"jsx": "react",
"esModuleInterop": true,
"checkJs": true,
// default false, and will break jsconfig import, because with ts, vscode will think all js file are for nodejs, and no sugar import for nodejs.
"allowJs": true,
"lib": ["esnext", "dom"],
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"allowUnreachableCode": true,
"outDir": "types/",
"emitDeclarationOnly": true,
"declaration": true
}
}
After all edit, you should restart ts server.
type restart for English, you should found it and it can take time.
We have an Asp.net MVC 5 web application with Angular 2
It supports Chrome/Firefox/Edge, but it fails to load in IE 11. It shows below error.
tsconfig:
{
"compilerOptions": {
"target": "es2015",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"types": []
},
"exclude": [
"node_modules",
"jspm_packages"
],
"compileOnSave": true
}
Layout.cshtml:
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="/systemjs.config.js"></script>
<script>
System.import('app').catch(function (err) { console.error(err); });
</script>
Is there any way to make it work in IE10/IE11 ???
Replace your tsConfig code with below it should work
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": true,
"types": [],
"lib": [ "es2015", "es2017", "dom" ]
},
"exclude": [
"node_modules"
],
"compileOnSave": true
}
The target version you are using for the compiler is producing code not supported by IE (ES2015). Change it to an older version.