Friday 10 January 2020

How to debug/step-into npm package with Typescript source code?

Okta (Angular NPM dependency) is not behaving/returning the values that I'm expecting. I would like to step into its source code as I'm debugging my application so I can understand what's happening and fix the issue. How do I do this in my Angular 6 app?

I'm using ng serve --source-map --vendor-source-map (as shown here) to bootup Angular but that doesn't work. When I try to debug into a method called isAuthenticated() defined in OktaAuthService class, Chrome's debugger shows this error:

Could not load content for webpack:///../../../../src/okta/services/okta.service.ts : HTTP status code: 404

I couldn't find this file in Okta's npm package but I did find its type definition file, okta.service.d.ts. Does this mean Okta's NPN package doesn't include the TS source code along with its transpiled JS code? Is there an npm/Angular option that will allow me to download the Okta package along with its source code for debugging purposes?

What versions am I using?

When I run ng --version, I get the following:

@ngtools/webpack                  6.1.5
@schematics/angular               0.7.5
@schematics/update                0.7.5
rxjs                              6.4.0
typescript                        2.9.2
webpack                           4.9.2

This is what's in my package.json file

"dependencies": {
        "@angular/animations": "^6.1.6",
        "@angular/cdk": "^6.4.7",
        "@angular/common": "^6.1.6",
        "@angular/compiler": "^6.1.6",
        "@angular/core": "^6.1.6",
        "@angular/forms": "^6.1.6",
        "@angular/http": "^6.1.6",
        "@angular/material": "^6.4.7",
        "@angular/platform-browser": "^6.1.6",
        "@angular/platform-browser-dynamic": "^6.1.6",
        "@angular/platform-server": "^6.1.6",
        "@angular/router": "^6.1.6",
        "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
        "@okta/okta-angular": "^1.3.0",
        "@primer/octicons": "^9.1.1",
        "@types/dom-inputevent": "^1.0.4",
        "@types/jquery": "^3.3.29",
        "aspnet-prerendering": "^3.0.1",
        "bootstrap": "^4.3.1",
        "class-validator": "^0.9.1",
        "classlist.js": "^1.1.20150312",
        "core-js": "^2.4.1",
        "hammerjs": "^2.0.8",
        "jquery": "^3.4.1",
        "lodash": "^4.17.10",
        "masonry-layout": "^4.2.2",
        "ngx-dropzone-wrapper": "^7.1.0",
        "ngx-quill": "^7.2.0",
        "popper": "^1.0.1",
        "quill": "^1.3.6",
        "rxjs": "^6.4.0",
        "rxjs-compat": "^6.0.0-rc.0",
        "stackedit-js": "^1.0.7",
        "typescript-string-operations": "^1.3.1",
        "web-animations-js": "^2.3.1",
        "zone.js": "^0.8.26"
    }


from How to debug/step-into npm package with Typescript source code?

No comments:

Post a Comment