Search code examples
firebasefirebase-hosting

Deployment fails to Firebase Hosting with simple Angular App

I greated a very simple angular app (only shows a home page, and have attempted to deploy to Firebase hosting as shown in the several videos on the subject. It all seems to be working normally when i run it locally with ng serve, and I get output from firebase deploy that looks like this:

i  deploying hosting
i  hosting[bkc-22519]: beginning deploy...
i  hosting[bkc-22519]: found 10 files in dist/hosting-test
✔  hosting[bkc-22519]: file upload complete
i  hosting[bkc-22519]: finalizing version...
✔  hosting[bkc-22519]: version finalized
i  hosting[bkc-22519]: releasing new version...
✔  hosting[bkc-22519]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/bkc-22519/overview
Hosting URL: https://bkc-22519.web.app

But when I visit the Url, I see this:

enter image description here

instead of the home page of my app.

Firebase console doesn't really tell me much, nor can I see the files that were actually deployed.

The browser console reports these errors, none of which I am clear on how to fix:

firebase-app.js:1442 Uncaught SyntaxError: Unexpected token 'export'
firebase-auth.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
firebase-database.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
firebase-firestore.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
firebase-functions.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
firebase-messaging.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
firebase-storage.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
firebase-analytics.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
firebase-remote-config.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
firebase-performance.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
init.js?useEmulator=true:1 Uncaught Error: hosting/init-error: Firebase SDK not detected. You must include it before /__/firebase/init.js
    at init.js?useEmulator=true:1:44
(index):83 ReferenceError: firebase is not defined
    at HTMLDocument.<anonymous> ((index):69:21)

Not that I am not actually using any firebase services (firestore, database, auth etc.) -- the test I am running is a plain vanilla html page with a few images.

How to figure out what's gone wrong here?

Solution

  • In case anybody else encounters this problem, here was why this was happening.

    In the Firebase console, if you set up forwarding, you are instructed to add an "A" record to your DNS. that looks like: enter image description here

    Note in the "Host" field, Google suggests putting in the web address. But on GoDaddy at least though (not sure about other registrars) you need to put "@" in the host field. If you put in the domain name itself, it doesn't work. It also won't even load the local site If this is set up wrong, even the google link to your page on the web. the app will show an error.