Search code examples
angularserver-side-renderingangular-universal

Enabling source maps for Angular Universal server


I've just switched to using angular universal, for a previously angular project. However, as soon as the page was opened, I've encountered an issue:

ERROR ReferenceError: document is not defined
    at ButtonDirective.ngAfterViewInit (/home/punch/work/safet/my-project/dist/my-project/server/main.js:218658:24)
    at callHook (/home/punch/work/safet/my-project/dist/my-project/server/main.js:53701:22)
    at callHooks (/home/punch/work/safet/my-project/dist/my-project/server/main.js:53670:17)
    at executeInitAndCheckHooks (/home/punch/work/safet/my-project/dist/my-project/server/main.js:53621:9)
    at refreshView (/home/punch/work/safet/my-project/dist/my-project/server/main.js:60710:21)
    at refreshComponent (/home/punch/work/safet/my-project/dist/my-project/server/main.js:61810:13)
    at refreshChildComponents (/home/punch/work/safet/my-project/dist/my-project/server/main.js:60436:9)
    at refreshView (/home/punch/work/safet/my-project/dist/my-project/server/main.js:60689:13)
    at refreshEmbeddedViews (/home/punch/work/safet/my-project/dist/my-project/server/main.js:61764:17)
    at refreshView (/home/punch/work/safet/my-project/dist/my-project/server/main.js:60663:9)

Which surprised me, since I assumed It would show me a path to the component where the error came from. I'm using generated npm run dev:ssr (ng run my-project:serve-ssr) command and my angular.json contains:

"server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/my-project/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json",
            "inlineStyleLanguage": "scss"
          },
          "configurations": {
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "development": {
              "optimization": false,
              "sourceMap": true,
              "extractLicenses": false
            }
          },
          "defaultConfiguration": "development"
        },

Since sourceMap is set to true, I'd expect it to be shown the original path, is there a configuration I'm missing?


Solution

  • I just ran into this issue as well. It was solved for me by adding

    require('source-map-support').install();
    

    to the very top of my ssr server file.