ng test exception via commented out .browserslistrc file

[camargo]

Bug Report

Affected Package

I'm not exactly sure where this bug is originating. My guess is @angular-devkit/build-angular or @angular/cli.

Is this a regression?

Yes

Description

An Angular project I am working on had a .browserslistrc file but all the fields were commented out like so:

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# For the full list of supported browsers by the Angular framework, please see:
# https://angular.io/guide/browser-support

# You can see what browsers were selected by your queries by running:
#   npx browserslist

# last 1 Chrome version
# last 1 Firefox version
# last 2 Edge major versions
# last 2 Safari major versions
# last 2 iOS major versions
# Firefox ESR
# not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

After upgrading from Angular 11 to Angular 12, running ng test threw a very cryptic exception somehow related to the commented out lines in .browserslistrc.
ng build and ng serve ran correctly with no exceptions.

Minimal Reproduction

First create a new test app:

ng new test-app

Comment out all lines in .browserslistrc. Then do:

ng test

You should see the exception below.

Exception or Error

Chrome 91.0.4472.101 (Mac OS 10.15.7) ERROR
  An error was thrown in afterAll
  Uncaught SyntaxError: Unexpected token ':'
  SyntaxError: Unexpected token ':'
  Uncaught TypeError: __webpack_modules__[moduleId] is not a function
  TypeError: __webpack_modules__[moduleId] is not a function
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
      at Object.4289 (http://localhost:9876/_karma_webpack_/main.js:113:73)
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
      at http://localhost:9876/_karma_webpack_/webpack:/webpack/startup:4:1
      at Function.__webpack_require__.O (http://localhost:9876/_karma_webpack_/webpack:/webpack/runtime/chunk loaded:23:1)
      at http://localhost:9876/_karma_webpack_/webpack:/webpack/startup:5:1
Chrome 91.0.4472.101 (Mac OS 10.15.7): Executed 0 of 0 ERROR (0.007 secs / 0 secs)

Your Environment

Angular Version:

Angular CLI: 12.0.4
Node: 14.17.0
Package Manager: npm 6.14.13
OS: darwin x64

Angular: 12.0.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.4
@angular-devkit/build-angular   12.0.4
@angular-devkit/core            12.0.4
@angular-devkit/schematics      12.0.4
@schematics/angular             12.0.4
rxjs                            6.6.7
typescript                      4.2.4

[alan-agius4]

What is happening here is by commenting the contents of .browserslistrc`, Browserslist will return that there are matching browsers.

In our test webpack configuration we don't explicitly state the we want to target browsers environments. This causes webpack to output invalid output.

While, I'll be working on a fix to address the issue from our side, I recommand that you that do correctly configure which browser you want to support in .browserslistrc as a number of tools and steps in the pipeline do depending on the settings configured in .browserslistrc.