Angular Universal and Firebase Hosting (Server-side Rendering with JavaScript Frameworks)
Articles,  Blog

Angular Universal and Firebase Hosting (Server-side Rendering with JavaScript Frameworks)

88 Comments

  • Val Allen Samonte

    Also, I would love to see the Firebase SDK to have offline first support for PWAs (offline like caching the fetched data from firebase)

  • David East

    Hey everyone! If you to learn more about profiling Angular Universal performance I wrote an article here: https://davidea.st/articles/measuring-server-side-rendering-performance-is-tricky

  • Tsortanidis Christos

    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

  • tntg5

    It's incredible how complex it is to make Node generate your HTML. In this example, there are no Dom manipulations.
    As soon as you add libraries such as Angular Material, NgPrime, or NgBootstrap, things start to go out of controle.
    It's amazing to see that Google is pushing a technology (Angular) that is by design incompatible with how SEO works.
    Come on google, I am sure you can make SSR as easy as :
    ng build –ssr –prod 🙂
    Without the hassles of configuring it

  • Mark Pieszak

    For those using the Angular CLI, we have just updated the universal-starter so you can get started right away 🙂
    Find it here: https://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: https://github.com/angular/angular-cli/pull/7796/files

    Hope that helps!

  • Nayan Hathiwala

    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.

  • cutiko

    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 🙂

  • Michael Krzenski

    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. 🙂

  • Martin Nuc

    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".

  • Alberto Ardito

    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!!

  • Федор Усаков

    @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

  • Danilo Morales

    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.

  • Leonid Ramirez Ochante

    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.
    https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced

  • Matt Carbone

    David, many thanks for the video. I got your example to work. It would be nice if there was a script we could put into our package.js to help with some of the steps. For example, in one of the step you dragged the index.html file from dist to dist-server was very quick. It was hard to see the drag in the video. I had to play the video back and it was still not so easy. Maybe instruction slide would assist. It would be great to have a future video series example developed with Angular 5 with Angular CLI ^1.6. for PWA, service worker and push notification incorporating Angular Universal. Thanks again.

  • Crewnie Master

    It is amazing to be able to compile your applications made in angular on the server.
    I am very excited because this keeps growing.

  • Pierre Chavaroche

    Does AngularFire2 with Firestore supports Angular Universal? That would be very important for us to know.
    Thank you for the great video!

  • Ridhwan Zaidi

    Hello, I have an error on server/index.ts.. It stated that cannot find module 'firebase-functions', can somebody help me with it?

  • TCHOUTANG BANKOUE MICHEL FRANKLIN

    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

  • Stanley Eosakul

    I was trying to code along to this video, but he's so fast! I couldn't get his code to work correctly so I took bits and pieces from this video and other sources and got it to work using Angular 5 and Angular CLI v1.7 which has native Angular Universal support! Github repo here: https://github.com/stanleyeosakul/angular-universal-firebase, and I included a step-by-step guide.

  • Martí Crespí

    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!

  • polypus74

    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.

  • Jitendra Kumar

    How to deploy Angular 6 + universal on firebase? Can you please explain step by step or provide any helpful link?

  • Camilo Elgueta Basso

    it still works with Angular 6 🤔 or there is a new way of doing SSR with angular 6 + firebase hosting?

  • Alexon da Silva Moreira

    I want to put this into practice, now I could find this same code, so I need to type for example css

  • David Heisner

    does this require an actual external server that firebase doesn't offer? I followed everything exactly, but the page source was still hidden behind the javascript, also is this still the current solution to getting angular to be read by google bot? I'm just getting into making my sites SEO friendly and learning about all this

  • Abhijeet Bharti

    hello
    I am trying to connect to connect custom domain with firebase web hosting but it always shows "needs setup".
    Please help me

  • Federico Moreno Rodríguez Chalbaud

    #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?

  • Ingeniero en Computación Alejandro Javier Villalón Navarro

    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.

  • Vishal Garg

    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.

  • kartik watwani

    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 https://angular.io/guide/universal. Can you expalain on how to do it now ?

  • himani bhardwaj

    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

  • Lạng Hoàng

    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: https://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!?

  • Michael Tangen

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *