Update docs around Universal

[inorganik]

Currently the docs provided for running universal with firebase have not been updated in over 2 years. Comparing the code provided there with the sample project in this repo, it's easy to spot some differences:

• major changes in server.ts, notably the lack of AppServerModuleNgFactory and a module mapper, the inclusion of a firestore "protos" loader
• the absence of a webpack config file
• the universal cloud function has changed
• package scripts are different

Given the long running issues and ongoing challenges of doing universal with firebase, it would be awesome to have current docs on how to set this up in a way that is proven to work. If you are open to PRs I could open one.

It may also be worth maintaining a separate repo for a sample project that demonstrates serving routes that use firestore data so we can be sure what works when server-side rendering pages that need firestore data. It would be a great reference but also a great testing ground for when new versions of angular or firebase are released.

Thank you!

Version info

Angular: 11

Firebase: 8.0.0

AngularFire: 6.1.4

Other (e.g. Ionic/Cordova, Node, browser, operating system):

How to reproduce these conditions

n/a

Steps to set up and reproduce

n/a

Sample data and security rules

n/a

Debug output

n/a

Expected behavior

n/a

Actual behavior

n/a

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[inorganik]

Didn't realize this but the deploy docs now cover deploying an SSR application to firebase.

That simplifies that issue - it just needs to be linked from the universal docs with a note, and the old instructions taken down.

[Ashvin-Pal]

Hey there, couldn't find any information about this question on stack overfow. I couldn't find the answer in the documentation. I think the answer will benefit a lot of pole. Thanks in advance! :)

[timofeysie]

Following the current documentation from these two links still fails to run:

• Getting started with AngularFire and Universal
• Deploying your Universal application on Cloud Functions for Firebase

The end result of firebase serve is:

Error: Cannot find module './firetrend-server/main' at webpackEmptyContext (webpack://app/./dist/_sync_^\.\/.*\-server\/main$?:2:10) at eval (webpack://app/./server.ts?:37:127) at Module../server.ts 
...

I have a repo following the docs to reproduce this error here.

firebase deploy will result in a 500 error. It seems like the docs are close to working, except for this issue. The apps in the samples directory are still based on Angular 9 and should be updated.

The same error seems to be described here.

[jamesdaniels]

Samples are up to date & working with SSR and the schematic should handle everything for you, especially the upcoming one, ng add @angular/fire@next. Will get around to the docs soon.

[timofeysie]

I'm not sure which schematic you are talking about. I used all the schematics as shown in the docs and got the above error.

The samples should possibly be in their own repos. Trying to run them from their directory in the repo fails for me. There is a yarn.lock so I'm assuming I should be using yarn. Seems like I must be missing something.

C:\Users\timof\repos\timofeysie\angular\angularfire\samples\advanced>git pull
...
Current branch master is up to date.
C:\Users\timof\repos\timofeysie\angular\angularfire\samples\advanced>yarn
yarn install v1.22.4
[1/4] Resolving packages...
[2/4] Fetching packages...
error "../../angular-fire-7.1.0.tgz": Tarball is not in network and can not be located in cache (["C:\\Users\\timof\\repos\\timofeysie\\angular\\angularfire\\angular-fire-7.1.0.tgz","C:\\Users\\timof\\AppData\\Local\\Yarn\\Cache\\v6\\npm-@angular-fire-7.1.0-09c9450ae2d6290d22a9c57ce2246d1c4ded7f10\\node_modules\\@angular\\fire\\.yarn-tarball.tgz"])
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Maybe you could leave a note here on how to use the vanilla schematic, no fuss, to deploy an Angular Universal app. It seems like the error from following the docs shown in my previous comment (Cannot find module './firetrend-server/main') should be an easy fix.

[jamesdaniels]

The docs are very out of date yes. The ng add @angular/fire and ng deploy should "just work" now. Further enhancements have been made on NPM @next.

ng add @angular/fire@next
ng deploy

Making another repo takes time & approvals at a big company, also it's an increased maintenance burden having them separate. Further they serve as a useful test bed when we're developing AngularFire & I intend to write e2e tests for them that run as part of this repos test suite.

They assume a built and packed AngularFire at the root as ngc has trouble with pinned libraries. yarn build, npm pack ./dist/packages-dist

Please pardon the state of the docs right now. We're in the middle of rewriting them as we just dropped a new major & have an entirely new tree-shakable javascript sdk that just came out.