Expose the built-in karma config.

[nicojs]

Command

test

Description

Angular 15 hides the cli config files. This is admirable, but this means that tools depending on this config cannot work. For example, StrykerJS needs this configuration. See stryker-mutator/stryker-js#3871

Describe the solution you'd like

I would love for the cli to expose this built-in config, similar to how the vue cli exposes webpack config as a file.

An added benefit is that users of Angular 15 can expand their custom karma config upon it instead of needing to copy it entirely and make adjustments.

Describe alternatives you've considered

No response

[alan-agius4]

We did discuss this previously about either creating a file in a hidden directory or provide the option to create such file using a generate command.

Exposing the file like https://cli.vuejs.org/guide/webpack.html#using-resolved-config-as-a-file is not really something that we considered, the main reason for this is that the file is not static, and has certain settings that vary per project. Example the code-coverage directory.

[nicojs]

Thanks for the fast reply 🙏

The file was static before. What exactly changed?

Looking through the code, it seems to be the workspaceRoot (used to require the plugins from) and projectName (used for the coverageFilderName). We might be able to fill both with default values from a karma.conf.js file we could ship. I could send a PR your way.

angular-cli/packages/angular_devkit/build_angular/src/builders/karma/index.ts

Lines 186 to 227 in 6f9c84b

	function getBuiltInKarmaConfig(
	karma: typeof import('karma'),
	workspaceRoot: string,
	projectName: string,
	): ConfigOptions & Record<string, unknown> {
	let coverageFolderName = projectName.charAt(0) === '@' ? projectName.slice(1) : projectName;
	if (/[A-Z]/.test(coverageFolderName)) {
	coverageFolderName = strings.dasherize(coverageFolderName);
	}
	const workspaceRootRequire = createRequire(workspaceRoot + '/');
	return {
	basePath: '',
	frameworks: ['jasmine', '@angular-devkit/build-angular'],
	plugins: [
	'karma-jasmine',
	'karma-chrome-launcher',
	'karma-jasmine-html-reporter',
	'karma-coverage',
	'@angular-devkit/build-angular/plugins/karma',
	].map((p) => workspaceRootRequire(p)),
	client: {
	clearContext: false, // leave Jasmine Spec Runner output visible in browser
	},
	jasmineHtmlReporter: {
	suppressAll: true, // removes the duplicated traces
	},
	coverageReporter: {
	dir: path.join(workspaceRoot, 'coverage', coverageFolderName),
	subdir: '.',
	reporters: [{ type: 'html' }, { type: 'text-summary' }],
	},
	reporters: ['progress', 'kjhtml'],
	port: 9876,
	colors: true,
	logLevel: karma.constants.LOG_INFO,
	autoWatch: true,
	browsers: ['Chrome'],
	restartOnFileChange: true,
	};
	}

Btw the IntelliJ karma plugin needs this as well. They use a similar setup as StrykerJS: https://github.com/JetBrains/intellij-plugins/blob/master/js-karma/resources/js_reporter/karma-intellij/lib/intellij.conf.js#L66

[angular-robot]

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

[nicojs]

I've created a draft PR to illustrate a fix. Would you be comfortable with this approach?