`@angular-devkit/build-angular@15.2.x` with enabled optimizations causes errors

[nikitalpopov]

Environment

• Operating System version: macOS 13.2.1
• Browser version: Chrome Version 111.0.5563.110
• Firebase SDK version: 9.18.0
• Firebase Product: installations

Problem description

After latest Angular minor release there is an error being logged at this line for every user who doesn't have any firebase settings saved in the app storage before an update:

Cannot read properties of undefined (reading 'fid')

Steps to reproduce:

1. Create an Angular 15 app with @angular-devkit/build-angular@15.2.x
2. Add firebase@9 dependency (issue was reproduced for 9.9.4, 9.15.0 and 9.18.0)
3. Build app with optimizations being on (production configuration in angular.json below)

There is no error when @angular-devkit/build-angular@15.1.x and below is used
There is no error when optimizations are off (dev configuration in angular.json below)

Relevant Code:

package.json

{
  "dependencies": {
    "@angular/animations": "^15.1.0",
    "@angular/cdk": "^15.1.0",
    "@angular/common": "^15.1.0",
    "@angular/core": "^15.1.0",
    "@angular/forms": "^15.1.0",
    "@angular/platform-browser": "^15.1.0",
    "@angular/platform-browser-dynamic": "^15.1.0",
    "@angular/router": "^15.1.0",
    ...
    "firebase": "^9.18.0",
    ...
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.1502.4",
    "@angular-devkit/build-angular": "~15.1.0",     <- THIS ONE CAUSES ERROR IF UPDATED TO 15.2.0+
    "@angular-devkit/core": "^15.1.0",
    "@angular-devkit/schematics": "^15.1.0",
    "@angular-eslint/eslint-plugin": "^15.1.0",
    "@angular-eslint/eslint-plugin-template": "^15.1.0",
    "@angular-eslint/template-parser": "^15.1.0",
    "@angular/cli": "^15.1.0",
    "@angular/compiler": "^15.1.0",
    "@angular/compiler-cli": "^15.1.0",
    "@angular/language-service": "^15.1.0",
    ...
  },
  ...
}

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [...],
            "styles": [...],
            "stylePreprocessorOptions": {},
            "scripts": [],
            "optimization": true,
            "outputHashing": "all",
            "sourceMap": true,
            "namedChunks": true,
            "aot": true,
            "extractLicenses": false,
            "commonChunk": true,
            "vendorChunk": true,
            "buildOptimizer": true,
            "budgets": [...],
            "statsJson": true
          },
          "configurations": {
            "dev": {
              "optimization": false,
              "outputHashing": "none",
              "sourceMap": true,
              "namedChunks": true,
              "vendorChunk": false,
              "aot": false,
              "buildOptimizer": false,
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ],
              "statsJson": false
            },
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.production.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "dev": {
              "browserTarget": "app:build:dev"
            },
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        }
      }
    }
  },
  ...
}

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[hsubox76]

My best guess based on your description is that somewhere in the chain, one of the variables being passed to set() there gets incorrectly mangled by build-angular's minifier so that value comes out as undefined. Unfortunately I can't guess where in the chain build-angular optimizer mangles a variable it shouldn't.

Since this was 2.5 months ago I'm hoping this was a bug in build-angular and it's since been fixed. Let us know if that's not the case.

[nikitalpopov]

Hey @hsubox76
Unfortunately the issue is still present at 15.2.8

[hsubox76]

I'm not sure how to further diagnose this as I don't have any access to how build-angular's minifier or mangler work, I'd suggest opening an issue on build-angular's repo. Maybe a good starting point is to dig into the release notes between the last known Angular version where this was working and the one after, and see if there are any minifier or other similar changes that would be worth looking into. I'm not an Angular expert so any outside help looking into this would be great.