ReferenceError: self is not defined, on trying to run dev:ssr after adding angular universal to an angular 11

Question

我有一个 Angular 主题，我曾用它来开发应用程序，现在我正尝试向它添加 Angular 通用主题。在使用 ng add @nguniversal/epxress-engine 添加 Angular 通用之后，我尝试运行 npm run dev:ssr，但它抛出了一个我无法理解的错误：

demo@demo:~/workrepos/my-angular-app$ npm run dev:ssr

> my-angular-app@11.0.0 dev:ssr /home/demo/workrepos/my-angular-app
> ng run matngular:serve-ssr

****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!
****************************************************************************************
✔ Server application bundle generation complete.

Initial Chunk Files                 | Names                            |      Size
main.js                             | main                             |  10.99 MB

                                    | Initial Total                    |  10.99 MB

Lazy Chunk Files                    | Names                            |      Size
modules-home-home-module.js         | modules-home-home-module         | 198.22 kB
vendors~firebase-auth.js            | vendors~firebase-auth            | 178.74 kB
modules-walkin-walkin-module.js     | modules-walkin-walkin-module     | 112.85 kB
vendors~modules-home-home-module.js | vendors~modules-home-home-module |  39.71 kB

Build at: 2021-07-01T05:06:53.638Z - Hash: 1ab3744b803c567f7b7d - Time: 37736ms
✔ Browser application bundle generation complete.
✔ Index html generation complete.

Initial Chunk Files             | Names                        |      Size
vendor.js                       | vendor                       |   7.43 MB
polyfills-es5.js                | polyfills-es5                | 770.23 kB
styles.css                      | styles                       | 553.38 kB
main.js                         | main                         | 412.27 kB
polyfills.js                    | polyfills                    | 352.14 kB
scripts.js                      | scripts                      |  12.25 kB
runtime.js                      | runtime                      |   9.13 kB

                                | Initial Total                |   9.49 MB

Lazy Chunk Files                | Names                        |      Size
firebase-auth.js                | firebase-auth                | 255.76 kB
modules-home-home-module.js     | modules-home-home-module     | 243.39 kB
modules-walkin-walkin-module.js | modules-walkin-walkin-module | 111.50 kB
common.js                       | common                       |   3.93 kB

Build at: 2021-07-01T05:07:05.749Z - Hash: e086cd8ba01bfdf5d1a4 - Time: 44578ms

Compiled successfully.
/home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:134
    logger: self.console,
            ^

ReferenceError: self is not defined
    at /home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:134:13
    at /home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:130:11
    at Object.+WhS (/home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:131:3)
    at __webpack_require__ (/home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:26:30)
    at Module.HZ+G (/home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:117175:76)
    at __webpack_require__ (/home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:26:30)
    at Module.ZAI4 (/home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:171618:72)
    at __webpack_require__ (/home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:26:30)
    at Module.24aS (/home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:43843:69)
    at __webpack_require__ (/home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:26:30)

A server error has occurred.
node exited with 1 code.
connect ECONNREFUSED 127.0.0.1:46469
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-angular-app@11.0.0 dev:ssr: `ng run matngular:serve-ssr`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the my-angular-app@11.0.0 dev:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/demo/.npm/_logs/2021-07-01T05_07_11_669Z-debug.log

几天来我一直在互联网上寻找任何解决方案，但在任何地方都找不到与此类似的任何解决方案。

有趣的是，当我尝试将 angular 通用添加到从 cli 创建的全新 angular 应用程序时，它可以正常工作..

这是我的 angular 主题应用程序中的 angular.json 服务器部分：

 "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/matngular/server",
            "main": "server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "sourceMap": false,
              "optimization": true
            }
          }
        },
        "serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server",
          "options": {
            "browserTarget": "matngular:build",
            "serverTarget": "matngular:server"
          },
          "configurations": {
            "production": {
              "browserTarget": "matngular:build:production",
              "serverTarget": "matngular:server:production"
            }
          }
        },
        "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "browserTarget": "matngular:build:production",
            "serverTarget": "matngular:server:production",
            "routes": [
              "/"
            ]
          },
          "configurations": {
            "production": {}
          }
        }

我的tsconfig.server.json:

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "outDir": "../out-tsc/server",
    "target": "es2016",
    "types": [
      "node"
    ]
  },
  "files": [
    "main.server.ts",
    "../server.ts"
  ],
  "angularCompilerOptions": {
    "entryModule": "./app/app.server.module#AppServerModule"
  }
}

我可以提供任何其他需要的细节，只是不想用不必要的细节来延长问题。我将非常感谢解决此问题的任何指导。

请查找 main.js 文件以供参考： main.js

Answer 1

您可能知道，self 是一个 window 引用，不能在 SSR 中使用。您的依赖项之一正在使用它。通过在您的 main.js 中搜索“记录器：self.console”，您可以看到该代码源自

./node_modules/@rails/actioncable/app/assets/javascripts/action_cable.js

尝试升级该依赖项以查看它是否得到解决。或者您可以尝试使用 isPlatformServer 来避免在服务器上呈现有问题的组件。

ReferenceError: self is not defined, on trying to run dev:ssr after adding angular universal to an angular 11

ReferenceError: self is not defined, on trying to run dev:ssr after adding angular universal to an angular 11

server-side-rendering

angular-universal

angular

angular11