Karma tests do not run because there is no webpack loader for .css files

Question

I had a TypeScript project for which I recently added the first Karma tests. The browser opened during ng test showed that there were no tests, but that was not true. In Jasmine: "Incomplete: No specs found" in Angular Typescript project it was said that this could be caused by errors in my code. I was suggested to look at the output in the command window where I issued ng test. I saw the following errors there:

- Generating browser application bundles (phase: setup)...
√ Browser application bundle generation complete.

./node_modules/ag-grid-community/styles/ag-grid.css:1:0 - Error: Module parse failed: 
Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are 
configured to process this file. See https://webpack.js.org/concepts#loaders
> .ag-icon {
|   font-family: var(--ag-icon-font-family);
|   font-weight: var(--ag-icon-font-weight);

./node_modules/ag-grid-community/styles/ag-theme-quartz.css:1:0 - Error: Module parse failed: 
Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are 
configured to process this file. See https://webpack.js.org/concepts#loaders
> @font-face {
|   font-family: "agGridQuartz";
|   src: url(data:font/woff2;charset=utf-8;base64,d09GMgABAAAAABkcAAsAAAAANMQAABjLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHIlCBmAAi3AKwxy2HgE2AiQDgjwLgSAABCAFhEYHhTcb4ix1BGwcwOON5nMUJWsTiqjghGT//4cEeojURG1/kEjDhJmMILNiXXYFMRWHm25iSVMyh8ypixOcJyj76RdfldgRQ5stvO+qv+OK2/pJpPULmhyShCYP1H6/P7sX8cRQgpkkmoinB5mQmU6meYhM1/zT98pfc70v2Q0cES2Fj2gqCRyRqlFfuCpbXSOrGgDz/ZbJbKqwe4pETkWQM0u26vzMtD7T+gIL0ddbQSIirSeO/N/w/Db/D15t4ILnWrgAiato48Im
...

I found instructions on adding a CSS loader, see https://webpack.js.org/concepts/loaders/, but I do not have file webpack.config.js and I do not want to break existing configurations of webpack.

How can I fix this?

Answer 1

Add dependency css-loader as suggested by the cited webpack documentation. Now you need to use your CSS loader for your Karma tests. See https://www.dsebastien.net/2020-06-14-customizing-your-angular-apps-webpack-configuration/ for instructions. I did the following:

• Add dependency @angular-builders/custom-webpack.

• Update angular.json as follows:

  • Look for "test", the section that defines the behavior of ng test. Right below "test", replace "builder": "@angular-devkit/build-angular:karma", with "builder": "@angular-builders/custom-webpack:karma",.

  • Now this builder has a custom property. Configure it by adding the following:

    "customWebpackConfig": {
      "path": "webpack.conf.ts"
    },
    

  • With these changes, webpack reads configuration file webpack.conf.ts in the project root. Create that file with the following contents:

    import * as webpack from 'webpack';
    import { CustomWebpackBrowserSchema, TargetOptions } from '@angular-builders/custom-webpack';
    
    export default (
      config: webpack.Configuration,
      options: CustomWebpackBrowserSchema,
      targetOptions: TargetOptions) =>
    {
      if (config.module && config.module.rules) {
        config.module.rules.push({
          test: /\.css$/i,
          loader: "css-loader"
        });
      }
      return config;
    }
    

  • If this does not work, you have to install dependency style-loader.