Develop Reference

Uncaught SyntaxError: Cannot use import statement outside a module - Angular 15

I am using angular 15, where on console I am seeing this error of Uncaught SyntaxError: Cannot use import statement outside a module (at scripts.js:7:1)
This is my tsconfig.json file code
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": false,
"noImplicitReturns": false,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"useDefineForClassFields": false,
"lib": [
"ES2022",
"dom"
],
"paths": {
"#core/*": [ "src/app/core/*" ],
"#shared/*": [ "src/app/shared/*" ],
"#environments/*": [ "src/environments/*"],
}
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
package.json -
{
"name": "test",
"version": "0.0.0",
"type": "module",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#angular/animations": "^15.0.0",
"#angular/cdk": "^15.0.3",
"#angular/common": "^15.0.0",
"#angular/compiler": "^15.0.0",
"#angular/core": "^15.0.0",
"#angular/forms": "^15.0.0",
"#angular/platform-browser": "^15.0.0",
"#angular/platform-browser-dynamic": "^15.0.0",
"#angular/router": "^15.0.0",
"chart.js": "^4.2.0",
"primeflex": "^3.3.0",
"primeicons": "^6.0.1",
"primeng": "^15.0.0-rc.1",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.12.0"
},
"devDependencies": {
"#angular-devkit/build-angular": "^15.0.1",
"#angular/cli": "~15.0.1",
"#angular/compiler-cli": "^15.0.0",
"#types/jasmine": "~4.3.0",
"autoprefixer": "^10.4.13",
"jasmine-core": "~4.5.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"postcss": "^8.4.19",
"tailwindcss": "^3.2.4",
"typescript": "~4.8.2"
}
}
node version - v18.12.1
npm version - 8.19.2
please help me to reach a working solution.
I have tried -
1- add "type": "module" in package.json - not working
2- tsconfig.json added "target": "esnext","module": "commonjs", - not working
3- npm i ts-node --save-dev - not working

Angular 9 Application not loading in IE11

I am facing an issue where my app is not loading in IE 11 after adding ngx-treeview.
I am getting the following error(SCRIPT1002: Syntax error),
Script Error
Error point in vendor.js
I am not sure how to resolve this issue. The application runs fine in chrome and firefox but in IE11 I only see Loading... . I couldn't find browser compatibility on the library github page. Should I give up on using this library or there is a way to fix this issue.
The package.json file is
"scripts": {
"ng": "ng",
"start": "ng serve --extract-css",
"build": "ng build --extract-css",
"build:ssr": "npm run build -- --app=ssr --output-hashing=media",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ngcc"
},
"private": true,
"dependencies": {
"#angular-slider/ngx-slider": "^2.0.3",
"#angular/animations": "^9.1.13",
"#angular/common": "^9.1.13",
"#angular/compiler": "^9.1.13",
"#angular/core": "^9.1.13",
"#angular/forms": "^9.1.13",
"#angular/platform-browser": "^9.1.13",
"#angular/platform-browser-dynamic": "^9.1.13",
"#angular/platform-server": "^9.1.13",
"#angular/router": "^9.1.13",
"#fortawesome/fontawesome-free": "^5.15.3",
"#ng-select/ng-select": "4.0.4",
"angular-polyfills": "^1.0.1",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "^4.6.0",
"btoa": "^1.2.1",
"classlist.js": "^1.1.20150312",
"console-polyfill": "^0.3.0",
"core-js": "^2.4.1",
"hidden-attribute-polyfill": "^0.1.0",
"ie9-oninput-polyfill": "^1.1.1",
"jquery": "^3.4.1",
"ngx-bootstrap": "^6.2.0",
"ngx-infinite-scroll": "^9.1.0",
"ngx-treeview": "^10.0.2",
"node-sass": "^4.14.1",
"responsive-toolkit": "^2.6.3",
"rxjs": "^6.6.3",
"rxjs-compat": "^6.0.0-rc.0",
"tslib": "^1.10.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.901.13",
"#angular/cli": "^9.1.13",
"#angular/compiler-cli": "^9.1.13",
"#angular/language-service": "^9.1.13",
"#types/jasmine": "~2.8.3",
"#types/jasminewd2": "~2.0.2",
"#types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~3.8.3"
},
"optionalDependencies": {}
}}```
and tsconfig.json is
```{
"compileOnSave": false,
"compilerOptions": {
"downlevelIteration": true,
"importHelpers": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom"
],
"module": "esnext",
"baseUrl": "./"
}
}

