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

lenfromkits commented 6 months ago

[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

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.)
Add AngularFire
```
ng add @angular/fire
```
with options:
- ng deploy -- hosting
- Authentication
- Google Analytics
- App Check
- Firestore
- Cloud Functions (callable)
- Cloud Storage
ng deploy

[REQUIRED] Expected behavior

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

[REQUIRED] Actual behavior

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 total     | 706.44 kB |               187.43 kB

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 commented 6 months ago

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 commented 6 months ago

workaround:

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

aalej commented 5 months ago

Hey @lenfromkits, thanks for reaching out. Looking at the provided information, it seems like the error you encountered is similar to https://github.com/firebase/firebase-tools/issues/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.

firebase / firebase-tools