Firebase web framework detection error on deploy, emulator start and default github deploy pipeline

Question

When i try to deploy my angular web application with the firebase deploy command, start the firebase emulators with the firebase emulators:start command or when the default github deploy on merge pipeline is executed i always get the same error:

Could not determine the web framework in use.

Error: Unable to detect the web framework in use, check firebase-debug.log for more info.

Documentation: https://firebase.google.com/docs/hosting/frameworks/frameworks-overview
File a bug: https://github.com/firebase/firebase-tools/issues/new?template=bug_report.md
Submit a feature request: https://github.com/firebase/firebase-tools/issues/new?template=feature_request.md

We'd love to learn from you. Express your interest in helping us shape the future of Firebase Hosting: https://goo.gle/41enW5X      

I saw a lot of posts mentioning, this is a problem with authentication and that you should log out and in again in the firebase cli. In my case that did not help.

I also tried to re run the firebase init command, which did not help. Here is are my firebase config files. I did not change anything besides the public folder location:

firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "source": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "europe-west1"
    }
  },
  "storage": {
    "rules": "storage.rules"
  },
  "emulators": {
    "auth": {
      "port": 9099
    },
    "firestore": {
      "port": 8080
    },
    "hosting": {
      "port": 5000
    },
    "storage": {
      "port": 9199
    },
    "ui": {
      "enabled": true
    },
    "singleProjectMode": true
  }
}

.firebaserc

{
  "projects": {
    "default": "mySite-31783"
  },
  "targets": {
    "mySite-31783": {
      "hosting": {
        "mySite": [
          "mySite-31783"
        ]
      }
    }
  }
}

package.json

{
  "name": "mySite",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.2.0",
    "@angular/cdk": "^16.2.7",
    "@angular/common": "^16.2.0",
    "@angular/compiler": "^16.2.0",
    "@angular/core": "^16.2.0",
    "@angular/fire": "^7.6.1",
    "@angular/flex-layout": "^15.0.0-beta.42",
    "@angular/forms": "^16.2.0",
    "@angular/material": "^16.2.7",
    "@angular/platform-browser": "^16.2.0",
    "@angular/platform-browser-dynamic": "^16.2.0",
    "@angular/router": "^16.2.0",
    "firebase": "^10.5.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.2.5",
    "@angular/cli": "^16.2.5",
    "@angular/compiler-cli": "^16.2.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.6.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.1.3"
  }
}

Answer 1

I found the problem after some more trouble shooting.

Turns out my firebase.json was generated with a wrong parameter.

Instead of a parameter named "public" for the location of the build "source" was added to the hosting section and so the app code could not be found.

This is the correct hosting config:

"hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "europe-west1"
    }
  }