Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Disable SSR while serving application locally in Angular 17

I’m using Nx with Angular. I’ve run the @nx/application - setup-ssr generator which created all the necessary files for SSR. Before it used to add separate executors for serving an application with SSR such as serve-ssr, but no new executors were added to project.json as seen here:

{
  "name": "public",
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "projectType": "application",
  "prefix": "app",
  "sourceRoot": "apps/public/src",
  "tags": [],
  "targets": {
    "build": {
      "executor": "@angular-devkit/build-angular:application",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/apps/public",
        "index": "apps/public/src/index.html",
        "browser": "apps/public/src/main.ts",
        "polyfills": ["zone.js"],
        "tsConfig": "apps/public/tsconfig.app.json",
        "assets": [
          {
            "glob": "**/*",
            "input": "assets",
            "output": "assets"
          },
          "apps/public/src/favicon.ico",
          "apps/public/src/assets"
        ],
        "styles": ["apps/public/src/styles.scss"],
        "stylePreprocessorOptions": {
          "includePaths": ["styles", "libs/stylekit/src/lib"]
        },
        "scripts": [],
        "server": "apps/public/src/main.server.ts",
        "prerender": true,
        "ssr": {
          "entry": "apps/public/server.ts"
        }
      },
      "configurations": {
        "production": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "500kb",
              "maximumError": "1mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            }
          ],
          "outputHashing": "all"
        },
        "development": {
          "optimization": false,
          "extractLicenses": false,
          "sourceMap": true,
          "namedChunks": true
        }
      },
      "defaultConfiguration": "production"
    },
    "serve": {
      "executor": "@angular-devkit/build-angular:dev-server",
      "configurations": {
        "production": {
          "buildTarget": "public:build:production"
        },
        "development": {
          "buildTarget": "public:build:development"
        }
      },
      "defaultConfiguration": "development"
    },
    "extract-i18n": {
      "executor": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "buildTarget": "public:build"
      }
    },
    "lint": {
      "executor": "@nx/eslint:lint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": ["apps/public/**/*.ts", "apps/public/**/*.html"]
      }
    },
    "test": {
      "executor": "@nx/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
      "options": {
        "jestConfig": "apps/public/jest.config.ts"
      }
    },
    "serve-static": {
      "executor": "@nx/web:file-server",
      "options": {
        "buildTarget": "public:build"
      }
    }
  }
}

Which means that SSR is enabled by default whenever you serve the app now since v17, which is horrendous because for every change you make now the app takes 10+ seconds to reload despite using Vite for the development server.

I’ve been reading through the new (and old) SSR docs as well as trying to find Github issues mentioning this but it says nothing about disabling or enabling SSR while serving the app, or allowing you to serve the app using a separate executor.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

I’m really confused regarding this as it feels like a huge step backwards. How do I disable SSR in development?

>Solution :

SSR is enabled whenever "ssr" or "prerender" are truthy your config.

The solution for you would be to set it to false in the development configuration :

        "development": {
          "optimization": false,
          "extractLicenses": false,
          "sourceMap": true,
          "ssr": false, // here
          "prerender": false // and here
        }
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading