SyntaxError: Invalid left-hand side in assignment in Karma tests after updating from 20.0.5 to 20.1.3 #62837
Description
Command
test
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
20.0.5
Description
After updating from Angular 20.0.5 to 20.1.2, Karma/Jasmine unit tests fail with with the error SyntaxError: Invalid left-hand side in assignment. I am trying to sort this for the past one week with no avail (I've kept downgrading and the version that worked was 20.0.5, the one was currently using).
Even if I create a single test.spec.ts with a dump assertion with no other dependency, the test also fails:
fdescribe(`Dumb`, () => {
it(`Dumb Test`, () => {
expect(true).toBe(true);
});
});
See the logs at
1) Dumb Test assertion
Dumb Test
SyntaxError: Invalid left-hand side in assignment
at eval (<anonymous>)
at newTrustedFunctionForJIT (http://localhost:9876/_karma_webpack_/polyfills.js:7486:29)
at JitEvaluator.evaluateCode (http://localhost:9876/_karma_webpack_/polyfills.js:7557:16)
at JitEvaluator.evaluateStatements (http://localhost:9876/_karma_webpack_/polyfills.js:7527:17)
at CompilerFacadeImpl.jitExpression (http://localhost:9876/_karma_webpack_/polyfills.js:31040:35)
at CompilerFacadeImpl.compileComponentFromMeta (http://localhost:9876/_karma_webpack_/polyfills.js:31001:17)
at CompilerFacadeImpl.compileComponent (http://localhost:9876/_karma_webpack_/polyfills.js:30990:17)
at CustomFieldsComponent.get (http://localhost:9876/_karma_webpack_/vendor.js:399460:37)
at getComponentDef (http://localhost:9876/_karma_webpack_/vendor.js:458515:14)
at isStandalone (http://localhost:9876/_karma_webpack_/vendor.js:458539:15)
version of Angular CLI used: 20.1.2
version of Angular DevKit used: 20.1.2
angular.json configuration:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"hiddenCompany": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"allowedCommonJsDependencies": [
"file-saver",
"spark-md5",
"dompurify",
"date-fns-tz",
"iframe-resizer",
"reflect-metadata",
"@dagrejs/dagre",
"color-convert"
],
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"buildOptimizer": false,
"assets": ["src/assets", "src/tech", "src/favicon.ico"],
"styles": [
"src/styles.scss",
"src/assets/css/print.scss",
"src/assets/css/global.scss",
],
"scripts": [],
"stylePreprocessorOptions": {
"includePaths": [
"src/assets/css",
"src/app/shared/scss/table"
]
},
"extractLicenses": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": {
"fonts": {
"inline": false
},
"styles": {
"inlineCritical": false
}
},
"outputHashing": "all",
"sourceMap": false,
"extractLicenses": true,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2.17mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "10kb"
}
]
}
},
"defaultConfiguration": ""
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"buildTarget": "hiddenCompany:build"
},
"configurations": {
"production": {
"buildTarget": "hiddenCompany:build:production"
},
"dev": {
"buildTarget": "hiddenCompany:build:dev"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "hiddenCompany:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [],
"scripts": [],
"stylePreprocessorOptions": {
"includePaths": [
"src/assets/css",
"src/app/shared/scss/table"
]
},
"codeCoverageExclude": ["/**/*mock*.ts"]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "hiddenCompany:serve"
},
"configurations": {
"production": {
"devServerTarget": "hiddenCompany:serve:production"
}
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
}
}
}
}
},
"cli": {
"analytics": false,
"schematicCollections": ["@angular-eslint/schematics"],
"cache": {
"enabled": false
}
},
"schematics": {
"@schematics/angular:component": {
"type": "component"
},
"@schematics/angular:directive": {
"type": "directive"
},
"@schematics/angular:service": {
"type": "service"
},
"@schematics/angular:guard": {
"typeSeparator": "."
},
"@schematics/angular:interceptor": {
"typeSeparator": "."
},
"@schematics/angular:module": {
"typeSeparator": "."
},
"@schematics/angular:pipe": {
"typeSeparator": "."
},
"@schematics/angular:resolver": {
"typeSeparator": "."
}
}
}
Minimal Reproduction
version of Angular CLI used: 20.1.2
version of Angular DevKit used: 20.1.2
angular.json configuration:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"hiddenCompany": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"allowedCommonJsDependencies": [
"file-saver",
"spark-md5",
"dompurify",
"highcharts",
"@fortawesome/pro-light-svg-icons",
"@fortawesome/pro-solid-svg-icons",
"date-fns-tz",
"iframe-resizer",
"reflect-metadata",
"@dagrejs/dagre",
"color-convert"
],
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"buildOptimizer": false,
"assets": ["src/assets", "src/tech", "src/favicon.ico"],
"styles": [
"src/assets/css/google-web-fonts.scss",
"src/bootstrap-sass-grid/bootstrap-sass-grid.scss",
"src/styles.scss",
"src/assets/css/print.scss",
"src/assets/css/global.scss",
"node_modules/highcharts/css/highcharts.css",
"src/app/components/widget-core/css/chart-colors.scss"
],
"scripts": [],
"stylePreprocessorOptions": {
"includePaths": [
"src/assets/css",
"src/app/shared/scss/table"
]
},
"extractLicenses": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": {
"fonts": {
"inline": false
},
"styles": {
"inlineCritical": false
}
},
"outputHashing": "all",
"sourceMap": false,
"extractLicenses": true,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2.17mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "10kb"
}
]
}
},
"defaultConfiguration": ""
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"buildTarget": "hiddenCompany:build"
},
"configurations": {
"production": {
"buildTarget": "hiddenCompany:build:production"
},
"dev": {
"buildTarget": "hiddenCompany:build:dev"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "hiddenCompany:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [],
"scripts": [],
"stylePreprocessorOptions": {
"includePaths": [
"src/assets/css",
"src/app/shared/scss/table"
]
},
"codeCoverageExclude": ["/**/*mock*.ts"]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "hiddenCompany:serve"
},
"configurations": {
"production": {
"devServerTarget": "hiddenCompany:serve:production"
}
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
}
}
}
}
},
"cli": {
"analytics": false,
"schematicCollections": ["@angular-eslint/schematics"],
"cache": {
"enabled": false
}
},
"schematics": {
"@schematics/angular:component": {
"type": "component"
},
"@schematics/angular:directive": {
"type": "directive"
},
"@schematics/angular:service": {
"type": "service"
},
"@schematics/angular:guard": {
"typeSeparator": "."
},
"@schematics/angular:interceptor": {
"typeSeparator": "."
},
"@schematics/angular:module": {
"typeSeparator": "."
},
"@schematics/angular:pipe": {
"typeSeparator": "."
},
"@schematics/angular:resolver": {
"typeSeparator": "."
}
}
}
Exception or Error
1) Dumb Test assertion
Dumb Test
SyntaxError: Invalid left-hand side in assignment
at eval (<anonymous>)
at newTrustedFunctionForJIT (http://localhost:9876/_karma_webpack_/polyfills.js:7486:29)
at JitEvaluator.evaluateCode (http://localhost:9876/_karma_webpack_/polyfills.js:7557:16)
at JitEvaluator.evaluateStatements (http://localhost:9876/_karma_webpack_/polyfills.js:7527:17)
at CompilerFacadeImpl.jitExpression (http://localhost:9876/_karma_webpack_/polyfills.js:31040:35)
at CompilerFacadeImpl.compileComponentFromMeta (http://localhost:9876/_karma_webpack_/polyfills.js:31001:17)
at CompilerFacadeImpl.compileComponent (http://localhost:9876/_karma_webpack_/polyfills.js:30990:17)
at CustomFieldsComponent.get (http://localhost:9876/_karma_webpack_/vendor.js:399460:37)
at getComponentDef (http://localhost:9876/_karma_webpack_/vendor.js:458515:14)
at isStandalone (http://localhost:9876/_karma_webpack_/vendor.js:458539:15)
Your Environment
20.1.2
Anything else relevant?
I've tried to change the testing builder to "builder": "@angular/build:karma", still the same error happens.