如何使用 Typescript 源代码调试/步入 npm 包？

Question

Okta（Angular NPM 依赖项）没有表现/返回我期望的值。我想在调试我的应用程序时进入它的源代码，以便了解正在发生的事情并解决问题。如何在我的 Angular 6 应用程序中执行此操作？

我正在使用ng serve --source-map --vendor-source-map (as shown here) 来启动 Angular，但这不起作用。当我尝试调试在OktaAuthService 类中定义的名为isAuthenticated() 的方法时，Chrome 的调试器显示此错误：

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

我在 Okta 的 npm 包中找不到这个文件，但我确实找到了它的类型定义文件 okta.service.d.ts。这是否意味着 Okta 的 NPN 包不包含 TS 源代码及其转译的 JS 代码？是否有一个 npm/Angular 选项可以让我下载 Okta 包及其源代码以进行调试？

我使用的是什么版本？

当我运行ng --version 时，我得到以下信息：

@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

这是我的 package.json 文件中的内容

"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"
    }

Answer 1

我可能会在这里帮你玩一点。我也遇到过同样的情况，以前也有过，但我不确定我是否记得。

您是否有 Okta 的 .map 文件，如果您手动包含这些文件，它应该有助于 .js -> .ts 调试？？

我也确实找到了有问题的文件。这可能就像下载源文件并将它们放在预期的 src 文件夹中一样简单（来自错误消息？）

https://github.com/okta/okta-oidc-js/tree/master/packages/okta-angular/src/okta/services

他们很可能不会在他们分发的“构建”或“捆绑”中包含 .ts 源代码文件，但看起来你可以从 github 中提取它们，所以也许这就是你的技巧需要吗？

如果你有任何运气，请告诉我？

您还可以编辑 .js 文件并添加调试器；声明

Answer 2

尝试设置

module.exports = {
  mode: 'development'
};

在 angular.json 中

{
  "architect": {
    "build": {
       "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "customWebpackConfig": {
         HERE

或者只是使用旧的console.log。