For everyone using this tutorial when using Angular 9+, some things have changed (e.g. server.ts etc). This is what worked for me: My functions now created a folder structure of dist/[PROJECT_NAME]/browser (and /server), and no server.js anymore. - In the index.ts of your functions, be sure that the path after process.cwd() is correct. In my case I changed 'dist/server' to 'dist/[PROJECT_NAME]/server/main' - In your server.ts, in the video he commented out the server.listen. In the new angular version you can remove the run() function (or comment out the run() call) Note: If you first add angular universal and after that add angular/fire, it automatically asks if you want to add a ssr function (great for new projects)

I've watched several Angular universal videos and read several articles on it. They all made it seem like a big deal. This was broken down so beautifully. Well done Jeff!

How can I deploy Angular 9 Universal on Cloud Functions?

OMG Finally 😍😍 I have been waiting for it like for 1 year 🤣 thank you so much, you are the best

omg u saved my life finally great source talk about SSR thank you so much

Great video as always, thanks a lot!

You just saved my life, man! *-* Thanks!!!

Thank you for sharing this informative lesson! I wish you well.

In package.json, why have "npm run serve:ssr" under start, why not just have "node dist/server" right away?

Thank u for this awesome video

Boss, nice one!

Everything Great explained

Question: firebase seves index.html (the static one) as a preference to ssr function, how did you get over that? personally I changed index.html name, but how did you do it?

Very helpful

Can someone please help me? I have an angular 9 project, everything works fine till build and serve ssr but when i try to firebase serve, it says module not found, i did not see any server.config generated file and my server.ts file is changed as well in angular 9.

Hi, I have two projects say 'public' and 'admin' created under a single Angular app/workspace. Now I am trying to add Angular Universal to 'public' project alone. I followed the steps as you mentioned in your video. I got the below error when I tried to build ssr. $ npm run build:ssr --project public > /main-app/src/environments/environment.prod.ts path in file replacements does not exist. Is there anything I need to do to get rid of this error? Please advise.

Great video as always .. I will definitely look into! P.S. love your examples with unicorns and NBA

Liked!

Can't wait to try this out! @jeff do u have any idea how get Google to index user profiles dynamically created from firebase and my angular app?

Hi Jeff, tell me pls, what a track play at the beggining ?

Hi Jef, I have two questions, how can we use LINKS for 'canonical' and 'alternate' in SEO, if import { DOCUMENT } from '@angular/common' is now Deprecated?. Ex: @Inject(DOCUMENT) private doc ... let link: HTMLLinkElement = this.doc.createElement('link'); link.setAttribute('rel', 'canonical'); this.doc.head.appendChild(link); link.setAttribute('href', this.doc.URL); ... And second, I'm using Angular Material and in some cases I have to tweak a little bit the components, in some case for the shadow DOM, I can´t do it with scss, I have to use ElementRef for searching the element and then I use Renderer2, to apply the style. Is there any risk to do this?...I read about some security problems with ElementRef but when you apply styles directly with ElementRef. Ex: const listItems = this.elementRef.nativeElement.querySelectorAll('.mat-expansion-panel-body') as HTMLElement[]; listItems.forEach(listItem => { this.renderer.setStyle(listItem, 'padding', '0px'); }); I really will apreciate your answer. Keep the good work!!

I caught in the "firebase init" part it does not create the functions folder :/ please help me ? i do not speak english...Maybe you give some hint and I did not understand.

Thank you for the great tutorial, Jeff! Would you mind clarifying something for me please, as I'm having a hard time finding concrete answers... I currently have an Angular app that makes http calls to a PHP REST API. Q: Do I need to rewrite my entire PHP API to Nodejs when adding Universal to my Angular app? Or do I simply add Universal, and my app still communicates with the PHP API as it is now? Does Universal merely 'intercept' http responses? Q2: When deploying to a live server, I assume I'll need to execute 'npm run server.js' ... But when I update the server, do I need to stop and restart that service every time? Would really appreciate a clear answer, many thanks!

Can you please explain how can I use global variables (localStorage, window etc) in ssr?

I just got my GCP free 12 month trial but I don't think it includes Firebase hosting... it says my plan is Spark in there :/

Do you have public repository for this to review the code?

