upgrading from angular 14 to 17 I encountered issue with ng test. It is not working anymore.
Error:
PS C:\ForAngular17\src\ng\cat-ng> ng test
One or more browsers which are configured in the project's Browserslist configuration will be ignored as ES5 output is not supported by the Angular CLI.
Ignored browsers: ie 11, ie 10, ie 9, kaios 2.5, op_mini all
✔ Browser application bundle generation complete.
##teamcity[blockOpened name='JavaScript Unit Tests' flowId='']
Error: error TS2688: Cannot find type definition file for '@angular/localize'.
The file is in the program because:
Entry point of type library '@angular/localize' specified in compilerOptions
12 03 2024 09:26:26.230:INFO [karma-server]: Karma v6.4.3 server started at http://localhost:9876/
12 03 2024 09:26:26.232:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox with concurrency unlimited
12 03 2024 09:26:26.233:ERROR [karma-server]: Error: Found 1 load error
at Server.<anonymous> (C:\ForAngular17\src\ng\cat-ng\node_modules\karma\lib\server.js:243:26)
at Object.onceWrapper (node:events:631:28)
at Server.emit (node:events:529:35)
at emitListeningNT (node:net:1851:10)
at process.processTicksAndRejections (node:internal/process/task_queues:81:21)
tsconfig.spec.json code:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"types": [
"jasmine",
"node",
"@angular/localize"
]
},
"files": [
"test.ts",
"polyfills.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}
package.json code
{
"name": "cat-ng",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build-prod": "ng build --configuration production",
"build-azure": "ng build --azure",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@ag-grid-community/angular": "^28.0.0",
"@ag-grid-community/client-side-row-model": "^28.0.2",
"@ag-grid-community/core": "^28.0.2",
"@ag-grid-enterprise/clipboard": "^28.0.2",
"@ag-grid-enterprise/column-tool-panel": "^28.0.2",
"@ag-grid-enterprise/excel-export": "^28.0.2",
"@ag-grid-enterprise/menu": "^28.0.2",
"@ag-grid-enterprise/range-selection": "^28.0.2",
"@ag-grid-enterprise/server-side-row-model": "^28.0.2",
"@ag-grid-enterprise/set-filter": "^28.0.2",
"@angular/animations": "^17.2.4",
"@angular/cdk": "^17.2.2",
"@angular/common": "^17.2.4",
"@angular/compiler": "^17.2.4",
"@angular/core": "^17.2.4",
"@angular/forms": "^17.2.4",
"@angular/localize": "^17.2.4",
"@angular/material": "^17.2.2",
"@angular/material-moment-adapter": "^17.2.2",
"@angular/platform-browser": "^17.2.4",
"@angular/platform-browser-dynamic": "^17.2.4",
"@angular/platform-server": "^17.2.4",
"@angular/router": "^17.2.4",
"@azure/msal-angular": "^3.0.13",
"@azure/msal-browser": "^3.10.0",
"@fortawesome/angular-fontawesome": "^0.7.0",
"@fortawesome/fontawesome-free": "^5.12.1",
"@fortawesome/fontawesome-svg-core": "^1.2.21",
"@microsoft/applicationinsights-web": "^2.8.4",
"@ng-bootstrap/ng-bootstrap": "^13.0.0",
"@ngrx/data": "^17.1.1",
"@ngrx/effects": "^17.1.1",
"@ngrx/entity": "^17.1.1",
"@ngrx/router-store": "^17.1.1",
"@ngrx/schematics": "^17.1.1",
"@ngrx/store": "^17.1.1",
"@ngrx/store-devtools": "^17.1.1",
"@ngtools/webpack": "^17.2.3",
"@popperjs/core": "^2.11.5",
"angular2-text-mask": "^9.0.0",
"bignumber.js": "^9.1.1",
"bootstrap": "^5.3.3",
"bootstrap-scss": "^5.3.3",
"core-js": "^2.6.9",
"date-input-polyfill": "^2.14.0",
"file-saver": "^2.0.5",
"flag-icon-css": "^3.2.0",
"font-awesome": "^4.7.0",
"fortawesome": "^0.0.1-security",
"jquery": "^3.7.1",
"karma-firefox-launcher": "^2.1.3",
"mathjs": "^10.6.4",
"moment": "^2.29.3",
"ng-bootstrap": "^1.6.3",
"ng-click-outside2": "^14.0.1",
"ng-sidebar": "^8.1.1",
"ngx-angular-query-builder": "^17.0.0",
"ngx-toastr": "^18.0.0",
"popper.js": "^1.16.1",
"rxjs": "^7.8.1",
"rxjs-compat": "^6.5.3",
"subsink": "^1.0.1",
"tether": "^1.4.7",
"url-search-params-polyfill": "^5.0.0",
"zone.js": "~0.14.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.2.3",
"@angular/cli": "^17.2.3",
"@angular/compiler-cli": "^17.2.4",
"@angular/language-service": "^17.2.4",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.4",
"@types/jquery": "^3.5.14",
"@types/node": "^10.14.14",
"codelyzer": "^6.0.0",
"jasmine-core": "^5.1.2",
"jasmine-spec-reporter": "~7.0.0",
"karma": "^6.4.3",
"karma-chrome-launcher": "^3.2.0",
"karma-coverage-istanbul-reporter": "^3.0.3",
"karma-jasmine": "^5.1.0",
"karma-jasmine-html-reporter": "^2.0.0",
"karma-junit-reporter": "^2.0.1",
"karma-teamcity-reporter": "^1.1.0",
"protractor": "^7.0.0",
"puppeteer": "^1.19.0",
"ts-node": "^7.0.1",
"tslint": "^6.1.3",
"typescript": "5.3.3",
"webpack-bundle-analyzer": "^3.4.1"
}
}
What is the possible here? Thank you!
Not sure if you found the fix for this or not, but I had the same problem and was able to resolve it by simply adding
/// <reference types="@angular/localize" />
to the top of my /src/test.ts file, just like the /src/main.ts has. Seems that older versions of angular used the test.ts file by default, though, installing a new Angular 17 app does not have this test.ts file and it all seems to be pre-configured.
Doing some deeper research as to why this fixed it and if we can now remove the test.ts file safely since Angular 17 no longer comes with it by default.
Hope this helps!