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

What people said

Recommends ejb503 · 2017-12 · Stack Overflow · on “How to deploy angular 4 universal app to firebase”

There is a youtube video from Google on this subject here: [this video] Basically, as far as I can tell at the moment there is no way of linking your functions folder with your 'dist' folder, so what we have to do is overwrite the firebase.json settings to serve your app as a function. This basically means that your function (expressJS code) is serving the app rather than the static files in dist/ After following the youtube video your firebase.json should be as follows: { "hosting": { "public": "dist", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "function": "ssrapp" } ] }, "functions": { "predeploy": "npm --prefix functions run build", "source":

Recommends Abkarino · 2021-01 · Stack Overflow · on “How to deploy new firebase functions from an angular project”

@RobMonhemius [this video] this url shows how to start the project, you probably did the same. I didn't share this url since you already have your project initialized, but maybe you want to take a look at that video.

Cites Karty · 2017-10 · Stack Overflow · on “how to configure Server side rendering for lazy loaded routes using angular universal and firebase hosting?”

I followed the tutorial [this video] of david east to make an angular universal app and deploy it on firebase hosting. I tried this and it worked with normal routes but with lazy loaded routing it did not work. here is the screen shot of the view page source, view page source [LINK] why this is not working when routing? Can someone tell me how to configure Server side rendering for lazy loading or share any links about it?

Cites Michele Da Rin · 2017-11 · Stack Overflow · on “Angular universal with firebase functions doesn't work”

I followed the instructions from this video [this video] and I implemented the code in my project: import * as angularUniversal from 'angular-universal-express-firebase'; let ssrapp = angularUniversal.trigger({ index: __dirname + '/index.html', main: __dirname + '/main.bundle', enableProdMode: true, cdnCacheExpiry: 2400, browserCacheExpiry: 1200 }); but the source code of my webpage is this: [LINK] Any idea why it doesn't work?

Cites Stan · 2017-12 · Stack Overflow · on “Angular Universal and firebase”

I tried to follow David East's Guide [this video] as well but was unsuccessful at a successful deploy. I found an alternate way to successfully deploy an Angular 5 Universal app to Firebase, and I explain how I did it step-by-step in my github repo: [LINK] . The bottom line is using Cloud Functions is rather clunky. On the plus side, Angular CLI v1.6 now has native Universal support so you can just generate most of the files with ng generate universal universal with minimal editing. The Firebase side, sadly, is much more complex.

Cites ejb503 · 2017-12 · Stack Overflow · on “Angular Universal - Server rendered app not functioning as expected”

I've followed several workthroughs [this video] on deploying Angular Universal and am currently doing so on firebase. I've successfully got the server rendering the app, BUT for some reason the app isn't bootstrapping from the server code. What I mean to say, is that when I load the app rendered by the server, the actual app itself doesn't function correctly. I'm not sure if this is because of incompatibility for example with Angular Material [LINK] or if I've made some errors in the configuration. For example, if I load up my homepage via the normal compiled app and navigate to a form, I see the 'expected' form. However, if I load same page via the server rendering then I see the rendered form b

Cites Fred · 2018-02 · Stack Overflow · on “How to deploy Angular Universal Rendering in Firebase?”

I am working on Angular 5 implementing Angular Universal Rendering while in production Angular Universal working on the local machine that I can easily deploy and run. Just following this instruction link it will work just on the local machine [LINK] . But when I started deploying the Angular Universal in Firebase it's not working unexpectedly. I followed this linked but there is less information. Please I need some help how to deploy Angular Universal Rendering in Firebase. Appreciate your help Guys! Thank You! How to deploy angular 4 universal app to firebase [LINK] [this video] file structure like this: src/app/app.module.ts: import { BrowserModule } from '@angular/platform-browser'; import {

Cites Relm · 2018-03 · Stack Overflow · on “Typescript : How to resolve 'rxjs/Rx has no exported member 'SubscriptionLike'”

I'm trying to follow this example here [this video] , but when doing tsc -p , I get an error. Is there something I need to import? ERROR: node_modules/@angular/common/src/location/location.d.ts(1,10): error TS2305: Module '"...functions/node_modules/rxjs/Rx"' has no exported member 'SubscriptionLike'. TS FILE import "zone.js/dist/zone-node"; import * as functions from "firebase-functions"; import * as express from "express" import { renderModuleFactory } from "@angular/platform-server" import * as fs from "fs" const document = fs.readFileSync(__dirname + "/dist-server/index.html", "utf8"); const AppServerModuleNgFactory = require(__dirname + "/dist-server/main.bundle"); const app = express(); app

Cites Phil · 2018-05 · Stack Overflow · on “angular6: add universal support with cli”

Well you have to host the SSR-app somewhere. You can setup an own node/express-server for this or use a hoster like firebase: [this video]

Cites Tom · 2019-10 · Stack Overflow · on “Angular Server Side Rendering - What to add to angular.json?”

I'm following Firebase's Tutorial for SSR with Angular [this video] . Unfortunately the Tutorial is outdated, since as for Angular 6 angular-cli.json was replaced with angular.json . How do I translate the step, you can find by using the link, to the angular.json file? For comparison, here's what my file looks like: { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "norebro": { "root": "", "sourceRoot": "src", "projectType": "application", "prefix": "app", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outpu