In browserslist file, modify not IE 9-11 to IE 9-11
In tsconfig.json file, modify "target": "es2015"to "target": "es5"

ERROR Error: Angular JIT compilation failed: '#angular/compiler' not loaded

The Error I got suddenly while running my app in a development environment using VSCode,
main.js:7740 ERROR Error: Angular JIT compilation failed: '#angular/compiler' not loaded!
- JIT compilation is discouraged for production use-cases! Consider AOT mode instead.
- Did you bootstrap using '#angular/platform-browser-dynamic' or '#angular/platform-server'?
- Alternatively provide the compiler with 'import "#angular/compiler";' before bootstrapping.
at getCompilerFacade (vendor.js:20189)
at Function.get (vendor.js:33871)
at getInjectableDef (vendor.js:19941)
at resolveNgModuleDep (vendor.js:47812)
at NgModuleRef_.get (vendor.js:48688)
at resolveDep (vendor.js:49213)
at createClass (vendor.js:49071)
at createDirectiveInstance (vendor.js:48882)
at createViewNodes (vendor.js:60498)
at callViewAction (vendor.js:60948)
Also got an error saying
Angular extension might not work correctly because ngcc operation failed. Try to invoke ngcc manually by running 'npm/yarn run ngcc'. Please see the extension output for more information.
Package.json contains below
{
"name": "dxfsuite",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve -o --proxy-config proxy.conf.json --port 4200",
"build": "ng build",
"build-prod": "ng build --prod --stats-json --source-map=false",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular-devkit/schematics-cli": "^0.901.14",
"#angular/animations": "~9.0.0",
"#angular/cdk": "^9.1.0",
"#angular/common": "~9.0.0",
"#angular/compiler": "~9.0.0",
"#angular/core": "~9.0.0",
"#angular/forms": "~9.0.0",
"#angular/localize": "^9.1.13",
"#angular/platform-browser": "~9.0.0",
"#angular/platform-browser-dynamic": "~9.0.0",
"#angular/router": "~9.0.0",
"#elastic/apm-rum-angular": "^0.5.0",
"#fullcalendar/angular": "^4.4.5-beta",
"#fullcalendar/core": "^4.4.0",
"#fullcalendar/daygrid": "^4.4.0",
"#fullcalendar/timegrid": "^4.4.0",
"#ionic/angular": "^5.5.4",
"#ng-bootstrap/ng-bootstrap": "^6.0.0",
"#ng-select/ng-select": "^3.7.2",
"#swimlane/ngx-charts": "^13.0.2",
"#types/jquery": "^3.5.5",
"angular-feather": "^6.1.0",
"apexcharts": "^3.25.0",
"bootstrap": "^4.6.0",
"bootstrap-daterangepicker": "^3.0.5",
"bootstrap-tagsinput": "^0.7.1",
"daterangepicker": "^3.0.5",
"install-peers": "^1.0.3",
"jquery": "^3.4.1",
"jqueryui": "^1.11.1",
"loadash": "^1.0.0",
"lodash": "^4.17.15",
"moment": "^2.26.0",
"moment-timezone": "^0.5.33",
"ng-apexcharts": "^1.5.8",
"ng-zorro-antd": "^9.0.0-beta.0",
"ng2-daterangepicker": "^2.0.12",
"ngx-filesize": "^2.0.13",
"ngx-perfect-scrollbar": "^8.0.0",
"ngx-sortablejs": "^3.1.4",
"ngx-spinner": "^10.0.1",
"peity": "^3.3.0",
"popper.js": "^1.16.1",
"ramda": "^0.26.1",
"rxjs": "^6.5.4",
"service-worker": "0.0.0",
"sortablejs": "^1.13.0",
"tslib": "^1.10.0",
"videogular2": "^7.0.2",
"vivus": "^0.4.5",
"web-push": "^3.4.3",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.900.1",
"#angular/cli": "~9.0.1",
"#angular/compiler-cli": "~9.0.0",
"#angular/language-service": "~9.0.0",
"#ionic/angular-toolkit": "^3.1.0",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^12.20.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.4.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.7.5"
}
}
and itsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
Searched many forums to get this resolved. But nothing is helpful for me.
please help

