"this.debug is not a function" on running >>npm run dev:ssr

[rahulexpo]

I have updated an angular project from angular 11 to angular 14 and then implemented angular universal in it. After fixing quite a few bugs I have encountered these couple of errors "this.debug is not a function", window is not defined and "btoa is not defined" which I am unable to fix.

Here's my package.json

{
  "name": "buyer-new",
  "version": "0.0.0",
  "scripts": {
    "build:client": "ng build --configuration production --extract-css --base-href=xxx/ --deploy-url=./  --configuration=client",
    "build:prod": "ng build --configuration production   --base-href=xxx --deploy-url=./   --configuration=production",
    "build:test": "ng build  --configuration production  --base-href=xxx --configuration=dev",
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "dev:ssr": "ng run Buyer-new:serve-ssr",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "serve:ssr": "node dist/Buyer-new/server/main.js",
    "build:ssr": "ng build && ng run Buyer-new:server",
    "prerender": "ng run Buyer-new:prerender"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.2.12",
    "@angular/common": "^14.2.12",
    "@angular/compiler": "^14.2.12",
    "@angular/core": "^14.2.12",
    "@angular/forms": "^14.2.12",
    "@angular/platform-browser": "^14.2.12",
    "@angular/platform-browser-dynamic": "^14.2.12",
    "@angular/platform-server": "^14.2.12",
    "@angular/router": "^14.2.12",
    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
    "@nguniversal/express-engine": "^14.2.0",
    "angular-oauth2-oidc": "^10.0.3",
    "angular-password-strength-meter": "^3.0.1",
    "btoa": "^1.2.1",
    "express": "^4.15.2",
    "feather-icons": "^4.28.0",
    "html2canvas": "^1.3.3",
    "intl-tel-input": "^17.0.15",
    "jspdf": "^2.5.0",
    "ng-connection-service": "^1.0.4",
    "ng-otp-input": "^1.8.1",
    "ng2-search-filter": "^0.5.1",
    "ng2-tel-input": "^2.3.0",
    "ngx-lightbox": "^2.5.2",
    "ngx-pagination": "^5.1.1",
    "ngx-skeleton-loader": "^4.0.0",
    "ngx-slick-carousel": "^0.5.1",
    "ngx-toastr": "^11.2.0",
    "ngx-tree-select": "^0.15.0",
    "ngx-treeview": "^10.0.2",
    "rxjs": "~6.6.0",
    "slick-carousel": "^1.8.1",
    "sweetalert2": "^11.3.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4",
    "zxcvbn3": "^0.1.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.10",
    "@angular/cli": "^14.2.10",
    "@angular/compiler-cli": "^14.2.12",
    "@nguniversal/builders": "^14.2.0",
    "@types/express": "^4.17.0",
    "@types/feather-icons": "^4.7.0",
    "@types/file-saver": "^2.0.4",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.20.55",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.6.4"
  }
} 

and angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "cli": {
    "analytics": false
  },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Buyer-new": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        },
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/Buyer-new/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss",
              "node_modules/ngx-toastr/toastr.css",
              "src/assets/css/vendor/bootstrap.min.css",
              "src/assets/app-assets/vendors/css/vendors.min.css",
              "src/assets/app-assets/vendors/css/forms/wizard/bs-stepper.min.css",
              "src/assets/app-assets/vendors/css/forms/select/select2.min.css",
              "src/assets/app-assets/css/plugins/forms/form-wizard.css",
              "src/assets/app-assets/css/plugins/forms/form-validation.css",
              "src/assets/app-assets/css/pages/authentication.css",
              "src/assets/css/vendor/helper.css",
              "src/assets/css/plugins/plugins.css",
              "src/assets/css/pretty.css",
              "src/assets/css/switch.css",
              "src/assets/css/vendor/iconfont.min.css",
              "node_modules/slick-carousel/slick/slick.scss",
              "node_modules/slick-carousel/slick/slick-theme.scss",
              "node_modules/intl-tel-input/build/css/intlTelInput.css",
              "node_modules/ngx-lightbox/lightbox.css",
              "src/assets/css/style.css"
            ],
            "scripts": [
              "src/assets/js/vendor/modernizr-2.8.3.min.js",
              "src/assets/js/vendor/jquery-1.12.4.min.js",
              "src/assets/js/vendor/popper.min.js",
              "src/assets/app-assets/vendors/js/vendors.min.js",
              "src/assets/app-assets/vendors/js/forms/wizard/bs-stepper.min.js",
              "src/assets/app-assets/vendors/js/forms/validation/jquery.validate.min.js",
              "src/assets/app-assets/js/core/app-menu.js",
              "src/assets/app-assets/js/core/app.js",
              "src/assets/app-assets/js/scripts/pages/auth-register.js",
              "src/assets/js/vendor/bootstrap.min.js",
              "src/assets/js/plugins/plugins.js",
              "node_modules/slick-carousel/slick/slick.min.js",
              "node_modules/intl-tel-input/build/js/intlTelInput.min.js",
              "src/assets/js/main.js"
            ],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "4mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "4mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "client": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/client.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          },
          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "Buyer-new:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "Buyer-new:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "Buyer-new:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "Buyer-new:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "Buyer-new:serve:production"
            }
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/Buyer-new/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json",
            "optimization": false,
            "sourceMap": true,
            "extractLicenses": false
          },
          "configurations": {
            "production": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "sourceMap": false,
              "extractLicenses": true
            },
            "client": {
              "outputHashing": "media",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/client.ts"
                }
              ],
              "optimization": true,
              "sourceMap": false,
              "extractLicenses": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve-ssr": {
          "builder": "@nguniversal/builders:ssr-dev-server",
          "options": {
            "browserTarget": "Buyer-new:build",
            "serverTarget": "Buyer-new:server"
          },
          "configurations": {
            "development": {
              "browserTarget": "Buyer-new:build",
              "serverTarget": "Buyer-new:server"
            },
            "production": {
              "browserTarget": "Buyer-new:build:production",
              "serverTarget": "Buyer-new:server:production"
            }
          },
          "defaultConfiguration": "development"
        },
        "prerender": {
          "builder": "@nguniversal/builders:prerender",
          "options": {
            "routes": [
              "/"
            ]
          },
          "configurations": {
            "production": {
              "browserTarget": "Buyer-new:build:production",
              "serverTarget": "Buyer-new:server:production"
            },
            "development": {
              "browserTarget": "Buyer-new:build:development",
              "serverTarget": "Buyer-new:server:development"
            }
          },
          "defaultConfiguration": "production"
        }
      }
    }
  }
}

[alan-agius4]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[rahulexpo]

It's a production code and a private project? Is there a way so that only you are able to see that code?

[alan-agius4]

You can try to share the access with me using my email address. Although, unless it's a very small application it's unlikely that I can debug the code.

Ideally the issue is reproduced in a simple reproduction.

[rahulexpo]

Okay. Let me reduce it to the minimum possible code and I will share it with you then.

[alan-agius4]

Closing as no reproduction was provided.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}