Karma builder doesn't work with Angular 19.2.0+

[alee-circunomics]

We upgraded to Angular ^19.2.0 recently, and running unit tests with @ngx-env/builder:karma no longer works. We get errors like this:

...
Chrome Headless 134.0.0.0 (Linux x86_64) MyComponent when fn is called should trigger notification FAILED
	Failed: MyComponent class doesn't have @Component decorator or is missing metadata.
	    at invalidTypeError (node_modules/@angular/core/fesm2022/testing.mjs:1655:12)
	    at forEach (node_modules/@angular/core/fesm2022/testing.mjs:1079:23)
	    at Set.forEach (<anonymous>)
	    at TestBedCompiler.compileTypesSync (node_modules/@angular/core/fesm2022/testing.mjs:1071:32)
	    at node_modules/@angular/core/fesm2022/testing.mjs:994:40
	    at Generator.next (<anonymous>)
	    at asyncGeneratorStep (node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:3:1)
	    at apply (node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js:17:1)
	    at _ZoneDelegate.invoke (node_modules/zone.js/fesm2015/zone.js:369:28)
	    at AsyncTestZoneSpec.onInvoke (node_modules/zone.js/fesm2015/zone-testing.js:892:39)
...

It worked with Angular 19.1.8 or earlier. Switching to @angular-devkit/build-angular:karma also works.

angular.json test

...
"test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": ["zone.js", "zone.js/testing"],
            "main": "src/test.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": ["src/styles.scss"],
            "scripts": [],
            "codeCoverageExclude": ["src/app/testing/**"]
          }
        }
...

test.ts

import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';

// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
  [BrowserDynamicTestingModule, NoopAnimationsModule],
  platformBrowserDynamicTesting(),
  {
    teardown: { destroyAfterEach: false },
    errorOnUnknownElements: true,
    errorOnUnknownProperties: true,
  }
);

karma.config.js

module.exports = function (config) {
  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: false, // leave Jasmine Spec Runner output visible in browser
    },
    coverageReporter: {
      dir: require('path').join(__dirname, './coverage'),
      reporters: [
        { type: 'html', subdir: 'report-html' },
        { type: 'lcovonly', subdir: '.', file: 'report-lcovonly.txt' },
        { type: 'text-summary', subdir: '.' },
      ],
      fixWebpackSourcePaths: true,
      check: {
        emitWarning: false,
        global: {
          statements: 100,
          branches: 100,
          functions: 100,
          lines: 100,
          excludes: [],
        },
      },
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['ChromeHeadlessNoSandbox'],
    customLaunchers: {
      ChromeHeadlessNoSandbox: {
        base: 'ChromeHeadless',
        flags: ['--no-sandbox', '--headless', '--disable-gpu', '--remote-debugging-port=9222'],
      },
      ChromiumHeadlessNoSandbox: {
        base: 'ChromiumHeadless',
        flags: ['--no-sandbox', '--headless', '--disable-gpu', '--remote-debugging-port=9222'],
      },
    },
    singleRun: false,
    restartOnFileChange: true,
  });
};

[chihab]

It would be appreciated if you can reproduce the issue on a newly generated project with the corresponding project as I am not able to. Tests are run and green.

[alee-circunomics]

Here's a stackblitz. https://stackblitz.com/edit/stackblitz-starters-duxyo2yj?file=src%2Fapp.component.spec.ts

Run tests with ng test

Further investigation reveals that using overrideComponent() causes the error to appear. In my original code, I did add and remove an actual module, and it used to work, but now it doesn't.

[chihab]

Thanks, I was able to reproduce the issue, trying to understand what's happening.

[mhkolk]

Having ngx-env builder configured for builds in Angular v17 also breaks the automatic upgrade process to Angular v18/19 as the line

"builder": "@ngx-env/builder:browser" in angular.json defines an incompatible builder.

[chihab]

That is unrelated to the initial issue :)

Angular CLI migration scripts expect Angular native builders: angular/angular-cli#24741, I assume the workaround would be to temporarily switch to standard builder (replace @ngx-env/builder with @angular-devkit/build-angular), run ng update, then put back the configuration (or run ng add @ngx-env/builder to get the latest version as well).

[kheos31]

Hello there. I unfortunately reproduced this issue on my project. Thanks to @alee-circunomics issue and its first investigation, and as I was upgrading my dependencies version, I found the problem and a related fix after some investigation.

Angular 19.2 introduced AOT compilation for Karma builder (cf. https://blog.ninja-squad.com/2025/02/26/what-is-new-angular-19.2/ => Angular CLI). As explained in this chapter, you can see that overrideComponent, for example, is not supported in AOT for the moment.

The problem seemed to be from the non-declaration of this option in the karma builder schema. I push this PR (#133) to add this option in the schema. I didn't really understand why ngx-env builder's bridge with Angular karma builder convert an undefined value to a boolean with value "true".. Maybe it's just the native behaviour in Angular karma builder, i don't know..

Finally thoughts, as you could see in the same link (cf. https://blog.ninja-squad.com/2025/02/26/what-is-new-angular-19.2/ => Karma builder), the Karma Builder has been moved from @angular-devkit/build-angular to @angular/build package. I also saw during my investigation that this migration was not made in ngx-env library, so now you got the information! ;)

Thanks and have a nice day.

[chihab]

Thanks for the investigation @kheos31 and the hint about AOT.
The right solution would be to update the schemas (copy from 19.2 ones) and publish a new version of the package compatible with 19.2.

[kheos31]

Yes, I agree with you. I checked the whole file and the only diff was on this option.

• Angular CLI 19.2.x : https://github.com/angular/angular-cli/blob/19.2.x/packages/angular_devkit/build_angular/src/builders/karma/schema.json
• ngx-env (updated version) : https://github.com/chihab/dotenv-run/blob/6cc42cbfb7b81bbdb4f8286fc5e3979b6d87b406/packages/angular/src/builders/karma/karma.json

I think you can accept the PR and launch the publish of a new version, except if another thing is missing?

I can upgrade dependencies as following if you want to:

• Angular deps to "^19.2.0"
• TypeScript to "~5.8.0"

And if it's needed I can also set package.json version to 19.2.0

[chihab]

Hey, the schemas have been updated, I haven't tested if they fix the issue though, will do that asap.
Please let me know if the new published package works for you now?

[chihab]

I've just tested in the stackblitz shared above and it seems to be working now

[kheos31]

Hello! Thanks for the acceptation of my PR. I saw you published a new package version but I couldn't check it in my projet. But I just did the same modification directly in my node_modules and it worked so I think all it's good for now.

I'll check ngx-env real upgrade today or tomorrow.