For me is caused by the Angular Language Service extension.
Enabled legacy view-engine in the extension setting
Delete node_modules folder (npx rimraf node_modules)
Run npm install
Edit: should have fixed in this commit.

Babel outputting junk after upgrade from Node 12 to 14

on node 12, the transpiled js looks like so:
module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.........
on node 14 it looks like this:
(()=>{var e={1910:e=>{"use strict";e.exports={i8:"1.7.6"}},1427:e=>{"use strict";e.exports=JSON.parse('{"services":{"dynamodb":{"operations":{"batchGetItem":{"request_descriptors":{"RequestItems":{"get_keys":true,"rename_to":"table_names"}},"response_parameters":["ConsumedCapacity"]},"batchWriteItem":{"request_descriptors":{"RequestItems":{"get_keys":true,"rename_to":"table_names"}},
I have absolutely no idea what this is...
my tsconfig.json looks like:
{
"compilerOptions": {
// Don't emit; allow Babel to transform files.
"noEmit": true,
"target":"ES2018",
"module": "commonjs",
"lib": ["es2016", "es2017.object", "es2017.string"],
"declaration": true,
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"noImplicitThis": true,
"alwaysStrict": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": false,
"inlineSourceMap": true,
"inlineSources": true,
"experimentalDecorators": true,
"strictPropertyInitialization":false,
"outDir": "js",
"resolveJsonModule": true
},
"exclude": ["cdk.out", "__tests__", "lib/authorizer/*"],
"include": ["lib/**/*"]
}
and my babel config looks like:
module.exports = {
presets: [
['#babel/preset-typescript'],
['#babel/preset-env',
{
targets: {
node: '14'
}
}]
],
plugins: [
'#babel/plugin-proposal-class-properties',
'#babel/plugin-proposal-optional-chaining'
]
};
and my package.json:
{
"name": "swa-cdk-app",
"version": "0.1.0",
"bin": {
"swa-cdk-app": "bin/swa-cdk-app.js"
},
"scripts": {
"build": "tsc --build && webpack --mode production",
"watch": "tsc -w",
"cdk": "cdk",
"lint": "eslint \"./**/*.ts\" -f codeframe -c .eslintrc.js --fix",
"synth": "cdk synth",
"deploy": "cdk deploy --role-arn arn:aws:iam::${bamboo_sts_accountId}:role/cloud-services/pipeline-elevated-access --require-approval never",
"start": "cdk synth --no-staging > template.yml && sam local start-api",
"test": "source $HOME/.nvm/nvm.sh; nvm use && tsc && jest --coverage --testResultsProcessor jest-sonar-reporter"
},
"engines": {
"node": "14"
},
"devDependencies": {
"#aws-cdk/assert": "1.89.0",
"#babel/core": "^7.13.10",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/preset-env": "^7.13.10",
"#babel/preset-typescript": "^7.13.0",
"#pact-foundation/pact": "^9.15.0",
"#serverless/event-mocks": "^1.1.1",
"#types/jest": "^26.0.15",
"#types/jest-when": "^2.7.2",
"#types/lodash": "^4.14.164",
"#types/node": "^14.14.6",
"#types/uuid": "^8.3.0",
"#typescript-eslint/eslint-plugin": "^4.6.1",
"#typescript-eslint/parser": "^4.6.1",
"aws-cdk": "1.89.0",
"aws-sdk-mock": "^5.0.0",
"axios-mock-adapter": "^1.19.0",
"eslint": "^7.12.1",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-jest": "^24.1.0",
"eslint-plugin-prettier": "^3.1.4",
"husky": "^4.3.0",
"jest": "^26.6.2",
"jest-extended": "^0.11.2",
"jest-html-reporter": "^3.3.0",
"jest-junit": "^12.0.0",
"jest-when": "^3.0.1",
"mocked-env": "^1.3.2",
"prettier": "^2.1.2",
"sinon": "^9.2.1",
"ts-jest": "^26.5.1",
"ts-node": "^9.1.1",
"typescript": "^3.9.7",
"webpack": "^5.22.0",
"webpack-cli": "^4.5.0",
"fork-ts-checker-webpack-plugin": "6.1.0",
"readdirp": "2.2.1",
"zip-webpack-plugin": "^3.0.0",
"babel-loader": "^8.2.2"
},
"dependencies": {
"#aws-cdk/aws-apigateway": "1.89.0",
"#aws-cdk/aws-dynamodb": "1.89.0",
"#aws-cdk/aws-ec2": "1.89.0",
"#aws-cdk/aws-iam": "1.89.0",
"#aws-cdk/aws-kms": "1.89.0",
"#aws-cdk/aws-lambda": "1.89.0",
"#aws-cdk/aws-lambda-event-sources": "1.89.0",
"#aws-cdk/aws-sns": "1.89.0",
"#aws-cdk/aws-sns-subscriptions": "1.89.0",
"#aws-cdk/aws-sqs": "1.89.0",
"#aws-cdk/aws-stepfunctions": "1.89.0",
"#aws-cdk/aws-stepfunctions-tasks": "1.89.0",
"#aws-cdk/core": "1.89.0",
"#aws-cdk/region-info": "1.89.0",
"#types/aws-lambda": "^8.10.64",
"#types/bunyan": "^1.8.6",
"aws-sdk": "^2.784.0",
"aws-xray-sdk": "^3.2.0",
"axios": "^0.21.0",
"axios-oauth-client": "^1.3.0",
"bunyan": "^1.8.14",
"cdk-constants": "^3.0.3",
"http-status-codes": "^2.1.4",
"jest-sonar-reporter": "^2.0.0",
"lodash": "^4.17.20",
"sonarqube-scanner": "^2.6.0",
"source-map-support": "^0.5.19",
"moment-timezone": "0.5.32"
},
"jestSonar": {
"reportPath": "reports",
"reportFile": "test-report.xml",
"indent": 4
},
"husky": {
"hooks": {
"pre-commit": "npm run lint",
"pre-push": "npm run test"
}
}
}

Error while build angular 6 app using webpack

I'm trying to build the angular 6 app using webpack.
getting error as
ERROR in ./src/main.ts
Module build failed (from ./node_modules/#ngtools/webpack/src/index.js):
Error: Cannot find module '#angular/compiler-cli/ngcc'
package.json
{
"name": "cloud-complince",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "webpack",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^6.1.10",
"#angular/common": "^6.1.10",
"#angular/compiler": "^6.1.10",
"#angular/core": "^6.1.10",
"#angular/forms": "^6.1.10",
"#angular/http": "^6.1.10",
"#angular/platform-browser": "^6.1.10",
"#angular/platform-browser-dynamic": "^6.1.10",
"#angular/router": "^6.1.10",
"chart.js": "^2.8.0",
"chartjs-plugin-datalabels": "^0.4.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.6.9",
"ngx-cookie": "^3.0.1",
"rxjs": "~6.2.0",
"rxjs-compat": "^6.5.2",
"web-animations-js": "^2.3.2",
"zone.js": "^0.8.29"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.8.9",
"#angular/cli": "^6.2.7",
"#angular/compiler-cli": "^6.1.0",
"#angular/language-service": "^6.1.10",
"#ngtools/webpack": "^8.1.1",
"#types/jasmine": "^2.8.16",
"#types/jasminewd2": "^2.0.6",
"#types/node": "~8.9.4",
"codelyzer": "~4.3.0",
"copy-webpack-plugin": "^4.6.0",
"html-webpack-plugin": "^2.30.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.5",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.2",
"raw-loader": "^0.5.1",
"script-ext-html-webpack-plugin": "^1.8.8",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~2.9.2",
"webpack": "4.24.0"
}
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"skipLibCheck": true,
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom"
]
}
}
Kindly help me to resolve this issue
Thanks in advance

Try these command to see if it work
npm uninstall angular-cli -g
npm uninstall angular-cli --save
npm install -g #angular/cli
npm install #angular/cli --save
npm install #angular/compiler-cli --save