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...
