Search code examples
angularfirebasefirebase-hosting

ERR_CONNECTION_REFUSED after Angular site deployed to Firebase Hosting (localhost...?)

I am trying to evaluate an admin template from angular-templates.io and the production build works fine. I upload to Firebase Hosting specifying dist/browser (created during production build) but when I load the firebase app in the browser, it just shows "Loading...". The error it gives is:

main.43059628ad5e08be77bb.js:1 ERROR Error: Uncaught (in promise): [object Undefined] at R (polyfills.45eead93d001664270af.js:1) at R (polyfills.45eead93d001664270af.js:1) at polyfills.45eead93d001664270af.js:1 at t.invokeTask (polyfills.45eead93d001664270af.js:1) at Object.onInvokeTask (main.43059628ad5e08be77bb.js:1) at t.invokeTask (polyfills.45eead93d001664270af.js:1) at e.runTask (polyfills.45eead93d001664270af.js:1) at d (polyfills.45eead93d001664270af.js:1) at e.invokeTask [as invoke] (polyfills.45eead93d001664270af.js:1) at _ (polyfills.45eead93d001664270af.js:1)

vp @ main.43059628ad5e08be77bb.js:1 localhost:8000/assets/data/ng2_charts.json:1 Failed to load resource: net::ERR_CONNECTION_REFUSED

main.43059628ad5e08be77bb.js:1 ERROR Error: Uncaught (in promise): [object Undefined] at R (polyfills.45eead93d001664270af.js:1) at R (polyfills.45eead93d001664270af.js:1) at polyfills.45eead93d001664270af.js:1 at t.invokeTask (polyfills.45eead93d001664270af.js:1) at Object.onInvokeTask (main.43059628ad5e08be77bb.js:1) at t.invokeTask (polyfills.45eead93d001664270af.js:1) at e.runTask (polyfills.45eead93d001664270af.js:1) at d (polyfills.45eead93d001664270af.js:1) at e.invokeTask [as invoke] (polyfills.45eead93d001664270af.js:1) at _ (polyfills.45eead93d001664270af.js:1) vp @ main.43059628ad5e08be77bb.js:1

localhost:8000/assets/data/extended_table.json:1 Failed to load resource: net::ERR_CONNECTION_REFUSED

It seems to be saying it can't find two files: ng2_charts.json & extended_table.json at localhost:8000/assets/data. Those two files do exist under dist/browser/assets/data, but why is it searching localhost?

I haven't seen anything in the documentation about requiring a configuration change before deployment and I went through the instructions in angular-templates.io

This is literally each step I've performed:

npm i -g @angular/cli

copy source files from downloaded zip (after checking unblock in properties)

npm i
npm audit fix
npm run build:ssr && npm run serve:ssr

creates dist/browser folder and runs fine

npm i @angular/fire firebase --save
npm i angularfire2
npm install -g firebase-tools
firebase init
firebase deploy

Open the firebase app in the browser

It seems like there is a configuration step I missed, but I haven't seen that listed in the documentation anywhere. Any help would be greatly appreciated!

I checked SO to try and find an answer, but these are the closest I've found:

My react project not working after deploy to firebase hosting

Angular 6.0 firebase hosting deploy not working

Angular not displaying firestore data when deployed

Solution

  • Figured it out! Had to update two files (server.ts and src\environments\environment.prod.ts

    server.ts From

    app.listen(PORT, () => {
   console.log(`Node Express server listening on http://localhost:${PORT}`);
});

    To

    app.listen(PORT, () => {
   console.log(`Node Express server listening on https://<myfirebaseproject>.firebaseapp.com:${PORT}`);
});

    and src\environments\environment.prod.ts

    from

    exports.environment = {
   production: true,
   BASE_URL: 'http://mylocalhost:8008'
};

    to 

    exports.environment = {
   production: true,
   BASE_URL: 'https://<myfirebaseproject>.firebaseapp.com'
};

    If this was documented, can someone please comment for my reference? Would have been really helpful if angular-templates.io had mentioned it.