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

Question

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

我正在使用ng serve --source-map --vendor-source-map（如此处所示）来启动 Angular，但这不起作用。当我尝试调试到类中isAuthenticated()定义的方法中时OktaAuthService，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

尝试设置

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

在 Angular.json 中

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

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