Angular router + Nativescript VSCode debug crashes when using "All Exceptions"

[samliaw]

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI:
• Cross-platform modules:
• Android Runtime:
• iOS Runtime:
• Plugin(s):

The content of the package.

{
  "nativescript": {
    "id": "org.nativescript.mydrawerng",
    "tns-android": {
      "version": "6.1.2"
    },
    "tns-ios": {
      "version": "6.1.0"
    }
  },
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "scripts": {
    "lint": "tslint \"src/**/*.ts\""
  },
  "dependencies": {
    "@angular/animations": "~8.2.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "nativescript-angular": "~8.2.0",
    "nativescript-theme-core": "~1.0.6",
    "nativescript-ui-sidedrawer": "~7.0.0",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.4.0",
    "tns-core-modules": "~6.1.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~8.2.0",
    "@ngtools/webpack": "~8.2.0",
    "codelyzer": "~4.5.0",
    "nativescript-dev-webpack": "~1.2.0",
    "node-sass": "^4.7.1",
    "tslint": "~5.19.0",
    "typescript": "~3.5.3"
  },
  "gitHead": "1964ea9e8ca1a0518e0d6370781eedcf6c23db42",
  "readme": "NativeScript Application"
}

Describe the bug

This is a runtime error. Click on the menu and go to Browse page. I run this in Visual Studio Code and enable All Exception and Uncaught Exception. Below is the issue

  Recognizer.prototype.processSegmentAgainstRoute = function (route, rawSegment, segments, outlet) {
        if (route.redirectTo)
            throw new NoMatch$1();   --> This is throw
        if ((route.outlet || PRIMARY_OUTLET) !== outlet)
            throw new 

To Reproduce

Please run the following commands tns create my-drawer-ng --template tns-template-drawer-navigation-ng cd my-drawer-ng npm i tns platform add android In Visual Studio Code, click on Lanuch on Android or Lanuch on IOS Click on the menu, click on Browse, you will see the exception as shown above.

Expected behavior It should be able to navigate to Browse page successfully.

Sample project

Additional context

[NickIliev]

@samliaw I've followed the described steps but I am unable to reproduce the issue (nor via VSCode debug neither via deploy & run). Can you please let us know if the issue is happening only on a specific API level (what is the device/emulator used during the tests)?

[samliaw]

I try both the both API 23 and 28 and I have the same issue. When I run in Visual Studio code, I see the exception. If I run in IOS, I can see the exception in both Visual Studio Code and in terminal.

[NickIliev]

@samliaw you are using "All Exception" check and the code stops at the first exception which is an Angular NoMatch.. still, the debug is working and you could continue to execute the code. The exception won't crash the app/

[samliaw]

@NickIliev , you are right. It still works even it has exceptions.

However, the exception cause my project to crash in IOS. I have the same exception in Android but it works fine. Can I send you my whole project so you can see the crashing in IOS?

[samliaw]

The issue has been resolved. In case someone has encounter the same issue, you have ideas how to solve it.

I am running Nativescript Angular. In my login html page, I include for formatting purpose. When any page navigates to this login page, it will have discardUncaughtJsExceptions. So, I remove the and try it again. It works perfectly.

I will close it for now.

@NickIliev , thanks for your help.