angular / angularfire

Angular + Firebase = ❤️
https://firebaseopensource.com/projects/angular/angularfire2
MIT License
7.66k stars 2.19k forks source link

issue with deploying angular 9 SSR #2385

Closed khaled6mmd closed 3 years ago

khaled6mmd commented 4 years ago

I followed this guides here

https://github.com/angular/angularfire/blob/master/docs/deploy/getting-started.md https://github.com/angular/angularfire/pull/2372/files#diff-e76f33db0439ee8e320dfa7ecf47f09b

to convert and deploy my app

when I do

ng deploy --project=coupons it builds and everything goes fine until I get to the last step Deploying your Angular Universal application... I get this error

Entrypoint main [big] = main.js
chunk    {0} main.js (main) 6.94 MiB [entry] [rendered]
Deploying your Angular Universal application...
success.hosting.split is not a function

when I do ng deploy --preview I get no errors

but firebase serve

http://localhost:5000/ gives blank screen with Cannot GET /

http://localhost:5005/ gives blank screen with Cannot GET /

Error: Forbidden
Your client does not have permission to get URL /ssr/ from this server.

I don't know this could help, but I think the problem is in here with the paths of fire.json

this how my dist folder looks like

https://ibb.co/3SS1fbP

and this my fire.json

{
  "hosting": [
    {
      "target": "coupons",
      "public": "dist/coupons/",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "rewrites": [
        {
          "source": "**",
          "destination": "/index.html"
        }
      ]
    },
    {
      "target": "coupons",
      "public": "dist\\coupons",
      "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
      "rewrites": [
        {
          "source": "**",
          "function": "ssr"
        }
      ]
    }
  ]
}
Silvac34 commented 4 years ago

1st try to replace your firebase.json file:

{ "hosting": [ { "target": "coupons", "public": "dist/coupons/", "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], "rewrites": [ { "source": "**", "function": "ssr" } ] } ] }

khaled6mmd commented 4 years ago

1st try to replace your firebase.json file:

{ "hosting": [ { "target": "coupons", "public": "dist/coupons/", "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], "rewrites": [ { "source": "**", "function": "ssr" } ] } ] }

okay it deploys but get this error when I try to open the site I get this

Error: Forbidden
Your client does not have permission to get URL /ssr/ from this server.
Silvac34 commented 4 years ago

Do you use in your ssr function functions.region('europe-west1') for instance ?

".region('your_region')" does not work with the ssr function

khaled6mmd commented 4 years ago

as far as I know I don't

but this makes sense because every time I try to open the app I get redirect to https://us-central1-couponaty-8f693.cloudfunctions.net/ssr/

but I don't understand how is this related

Silvac34 commented 4 years ago

Can you share more code related to your problem ?

khaled6mmd commented 4 years ago

Can you share more code related to your problem ?

I uploaded the app to another firebase project and it gave me 404, I don't understand anymore

here it the project itself

Deleted Link

Silvac34 commented 4 years ago

I don't know if you're firebase.json is up to date in local but in your repo it's wrong :

{
  "hosting": {
    "public": "dist/coupons",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html" --> should be "function": "ssr"
      }
    ]
  }
}

In server.ts maybe you should import

(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xhr2');

? also try to update to angular 9.1.0 and @angular/fire 6.0.0. Before getting to these versions I couldn't manage to make ssr work

khaled6mmd commented 4 years ago

I don't know if you're firebase.json is up to date in local but in your repo it's wrong :

{
  "hosting": {
    "public": "dist/coupons",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html" --> should be "function": "ssr"
      }
    ]
  }
}

In server.ts maybe you should import

(global as any).WebSocket = require('ws');
(global as any).XMLHttpRequest = require('xhr2');

? also try to update to angular 9.1.0 and @angular/fire 6.0.0. Before getting to these versions I couldn't manage to make ssr work

Ok, thanks anyway, I will wait for another versions to be released, maybe

jamesdaniels commented 3 years ago

Closing as outdated, many of these problems have been addressed and we now have an SSR deploy schematic.