Ends in:
3 DAYS
6 HRS
18 MIN
57 SEC
Ends in:
3 D
6 H
18 M
57 S
Open Closed

Undefined 'onDestroy' Error on Page Refresh with Custom Component #6394


User avatar
0
dev@veek.vn created

Hello ABP Team,

Hope you're doing well! I've been working on integrating a custom component in the Settings tab of our Administration menu and it's been an exciting journey so far. However, I've hit a bit of a snag and could really use your expertise.

Here's the scoop: When I navigate through our app the usual way (starting from Home, then to Settings, and finally landing on My config page), everything runs like a charm – the component behaves just as expected. But, if I refresh the page and hop back onto My config page, I'm greeted by a pesky error that goes like this: I added my component in this way:

Thank you in advance for your assistance and I look forward to your response.

Best regards, Veek

ABP Framework version: v.7.3.2 UI Type: Angular Database System: MongoDB Tiered (for MVC) or Auth Server Separated (for Angular): yes Exception message and full stack trace: Steps to reproduce the issue:


3 Answer(s)
  • User Avatar
    0
    sinan created
    Support Team Angular Developer

    Hi, i have tried to reproduce your problem in a new project but i failed.

    Can you send me your package.json file and reproduce steps?

  • User Avatar
    0
    dev@veek.vn created
    {
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "cli": {
        "analytics": false,
        "schematicCollections": ["@angular-eslint/schematics"]
      },
      "version": 1,
      "newProjectRoot": "projects",
      "projects": {
        "BackOffice": {
          "projectType": "application",
          "schematics": {
            "@schematics/angular:component": {
              "style": "scss"
            }
          },
          "root": "",
          "sourceRoot": "src",
          "prefix": "app",
          "architect": {
            "build": {
              "builder": "@angular-devkit/build-angular:browser",
              "options": {
                "outputPath": "dist/BackOffice",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "tsconfig.app.json",
                "inlineStyleLanguage": "scss",
                "allowedCommonJsDependencies": [
                  "@ant-design/colors",
                  "chart.js",
                  "js-sha256",
                  "@uppy/xhr-upload",
                  "@uppy/dashboard",
                  "@uppy/core",
                  "qrcode",
                  "leaflet",
                  "leaflet-ant-path"
                ],
                "assets": ["src/favicon.ico", "src/assets"],
                "styles": [
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/dark.css",
                    "inject": false,
                    "bundleName": "dark"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/light.css",
                    "inject": false,
                    "bundleName": "light"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/dim.css",
                    "inject": false,
                    "bundleName": "dim"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dim.css",
                    "inject": false,
                    "bundleName": "bootstrap-dim"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dark.css",
                    "inject": false,
                    "bundleName": "bootstrap-dark"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-light.css",
                    "inject": false,
                    "bundleName": "bootstrap-light"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/ng-bundle.css",
                    "inject": false,
                    "bundleName": "ng-bundle"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.css",
                    "inject": false,
                    "bundleName": "layout-bundle"
                  },
                  {
                    "input": "node_modules/@volosoft/abp.ng.theme.lepton-x/assets/css/abp-bundle.css",
                    "inject": false,
                    "bundleName": "abp-bundle"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/dark.rtl.css",
                    "inject": false,
                    "bundleName": "dark.rtl"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/light.rtl.css",
                    "inject": false,
                    "bundleName": "light.rtl"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/dim.rtl.css",
                    "inject": false,
                    "bundleName": "dim.rtl"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dim.rtl.css",
                    "inject": false,
                    "bundleName": "bootstrap-dim.rtl"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dark.rtl.css",
                    "inject": false,
                    "bundleName": "bootstrap-dark.rtl"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-light.rtl.css",
                    "inject": false,
                    "bundleName": "bootstrap-light.rtl"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/font-bundle.css",
                    "inject": false,
                    "bundleName": "font-bundle"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/font-bundle.rtl.css",
                    "inject": false,
                    "bundleName": "font-bundle.rtl"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/ng-bundle.rtl.css",
                    "inject": false,
                    "bundleName": "ng-bundle.rtl"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.rtl.css",
                    "inject": false,
                    "bundleName": "layout-bundle.rtl"
                  },
                  {
                    "input": "node_modules/@volosoft/abp.ng.theme.lepton-x/assets/css/abp-bundle.rtl.css",
                    "inject": false,
                    "bundleName": "abp-bundle.rtl"
                  },
                  {
                    "input": "node_modules/@swimlane/ngx-datatable/index.css",
                    "inject": true,
                    "bundleName": "ngx-datatable-index"
                  },
                  {
                    "input": "node_modules/@swimlane/ngx-datatable/assets/icons.css",
                    "inject": true,
                    "bundleName": "ngx-datatable-icons"
                  },
                  {
                    "input": "node_modules/@swimlane/ngx-datatable/themes/material.css",
                    "inject": true,
                    "bundleName": "ngx-datatable-material"
                  },
                  {
                    "input": "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
                    "inject": true,
                    "bundleName": "fontawesome-all.min"
                  },
                  {
                    "input": "node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css",
                    "inject": true,
                    "bundleName": "fontawesome-v4-shims.min"
                  },
                  {
                    "input": "node_modules/ng-zorro-antd/tree/style/index.min.css",
                    "inject": false,
                    "bundleName": "ng-zorro-antd-tree"
                  },
                  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
                  "src/styles.scss",
                  "node_modules/leaflet/dist/leaflet.css"
                ],
                "scripts": []
              },
              "configurations": {
                "production": {
                  "sourceMap": false,
                  "optimization": false,
                  "namedChunks": true,
                  "aot": false,
                  "extractLicenses": false,
                  "vendorChunk": true,
                  "buildOptimizer": false,
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.prod.ts"
                    }
                  ],
                  "outputHashing": "all"
                },
                "dev": {
                  "sourceMap": false,
                  "optimization": false,
                  "namedChunks": true,
                  "aot": false,
                  "extractLicenses": false,
                  "vendorChunk": true,
                  "buildOptimizer": false,
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.dev.ts"
                    }
                  ],
                  "outputHashing": "all"
                },
                "development": {
                  "buildOptimizer": false,
                  "optimization": false,
                  "vendorChunk": true,
                  "extractLicenses": false,
                  "sourceMap": true,
                  "namedChunks": true
                }
              },
              "defaultConfiguration": "production"
            },
            "serve": {
              "builder": "@angular-devkit/build-angular:dev-server",
              "configurations": {
                "production": {
                  "browserTarget": "BackOffice:build:production"
                },
                "development": {
                  "browserTarget": "BackOffice:build:development"
                }
              },
              "defaultConfiguration": "development"
            },
            "extract-i18n": {
              "builder": "@angular-devkit/build-angular:extract-i18n",
              "options": {
                "browserTarget": "BackOffice: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",
                "inlineStyleLanguage": "scss",
                "assets": ["src/favicon.ico", "src/assets"],
                "styles": ["src/styles.scss"],
                "scripts": []
              }
            },
            "lint": {
              "builder": "@angular-eslint/builder:lint",
              "options": {
                "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
              }
            }
          }
        }
      }
    }
    
    

    Steps:

    1. Open the application and log in.
    2. Navigate to the Administrator/Settings page.
    3. Open the custom page.
    4. Refresh the custom page and observe the error message or issue.
  • User Avatar
    0
    dev@veek.vn created

    hi sinan, I think I have fixed the issue mentioned above. I had to add standalone = true to the custom component.

Made with ❤️ on ABP v9.1.0-preview. Updated on December 02, 2024, 12:35