Firebase Web Frameworks - Angular 18 Firebase Hosting is Not Working as Expected

KasunNi commented 1 week ago

[REQUIRED] Environment info

firebase-tools: 13.19.0

Platform: Windows & Ubuntu in GitHub Actions

[REQUIRED] Test case

Deploying an Angular 18 project to Firebase hosting using Firebase Web Frameworks support

[REQUIRED] Steps to reproduce

Deploy Angular 18 App into Firebase Hosting using firebase-tools@13.19.0

[REQUIRED] Expected behavior

Deploy the application in to the Firebase successfully.

[REQUIRED] Actual behavior

The console is shown following as last output and the process is just terminating. There were no error code or error description.

Application bundle generation complete. [13.135 seconds]

Error: An unexpected error has occurred.

But when tring with Angular 17, the process is working as expected. The application is same and already have the angular 17 version and angular 18 versions.

Both working well in debug mode.

So, when tried to deploy using GitHub Actions, same issue happens and the log as follows,

` 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 Initial chunk files | Names | Raw size | Estimated transfer size main-2ZOFLG4V.js | main | 942.91 kB | 144.96 kB styles-5QNMP7RX.css | styles | 321.17 kB | 30.53 kB polyfills-N6LQB2YD.js | polyfills | 35.53 kB | 11.60 kB | Initial total | 1.30 MB | 187.08 kB Output location: /home/runner/work/project1/project1/dist/project1 Application bundle generation complete. [16.381 seconds]

  at new AssertionError (node:internal/assert/assertion_error:452:5)
  at assertIsString (/home/runner/.npm/_npx/ba4f1959e38407b5/node_modules/firebase-tools/lib/utils.js:402:15)
  at getBrowserConfig (/home/runner/.npm/_npx/ba4f1959e38407b5/node_modules/firebase-tools/lib/frameworks/angular/utils.js:375:32)
  at async ɵcodegenPublicDirectory (/home/runner/.npm/_npx/ba4f1959e38407b5/node_modules/firebase-tools/lib/frameworks/angular/index.js:86:62)
  at async prepareFrameworks (/home/runner/.npm/_npx/ba4f1959e38407b5/node_modules/firebase-tools/lib/frameworks/index.js:241:13)
  at async deploy (/home/runner/.npm/_npx/ba4f1959e38407b5/node_modules/firebase-tools/lib/deploy/index.js:58:13)
  at async Command.hostingChannelDeployAction [as actionFn] (/home/runner/.npm/_npx/ba4f1959e38407b5/node_modules/firebase-tools/lib/commands/hosting-channel-deploy.js:90:25)

Error: An unexpected error has occurred. The process '/usr/local/bin/npx' failed with exit code 2 Error: The process '/usr/local/bin/npx' failed with exit code 2`

9kubczas4 commented 1 week ago

Hi @KasunNi,

I tried to reproduce this issue, but with no luck.

Here is the repository which I used: https://github.com/9kubczas4/ng-18.

Angular 18.1.0 Firebase Tools 13.19.0 Node v18.19.1, but also I tried v20.11.1.

Deployment went successfully.

Could you provide more details like, node versions, could you create the repository with app which you're trying to deploy?

Thank you in advance for help.

KasunNi commented 1 week ago

Hi @9kubczas4,

Thank you for joining here, The app was actually one that I'm currently working on is belongs to an organisation that I'm working on. My environment details as follows,

Angular 18.0.6 Firebase Tools 13.19.0 Node v20.9.0

As you mentioned, I tried a new app that creates using ng new and the issue not reproduced and deployed well. I would like to provide here another simple app's package.json that also not worked when we tried.

{ "name": "project-abcd-efgh", "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": "^18.2.0", "@angular/cdk": "^18.2.0", "@angular/common": "^18.2.0", "@angular/compiler": "^18.2.0", "@angular/core": "^18.2.0", "@angular/forms": "^18.2.0", "@angular/material": "^18.2.0", "@angular/platform-browser": "^18.2.0", "@angular/platform-browser-dynamic": "^18.2.0", "@angular/router": "^18.2.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.14.10" }, "devDependencies": { "@angular-devkit/build-angular": "^18.2.0", "@angular/cli": "^18.2.0", "@angular/compiler-cli": "^18.2.0", "@angular/localize": "^18.2.0", "@types/jasmine": "~5.1.0", "jasmine-core": "~5.2.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.5.2" } }

Now I deleted .firebaserc and firebase.json and re-init the firebase using firebase init with new project and now It is working.

This issue may mostly not from firebase side I hope, I hope that may be the dependencies those we used and also may be an angular upgrade problem that we having with our app.

I'll provide if specific issues are found. Again thank you @9kubczas4 for help here.

9kubczas4 commented 14 hours ago

Hi @KasunNi,

Based on your comments, in case when you faced some issues related to deploying an updated Angular application for 17 to 18, then please provide more details.

Thank you in advance

firebase / firebase-tools