Angular Karma ChromeHeadless opens blank page

I recently updated Angular (and Karma) to their latest versions, and now I get a weird blank page that shows up. For some reason, even though the blank page is there, when I click on it (or right click) it acts like it is not even there. Meaning if the blank page is in front op my IDE, I can click on it the blank page, and it acts like I am click on the IDE instead, almost as if it isn't even there. I do have the browser set to ChromeHeadless, and it used to not open up a weird blank page.

I just don't want anything to open up when running tests. I can just browse to the url to view karma when I need to.

Blank page when running unit tests

All of my unit tests (528 of them) are successful

I did just notice this, I also just updated Angular material v14 to v18 as well. Seems to be about all unit tests since the updates

ERROR: 'NG0304: 'mat-form-field' is not a known element (used in the 'SiteNewsDialogEditComponent' component template):
1. If 'mat-form-field' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
ERROR: 'NG0304: 'mat-form-field' is not a known element (used in the 'SiteNewsDialogEditComponent' component template):
1. If 'mat-form-field' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
ERROR: 'NG0304: 'mat-label' is not a known element (used in the 'SiteNewsDialogEditComponent' component template):
1. If 'mat-label' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.
2. If 'mat-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
ERROR: 'NG0304: 'mat-form-field' is not a known element (used in the 'SiteNewsDialogEditComponent' component template):
1. If 'mat-form-field' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
ERROR: 'NG0304: 'mat-label' is not a known element (used in the 'SiteNewsDialogEditComponent' component template):
1. If 'mat-label' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.
2. If 'mat-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
ERROR: 'NG0304: 'mat-datepicker-toggle' is not a known element (used in the 'SiteNewsDialogEditComponent' component template):
1. If 'mat-datepicker-toggle' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.
2. If 'mat-datepicker-toggle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
ERROR: 'NG0304: 'mat-datepicker' is not a known element (used in the 'SiteNewsDialogEditComponent' component template):
1. If 'mat-datepicker' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.
2. If 'mat-datepicker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
ERROR: 'NG0304: 'mat-form-field' is not a known element (used in the 'SiteNewsDialogEditComponent' component template):
1. If 'mat-form-field' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
ERROR: 'NG0304: 'mat-form-field' is not a known element (used in the 'SiteNewsDialogEditComponent' component template):
1. If 'mat-form-field' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'
ERROR: 'NG0304: 'mat-label' is not a known element (used in the 'SiteNewsDialogEditComponent' component template):
1. If 'mat-label' is an Angular component, then verify that it is a part of an @NgModule where this component is declared.
2. If 'mat-label' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.'



Here is my package.json:

{
"name": "pivotal",
"version": "0.0.0",
"engines": {
"node": "20.18.0"
},
"scripts": {
"ng": "ng",
"start": "npm run config -- --environment=dev && ng serve",
"start spanish": "npm run config -- --environment=dev && ng serve --configuration=es",
"build": "npm run config -- --environment=prod && ng build --configuration production --build-optimizer --localize",
"install-puppeteer": "cd node_modules/puppeteer && npm run install",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"config": "ts-node ./scripts/setenv.ts",
"postinstall": "check-node-version --package"
},
"private": true,
"dependencies": {
"@angular/animations": "^18.2.7",
"@angular/cdk": "^18.2.7",
"@angular/common": "^18.2.7",
"@angular/compiler": "^18.2.7",
"@angular/core": "^18.2.7",
"@angular/forms": "^18.2.7",
"@angular/material": "^18.2.7",
"@angular/platform-browser": "^18.2.7",
"@angular/platform-browser-dynamic": "^18.2.7",
"@angular/router": "^18.2.7",
"@azure/core-http": "^3.0.4",
"@azure/storage-blob": "^12.25.0",
"@microsoft/signalr": "^8.0.0",
"@ng-idle/core": "^14.0.0",
"@ng-idle/keepalive": "^14.0.0",
"@types/quill": "^2.0.14",
"ajv": "^8.8.2",
"angular-auth-oidc-client": "^14.1.5",
"angular-calendar": "^0.30.1",
"date-fns": "^2.29.3",
"date-fns-tz": "^1.3.7",
"file-saver": "^2.0.5",
"ngx-quill": "^26.0.8",
"parchment": "^3.0.0",
"quill": "^2.0.2",
"rxjs": "^7.5.7",
"tslib": "^2.4.0",
"zone.js": "^0.14.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.2.7",
"@angular/cli": "^18.2.7",
"@angular/compiler-cli": "^18.2.7",
"@angular/localize": "^18.2.7",
"@types/jasmine": "~3.8.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^22.7.4",
"check-node-version": "^4.0.3",
"dotenv": "^8.2.0",
"jasmine-auto-spies": "^6.4.0",
"jasmine-core": "^3.99.1",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "^2.2.1",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"ng-bullet": "^1.0.3",
"prettier": "^2.7.1",
"protractor": "~7.0.0",
"puppeteer": "^23.5.0",
"ts-node": "~8.3.0",
"typescript": "^5.4.4",
"yargs": "^16.1.0"
}
}




and my karma.conf.js:

module.exports = function (config) {
const puppeteer = require("puppeteer");
process.env.CHROME_BIN = puppeteer.executablePath();

config.set({
basePath: "",
frameworks: ["jasmine", "@angular-devkit/build-angular"],
plugins: [
require("karma-jasmine"),
require("karma-chrome-launcher"),
require("karma-jasmine-html-reporter"),
require("karma-coverage"),
require("@angular-devkit/build-angular/plugins/karma"),
],
client: {
clearContext: true,
},
coverageReporter: {
dir: require("path").join(__dirname, "../coverage"),
subdir: ".",
reporters: [
{ type: "html" },
{ type: "text-summary" },
{ type: "lcovonly" },
{ type: "cobertura" },
],
},
reporters: ["progress"],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ["ChromeHeadless"],
customLaunchers: {
ChromeHeadlessNoSandbox: {
base: "ChromeHeadless",
flags: [
"--no-sandbox",
"--disable-gpu",
"--headless",
"--disable-translate",
"--disable-extensions",
"--disable-dev-shm-usage",
],
},
},
singleRun: false,
restartOnFileChange: false,
});
};



Through research and trying to fix this with ChatGPT I changed some settings in karma.conf:

customLaunchers: {
ChromeHeadlessNoSandbox: {
base: "ChromeHeadless",
flags: [
"--no-sandbox",
"--disable-gpu",
"--headless",
"--disable-translate",
"--disable-extensions",
"--disable-dev-shm-usage",
],
},
},

Continue reading...