Error deploying brand new AngularFire project - @angular-devkit/build-angular:browser (app:build:production) is not a recognized builder.

[lenfromkits]

[REQUIRED] Environment info

Windows 10 Pro

firebase --version = 13.7.3

ng version =
@angular-devkit/architect 0.1703.5
@angular-devkit/build-angular 17.3.5
@angular-devkit/core 17.3.5
@angular-devkit/schematics 17.3.5
@angular/fire 17.0.1
@schematics/angular 17.3.5
rxjs 7.8.1
typescript 5.2.2
zone.js 0.14.4

node --version
v20.10.0

ionic --version
7.2.0

firebase-tools:
13.7.3

Windows 10 Pro

[REQUIRED] Test case

Create a new AngularFire project and try to deploy

[REQUIRED] Steps to reproduce

1. Create a new ionic/angular standalone project:

ionic start $name$ blank --type=angular

(and fix bug in main.ts to remove the 'captcha' provider, so now it builds.)

2. Add AngularFire

ng add @angular/fire

with options:
- ng deploy -- hosting
- Authentication
- Google Analytics
- App Check
- Firestore
- Cloud Functions (callable)
- Cloud Storage

3. ng deploy

[REQUIRED] Expected behavior

The expected behavior is for the project to build and deploy.

[REQUIRED] Actual behavior

4. Deploy Log with error at the end
   Using firebase-tools version 13.7.3
   Logged into Firebase as lenfromkits@gmail.com.
   📦 Building "app"
   ✔ Browser application bundle generation complete.
   ✔ Copying assets complete.
   ⠋ Generating index html...20 rules skipped due to selector errors:
   :host-context([dir=rtl]) .ion-float-start -> Unknown pseudo-class :host-context([object Object])
   .ion-float-start:dir(rtl) -> Unknown pseudo-class :dir
   :host-context([dir=rtl]) .ion-float-end -> Unknown pseudo-class :host-context([object Object])
   .ion-float-end:dir(rtl) -> Unknown pseudo-class :dir
   :host-context([dir=rtl]) .ion-float-sm-start -> Unknown pseudo-class :host-context([object Object])
   .ion-float-sm-start:dir(rtl) -> Unknown pseudo-class :dir
   :host-context([dir=rtl]) .ion-float-sm-end -> Unknown pseudo-class :host-context([object Object])
   .ion-float-sm-end:dir(rtl) -> Unknown pseudo-class :dir
   :host-context([dir=rtl]) .ion-float-md-start -> Unknown pseudo-class :host-context([object Object])
   .ion-float-md-start:dir(rtl) -> Unknown pseudo-class :dir
   :host-context([dir=rtl]) .ion-float-md-end -> Unknown pseudo-class :host-context([object Object])
   .ion-float-md-end:dir(rtl) -> Unknown pseudo-class :dir
   :host-context([dir=rtl]) .ion-float-lg-start -> Unknown pseudo-class :host-context([object Object])
   .ion-float-lg-start:dir(rtl) -> Unknown pseudo-class :dir
   :host-context([dir=rtl]) .ion-float-lg-end -> Unknown pseudo-class :host-context([object Object])
   .ion-float-lg-end:dir(rtl) -> Unknown pseudo-class :dir
   :host-context([dir=rtl]) .ion-float-xl-start -> Unknown pseudo-class :host-context([object Object])
   .ion-float-xl-start:dir(rtl) -> Unknown pseudo-class :dir
   :host-context([dir=rtl]) .ion-float-xl-end -> Unknown pseudo-class :host-context([object Object])
   .ion-float-xl-end:dir(rtl) -> Unknown pseudo-class :dir
   ✔ Index html generation complete.

Initial chunk files | Names | Raw size | Estimated transfer size
main.7a77dd14bb88ee23.js | main | 642.15 kB | 170.98 kB
polyfills.5cc5d8595aa58135.js | polyfills | 33.51 kB | 10.80 kB
styles.6ab25437bd99c564.css | styles | 27.92 kB | 4.26 kB
runtime.e0748f64a51eb445.js | runtime | 2.85 kB | 1.38 kB

                          | Initial total     | 706.44 kB |               187.43 kB

Lazy chunk files | Names | Raw size | Estimated transfer size
699.81aee107818f150b.js | ios-transition-js | 10.21 kB | 2.62 kB
402.fc42bc4c270e91f3.js | input-shims-js | 4.93 kB | 1.87 kB
338.12fcf3e57ead2a20.js | index9-js | 1.61 kB | 756 bytes
179.9fa9a4cb4886d094.js | md-transition-js | 1.04 kB | 486 bytes
631.ba6dc9a5a0d7e6fd.js | status-tap-js | 530 bytes | 312 bytes

Build at: 2024-04-22T11:00:33.544Z - Hash: 294b96468405882c - Time: 10112ms

Thank you for trying our early preview of Angular support on Firebase Hosting.
During the preview, support is best-effort and breaking changes can be expected. Proceed with caution.

Documentation: https://firebase.google.com/docs/hosting/frameworks/angular
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

Error when trying to deploy:
@angular-devkit/build-angular:browser (app:build:production) is not a recognized builder. Please check your angular.json

[mezzo9]

getting the same error,
Error: @angular-devkit/build-angular:browser (app:build:production) is not a recognized builder. Please check your angular.json

Also tried using
ng deploy --preview
and the result is the same except it says 'development':

@angular-devkit/build-angular:browser (app:build:development) is not a recognized builder. Please check your angular.json

tried to fix it by using these command, nothing worked so far:
npm uninstall @angular-devkit/build-angular
npm install --save-dev @angular-devkit/build-angular
and even
ng update @angular/cli @angular/core --allow-dirty --force

is there a known workaround?

[mezzo9]

workaround:

in your firebase.json file, instead of source, use public with the address to the dist folder.
"public": "dist/myapp",

[aalej]

Hey @lenfromkits, thanks for reaching out. Looking at the provided information, it seems like the error you encountered is similar to #6908. Please refer to the other ticket for any updates and feel free to provide additional information. That said, I’ll be closing this as a duplicate. In case you think this may be a mistake, feel free to ask this issue to be re-opened.

@mezzo9, just to note, changing "source": "." to "public": "dist/myapp" opts you out of the new behavior of automatic build when running firebase deploy.