These additional steps are required: Error: You must pass in a NgModule or NgModuleFactory to be bootstrapped Fix: 13865 npm i @angular-devkit/build-angular@0.13.4 cd functions npm install --save firebase-functions npm install --save firebase-admin@~7.0.0 Great work Fireship.. David east has shown how to write to CDN for dynamic ssr, then web worker will load it from cache from next time onwards, Also do we have a comprehensive video on pwa?

This was magical, excellent explanation. I have a question, in the case of firebase cloud functions... when making an HTTP request to some API to bring dynamic data and render it from the server, How can I do that ?, Since I tried it but the request is not made in the server and the data does not appear in the source code Can you help me with that?

I had to back to rendertron for now, 😥 I recived in Cloud Functions registers "Discarding entity body for GET requests" and "Error: memory limit exceeded. Function invocation was interrupted." I have to search how to fix it, I think that is hard apply this in an existing app that is using many things.

Any thoughts on why my app-root might be empty still?

Hi Jeff, really helpful. Can we have a couple of videos on angular library or custom schematics

i have trouble with the "firebase external" config... work perfect on localhost, but were i deploy, throw me error, Error: Cannot find module 'firebase/app', and if i remove this, it does not work, because does not load the data from firestore. Some help?

you know you can change webpack to place the output directly in functions/dist, it will have the bare bone in /dist, but that file is not needed for universal

Interesting... We use prerendering and cashing for our app.. Gotta calculate the cost of app engine vs cloud finction when it comes to significant traffic... Currently we pays only 15 bucks a month fir prerendering. And yet I'm impressed, where do u pall find times for everything?

Great one. well explained. I've a problem with firebase deploy. I can load the home page and from there, I can navigate to any page. But when I enter an absolute path or reload browser, it throw error "could not handle request" and in firebase console, I can see an error "Typeerror: handler is not a function". Any idea how to solve this?

I can't see the index.html file in my dist folder. Any Idea what could have happened?

Skipping installation: Package already installed Unknown option: '--clientProject' Unknown option: 'blk-design-system-angular' how to solve this?

Any 2023 update for SSR + Angular + i18n ?

Hello, After following all the defined steps I was able to deploy the app. But still it is not deployed as a Universal version as in after deployment when I view source then it is showing only Kindly if anyone can help it out then it would be better.

Nice video, thanks. What if i have spring boot server and mysqldb along with angular frontend application, is it possible to build docker container out of those and deploy to google cloud for free?

Hi Title and meta serving through api not showing in view source. How can we solve this issue

ssr is not working on cloud function. Even I followed all the steps and even page view source come up with empty app-root.

Baseball or basketball?

Are the Facebook og meta tags actually working for anyone?

How Universal compare to Puppeteer solution in your experience?

Jeff you are a fucking machine

Hello, no offense but things changed now, would you be kind enough to redo this for new angular ssr? it would be really nice. i know you like angular

hello I followed the tutorial on fireship.io/lessons/angular-universal-firebase/ step by step. I want to deploy to Firebase Hosting with Firebase Cloud Functions For some reason the npm run serve:ssr is not delivering the same result as firebase serve.. The firebase serve command is not pre-rendering the html. It only delivers the blank html page with , whereas the npm run serve:ssr delivers the full html as in the video.. I'm running Angular 8 and not 7 as in the video. The other difference is that I have Node v10.16.3 installed and not Node 8.14 as recommended in the video but once uploaded by firebase deploy, it shouldn't make a difference I guess.. What do I do to get the pre_render on Firebase??

So are you saying if we use jquery we can't use universal?

Can you share soundtracks please? Thanks

Can you do a video on NestJS?

throw new Error("package.json does not exist at " + package_json_path);

So for SSR... if we want to run a node app with high demand, we should use App Engine, but if we want to run a node app with low demand, we should do hacking and use Cloud Function plus Firebase Hosting.

fixed firebase deploy with index.ts export const ssr = functions.https.onRequest((request, response) => { require(`${process.cwd()}/dist/server`).app(request, response); });

Baseball? 🤔😊

Video didn't work

The functions portion of this video is now useless. server.ts is unrecognizable. Looks nothing like the current version.

first :P

Useless if cannot render data from the database.

confundes mucho men