In angular 6 everything is different. Will we have an updated video so that we can achieve the server side render in firebase functions with angular 6? Please help us with that.
There's an error in the "server/index.ts" file. The correct directory for the "index.html" is "/dist-server/index.html" and not just "index.html", so the correct "document" variable value is: const document = fs.readFileSync(__dirname + '/dist-server/index.html', 'utf8'); Obviously you need to generate again the "index.js" file in the functions folder using "tsc". With this correction everything works. Thank You!!
If you look closely, then you will see that he pastes the index.html file in the root of functions and not in the dist-server folder. I had the same issue. But i agree in it should be in dist-server instead of in the root of functions
Hi, I have a website application in angular 9. I use angular universal to get it server side rendered and when I am locally testing,it got rendered.But after I deployed it in firebase, I can't be able to view the rendered page source.What should I do ?.. ..Please help..
I followed your instructions and my issue is that the express app is not called. Should I setup something else except rewrite in my firebase.json? Also when I try to execute function manually using function's URL I get "Billing account not configured. External network is not accessible and quotas are severely limited. Configure billing account to remove these restrictions".
Kudos to the presentation - very well delivered. However, Uhhh... omg I find this just a bit complex for what we're trying to accomplish. I think I'll skip server side rendering for now and come back around when we have more convention, etc. in place. :) Good job on the angular-universal-express-firebase module though it's a very good step in the right direction. :)
#AskFirebase #AskDavidEast Hi David! Many thanks for you videos. We are struggled with the SRR implementation, and it seems that is beacause an incompatibility with angulafire2. I have this error message: "Cannot read property 'filter' of undefined at _firebaseAppFactory", "The XMLHttpRequest compatibility library was not found" "Firestore has already been started and persistence can no longer be enabled server side rendering" "cannot read property host of undefined" (the line of window.location.host). Do you have any idea about this issue?
How would you work now that the default is angular5? Since it mentions that it comes with tools to be able to make the server side rendering. "In 5.0.0, the team has added ServerTransferStateModule and the corresponding BrowserTransferStateModule. This module allows you to generate information as part of your rendering with platform-server, and then transfer it to the client side so that this information does not need to be regenerated. " Besides that now we also have firestore. blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced
Hey David, at 16.10 we have to add express too or it's bundled in the package you wrote? And also I'm failing with a ``` Error: Error parsing triggers: Cannot find module '@angular/core' ``` even though I have installed all dependencies
Thanks for sharing! It's been a while since this has been shared. I've everything running fine. Now I want to set meta tags from api call on server? is that possible? I created logic for making that but that doesn't show up as expected when I check 'doc' in response? I appreciate any kind of help.
Dear David, This is great for a single page site. I have a multiple pages website and if I try to go to the page manually or refresh the page, it gives me an error. "Error: could not handle the request". I tried to put ' "destination": "/index.html" ' and then gives me this error ' Error: HTTP Error: 400, hosting.rewrites[0] is not exactly one from [subschema 0],[subschema 1] '. Sorry to ask here but apparently, I am the only one having this issue. I have not been able to find an answer anywhere. Could you please help me with this? Thanks.
@Firebase Failed to complete. After trying to start locally(firebase serve --only functions,hosting) I get 'moduleFactory.create is not a function' with latest angular cli and angular5
Hi David (+firebase), I'm using UIKIT for my design framework, I have npm installed uikit package and added the references to 'styles' and 'scripts' in .angular-cli.json file. My app rendering state is SSR, which compiles well but it fails to package in my all extended scripts which I had added in .angular-cli.json file. I have tried non-ssr project which executes with no issues. Please, can you assist me with what might be wrong or can do to make it work.
Hi, after build app 0 and app 1, I can't extract AppServerModuleNgFactory from main.bundle.js! I have my app splitted in 4 modules, an inside main bundle I can find them, but My AppServerModuleNgFactory is missing. Someone can help me? I am using angular 5, and I have read than it doesn't generate ngFactory.ts files! Thanks!
I cannot build with command `ng build --prod --app 1` because structure has changed in angular 6 now it is an object inside architect as instructed on angular.io/guide/universal. Can you expalain on how to do it now ?
I've labored over Universal 6 and trying to get it to work in Firebase for the past couple days now following tutorials on the online documentation, blog posts, and other tutorials out there and there's nothing quick or easy about this. In fact, I still can't get it to work (at all). At this point, it almost seems a better use of my time to just make the entire site in static HTML for the sake of getting Google's bots to actually read the web content instead of trying to serve it up with Angular and not be read at all. It would be IMMENSELY helpful (and I cannot understate this) if Angular and/or Firebase could streamline the process of doing what Universal is supposed to do without all this nonsense. The site I'm working on uses Angular heavily but if it can never be read by Google Search Bots or social network sharing, I hardly see the point of using Angular at all. It would be nice to see Angular and Firebase work together to address this with a more streamlined solution, one that doesn't require hours of configurations and days of tearing your hair out because things just don't work the way people say they will in their documentation, tutorial, or blog post.
Im really looking forward for the React version of this, kind of got confuse with the Angular code. When you do the React version can you please reinforce the Firebase work thar has to be done? Please :)
Anyone here still struggle with this till now? I'm trying to implement it but got error with firestore (i'm not using cloud function for some reason). The error was 'Cannot read property 'stringify' of undefined'. I already post a question here: stackoverflow.com/questions/53994844 and on firebase comunication slack but get nothing till now. It would be great if you can give me a hand!?
For those using the Angular CLI, we have just updated the universal-starter so you can get started right away :) Find it here: github.com/angular/universal-starter/tree/master/cli I also made a PR and the CLI wiki will be updated so you can follow along with each step needed to get you up and running quickly. Find the PR here: github.com/angular/angular-cli/pull/7796/files Hope that helps!
Spent lots of time getting these finished last night, but they're both updated, hopefully it helps! Universal-starter with the CLI: github.com/angular/universal-starter/tree/master/cli Updated CLI wiki on Universal integration: github.com/angular/angular-cli/pull/7796/files
I am not sure why people in google can make such type of videos as this guy is doing very fast changes and its useless to create videos like these with configuration setups. There should be auto initialization of this code with angular CLI. It just create complexity and negativity in my head.
Does anyone know an angular version 7 for angular universal and firebase as this videos a bit outdated now?
was eagerly waiting for you next video.. even an hour ago i was checking firebase channel for new video..thanks
I love frienders! Thanks guys, keep up the good work!
In angular 6 everything is different.
Will we have an updated video so that we can achieve the server side render in firebase functions with angular 6?
Please help us with that.
It is amazing to be able to compile your applications made in angular on the server.
I am very excited because this keeps growing.
Hopefully the CLI team will be able to minimize the work done here
This is for sure, so many redundant changes which could be automated, as you know from the beginning of the project that you want SSR
ng add @nguniversal/express-engine
:=)
@@maazm4722 yup, this comment was from 3 years ago. thanks tho!
There's an error in the "server/index.ts" file. The correct directory for the "index.html" is "/dist-server/index.html" and not just "index.html", so the correct "document" variable value is:
const document = fs.readFileSync(__dirname + '/dist-server/index.html', 'utf8');
Obviously you need to generate again the "index.js" file in the functions folder using "tsc".
With this correction everything works.
Thank You!!
Thank You. @Firebase Please rectify it in the video
If you look closely, then you will see that he pastes the index.html file in the root of functions and not in the dist-server folder. I had the same issue. But i agree in it should be in dist-server instead of in the root of functions
Also, I would love to see the Firebase SDK to have offline first support for PWAs (offline like caching the fetched data from firebase)
Firebase SDK for angular does support offline-first approach.
@@ValAllenSamonte Yes, and I replied today for anyone else reading in the future.
Huh?!
600 seconds or 5 minutes?
1200 seconds or 10 minutes?
Awesome! Waiting Vuejs!
"quickly" 0:24
I would like the git repository of this example, please. only I found with universal but not to Firebase Cloud Functions
Hi, I have a website application in angular 9. I use angular universal to get it server side rendered and when I am locally testing,it got rendered.But after I deployed it in firebase, I can't be able to view the rendered page source.What should I do ?.. ..Please help..
I wonder when functions will be available outside the US.. it makes SSR useless with functions anyone hosting on a region outside US
no git repository for this example?
Is this still the situation today? Is there some official solution? I am evaluating angular and this makes me want to run the other way screaming.
I followed your instructions and my issue is that the express app is not called. Should I setup something else except rewrite in my firebase.json? Also when I try to execute function manually using function's URL I get "Billing account not configured. External network is not accessible and quotas are severely limited. Configure billing account to remove these restrictions".
is angular 6 different ?
i can see html in chrome inspector not only javascript .
Inspector shows rendered one not the source check it's source and all see will be nothing
Hi David, what VSCode plugin do you use for angular?
Kudos to the presentation - very well delivered. However, Uhhh... omg I find this just a bit complex for what we're trying to accomplish. I think I'll skip server side rendering for now and come back around when we have more convention, etc. in place. :) Good job on the angular-universal-express-firebase module though it's a very good step in the right direction. :)
#AskFirebase #AskDavidEast Hi David! Many thanks for you videos. We are struggled with the SRR implementation, and it seems that is beacause an incompatibility with angulafire2. I have this error message: "Cannot read property 'filter' of undefined at _firebaseAppFactory", "The XMLHttpRequest compatibility library was not found" "Firestore has already been started and persistence can no longer be enabled server side rendering" "cannot read property host of undefined" (the line of window.location.host). Do you have any idea about this issue?
can you please share a github link for this demo?
Video is outdated ))
Does it work with angularfire2?
Not yet! But I have something planned :)
Any news on this topic? :)
any updates?
What is the font in your vscode?
How would you work now that the default is angular5? Since it mentions that it comes with tools to be able to make the server side rendering.
"In 5.0.0, the team has added ServerTransferStateModule and the corresponding BrowserTransferStateModule. This module allows you to generate information as part of your rendering with platform-server, and then transfer it to the client side so that this information does not need to be regenerated. "
Besides that now we also have firestore.
blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced
Thank you! nice example
The module created by you 'angular-universal-express-firebase' is giving error mergeMap not found
No matter how much I try to do this, it does not work.
github.com/Intellinto/angular-boilerplate/tree/feature/ssr
Hello in my project i have angular.json instead of .angular-cli.json , how can i change kindly help me
Does AngularFire2 with Firestore supports Angular Universal? That would be very important for us to know.
Thank you for the great video!
Hello, I have an error on server/index.ts.. It stated that cannot find module 'firebase-functions', can somebody help me with it?
Awesome 😁 waiting for the react part 😀
Hey David, at 16.10 we have to add express too or it's bundled in the package you wrote?
And also I'm failing with a ``` Error: Error parsing triggers: Cannot find module '@angular/core' ``` even though I have installed all dependencies
Thanks for sharing! It's been a while since this has been shared. I've everything running fine. Now I want to set meta tags from api call on server? is that possible? I created logic for making that but that doesn't show up as expected when I check 'doc' in response? I appreciate any kind of help.
hello
I am trying to connect to connect custom domain with firebase web hosting but it always shows "needs setup".
Please help me
Dear David,
This is great for a single page site. I have a multiple pages website and if I try to go to the page manually or refresh the page, it gives me an error. "Error: could not handle the request". I tried to put ' "destination": "/index.html" ' and then gives me this error ' Error: HTTP Error: 400, hosting.rewrites[0] is not exactly one from [subschema 0],[subschema 1] '. Sorry to ask here but apparently, I am the only one having this issue. I have not been able to find an answer anywhere. Could you please help me with this? Thanks.
This is a mess that now lives in my brain. Was this before Angular added `platform-server`?
@Firebase Failed to complete. After trying to start locally(firebase serve --only functions,hosting) I get 'moduleFactory.create is not a function' with latest angular cli and angular5
it still works with Angular 6 🤔 or there is a new way of doing SSR with angular 6 + firebase hosting?
How to deploy angular SSR application in cpanel ?
David will the React SSR video include Redux integration ?
i think this video is outdated now, so many things has changed on Angular-6
Como vas a mantener un websystem así durante 10 años ? Y para un website... No es mucha complejidad ??
Hi David (+firebase), I'm using UIKIT for my design framework, I have npm installed uikit package and added the references to 'styles' and 'scripts' in .angular-cli.json file. My app rendering state is SSR, which compiles well but it fails to package in my all extended scripts which I had added in .angular-cli.json file. I have tried non-ssr project which executes with no issues. Please, can you assist me with what might be wrong or can do to make it work.
What if the client or spider hits a route apart from index?
Cool intro
Hi, after build app 0 and app 1, I can't extract AppServerModuleNgFactory from main.bundle.js! I have my app splitted in 4 modules, an inside main bundle I can find them, but My AppServerModuleNgFactory is missing. Someone can help me? I am using angular 5, and I have read than it doesn't generate ngFactory.ts files!
Thanks!
Awesome! Thanks!
I cannot build with command `ng build --prod --app 1` because structure has changed in angular 6 now it is an object inside architect as instructed on angular.io/guide/universal. Can you expalain on how to do it now ?
I've labored over Universal 6 and trying to get it to work in Firebase for the past couple days now following tutorials on the online documentation, blog posts, and other tutorials out there and there's nothing quick or easy about this. In fact, I still can't get it to work (at all). At this point, it almost seems a better use of my time to just make the entire site in static HTML for the sake of getting Google's bots to actually read the web content instead of trying to serve it up with Angular and not be read at all.
It would be IMMENSELY helpful (and I cannot understate this) if Angular and/or Firebase could streamline the process of doing what Universal is supposed to do without all this nonsense. The site I'm working on uses Angular heavily but if it can never be read by Google Search Bots or social network sharing, I hardly see the point of using Angular at all. It would be nice to see Angular and Firebase work together to address this with a more streamlined solution, one that doesn't require hours of configurations and days of tearing your hair out because things just don't work the way people say they will in their documentation, tutorial, or blog post.
Unfortunately, This doesn't support lazy loading :{
ModuleMapLoaderModule //
Uh! I It´s too soon to adopt FirebaseHosting, CloudFuncition and Angular (ssr or not). To much work!!!
Wish you started with React.js but I'm sure this will be useful in the future when I add Angular to my tool box.
Very soon :)
Im really looking forward for the React version of this, kind of got confuse with the Angular code. When you do the React version can you please reinforce the Firebase work thar has to be done? Please :)
Hi,
I want to deploy my angular universal code on a2 shared hosting. Could you please make a session on that. It would help me. Thanks
Can you please create an updated video
Anyone here still struggle with this till now? I'm trying to implement it but got error with firestore (i'm not using cloud function for some reason).
The error was 'Cannot read property 'stringify' of undefined'. I already post a question here: stackoverflow.com/questions/53994844 and on firebase comunication slack but get nothing till now. It would be great if you can give me a hand!?
The music is pretty similar to the one from the show "Everybody hates Chris"
Awesome
How settings in angular.json file in angular 6 ?
issue angular routing is not working
I want to put this into practice, now I could find this same code, so I need to type for example css
hi guy!! i like what you do a lot. please could you do videos and tutos on vuejs & firestore?!! i really need your take that area. thanks in advance
Would love to know when is the React video comming...
Hopefully next week!
waiting for blahblahblah.js version :)
For those using the Angular CLI, we have just updated the universal-starter so you can get started right away :)
Find it here: github.com/angular/universal-starter/tree/master/cli
I also made a PR and the CLI wiki will be updated so you can follow along with each step needed to get you up and running quickly. Find the PR here: github.com/angular/angular-cli/pull/7796/files
Hope that helps!
Thank you
this needs a repo, following was close to impossible at this break-neck speed ;-)
Waiting for Next.js
@9:49 I think he missed /dist-server
What do you mean?
Shoba Hasini I think instead of /index.html it should have been /dist-server/index.html
many settings to get little result
We need more convention-oriented programming
Hi david
Can you please post the link to the code
another vote for Polymer please
Vue and Nuxtjs please
waiting for React.
14:35
3:26
Does this guy have a non-Firebase channel?
With more outtakes?
Vue seems popular lately. Can we have a bite?
Waiting for ssr with react and preact.
Vue plz ;)
React!!!!!!!!!!!!!!
So much config...
Spent lots of time getting these finished last night, but they're both updated, hopefully it helps!
Universal-starter with the CLI: github.com/angular/universal-starter/tree/master/cli
Updated CLI wiki on Universal integration: github.com/angular/angular-cli/pull/7796/files
React pleaseeeee
I am not sure why people in google can make such type of videos as this guy is doing very fast changes and its useless to create videos like these with configuration setups. There should be auto initialization of this code with angular CLI. It just create complexity and negativity in my head.
vishal.. i love david east his style and personality.. please check out his other videos.. i am his fan..
Vue please