CODEWITHSUNDEEP
angularconfigurationangularfire2server-side-rendering
ChrisEenberg
ChrisEenberg

Reputation: 783

How to implement SSR with Angular 6 and AngularFire2

I'm following this tutorial to setup SSR with AngularFire2. This guide is, however, "only compliant with Angular 5" it seems - SSR with angularfire2

My problem is: when I get to the step where I need to setup angular-cli.json (now known as angular.json in Angular 6) the structure is completely rewritten. Is there any way to add multiple build targets, as the tutorial suggests?

I've tried adding an array entry for the architect build section (kind of like the "old" way of adding an array of apps in angular-cli.json), but without luck - I get, "object expected here" - it looks something like this:

    "build": [{
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/browser",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.scss",
          "src/assets/foundation-icons/foundation-icons.css"
        ],
        "scripts": []
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true
        }
      }, ... // new build target here ]

Is there a way to achieve the same result with the new json structure of angular 6, here I'm only talking about setting up the config information for angular.json?

I can provide more information if need be.

Kind regards Chris.

Upvotes: 2

Views: 1432

Answers (1)

kekdahl
kekdahl

Reputation: 123

Under the architect configuration, you can add the configuration for the server-side app, similar to how you configured the app in the .angular-cli.json.

architect: {
...
"server": {
      "builder": "@angular-devkit/build-angular:server",
      "options": {
        "outputPath": "dist-server",
        "main": "src/main.server.ts",
        "tsConfig": "src/tsconfig.server.json"
      }
    }
}

Notice that this is not under the build property. Then to build this code to the dist-server, you can run 

ng run myProject:server

This was the default configuration provided by running ng upgrade after installing the new CLI, but figuring out the ng run command was a lot of trial and error. :)

Upvotes: 4

Related Questions