Angular Server Side Rendering - What to add to angular.json?

Question

I'm following Firebase's Tutorial for SSR with Angular. 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": {
            "outputPath": "dist/norebro",
            "index": "src/index.html",
            "main": "src/main.ts",
            ...

For Angular 8 you can see the instructions [here](https://angular.io/guide/universal) (btw, it's waaay simpler to setup SSR with Angular 8)... As for Angular 6, you can find the official documentation [here](https://v6.angular.io/guide/universal), you have everything you need to setup SSR there... — miselking, Oct 16 '19 at 15:03
@miselking Thanks, I'm using Angular 8. Do you happen to know any tutorial how to use Angular 8 SSR with Firebase? I'm pretty new to the topic. — Tom, Oct 16 '19 at 15:05
I know that you can't deploy an Angular Universal app to a static host (i.e. Firebase Hosting, AWS S3,...). But, you can use `Firebase Cloud Functions`. I added an answer with this approach although I didn't test it... Hopefully it will work.... — miselking, Oct 16 '19 at 15:46

miselking · Accepted Answer · 2019-10-18T09:23:25.560

To answer your question, since you are using Angular 8 you can run this command to make your project use SSR:

ng add @nguniversal/express-engine --clientProject norebro

After you run this command you should get everything setup properly by Angular for you. To check if everything is working first build your project:

npm run build:ssr

and then serve it (and check if everything is working correctly):

npm run serve:ssr

Specifically, the things that need to be modified inside angular.jsonare:

In "projects"->"norebro" (your_project_name)->"architect"->"build"->"options" section modify outputPath like this:

    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          "outputPath": "dist/browser",

Then in "architect" section, add a new server section like this:

    "server": {
      "builder": "@angular-devkit/build-angular:server",
      "options": {
        "outputPath": "dist/server",
        "main": "src/main.server.ts",
        "tsConfig": "src/tsconfig.server.json"
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "sourceMap": false,
          "optimization": {
            "scripts": false,
            "styles": true
          }
        }
      }
    }

As for publishing an Angular SSR application to Firebase please check this answer.

The key point is that we cannot deploy Angular SSR application using Firebase Hosting but we can do it by using Firebase Cloud Functions.

P.S: Initially, the answer was posted here but users may not find the answer to Firebase deployment here when querying (since the OP is not about deployment to Firebase). That's why I created a separate Q&A just to address that issue.

Hope this helps...

score 0 · Answer 2 · answered Oct 16 '19 at 15:03

Immediately under build(but not inside) you should add the configuration for your server application. It would look something like this:

"server": {
                "builder": "@angular-devkit/build-angular:server",
                "options": {
                    "outputPath": "dist/server",
                    "main": "src/main.server.ts",
                    "tsConfig": "src/tsconfig.server.json",
                    "stylePreprocessorOptions": {
                        "includePaths": [
                            "src/styles"
                        ]
                    }
                },
                "configurations": {
                    "production": {
                        "fileReplacements": [
                            {
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.prod.ts"
                            }
                        ],
                        "outputHashing": "media"
                    },
                    "dev": {
                        "fileReplacements": [
                            {
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.dev.ts"
                            }
                        ]
                    }
                }
            },

Note that this one has some irrelevant properties, such as stylePreprocessorOptions. Let's focus on those relevant, which are the builder, outputPath, main, and tsConfig. Those are the files that would potentially change between a Server Side Rendered application and a Client Side Rendered application.

https://github.com/angular/angularfire/blob/master/docs/deploy/getting-started.md — Jonathan, Apr 26 '20 at 04:37

keser · Answer 3 · 2019-10-16T15:21:27.143

0

I have also struggled with many tutorials while I was building a project with Angular Universal, the documentation of AngularFire2 was really straightforward.

edited Oct 16 '19 at 15:21

answered Oct 16 '19 at 15:07

keser

2,472
1
12
38

Angular Server Side Rendering - What to add to angular.json?

3 Answers3

Linked