node.js - 在 VS Code 中调试 Angular Universal Starter App 的服务器端不起作用

Question

我只是想调试 Angular 2 Universal Starter 上的服务器端代码在 VS 代码中。 Angular 2 Universal Starter实际上使用 VS Code，甚至其中有一个 launch.json 文件。

我在 VS Code 的后端代码中设置的断点永远不会暂停执行。该应用程序根本没有从原始版本中进行编辑，除了我编辑了需要编辑的 launch.json 文件。

这是原文:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/dist/server/index.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "sourceMaps": false,
            "outDir": null
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outDir": null,
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        },
        {
            "name": "Attach to Process",
            "type": "node",
            "request": "attach",
            "processId": "${command.PickProcess}",
            "port": 5858,
            "sourceMaps": false,
            "outDir": null
        }
    ]
}

这是我的编辑:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/src/client.ts",
            "stopOnEntry": false,
              "skipFiles": [
                "node_modules/**/*.js"
              ],
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "sourceMaps": true,
            "outFiles": ["${workspaceRoot}/dist/**/*.js"]
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outDir": null,
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        },
        {
            "name": "Attach to Process",
            "type": "node",
            "request": "attach",
            "processId": "${command.PickProcess}",
            "port": 5858,
            "sourceMaps": false,
            "outDir": null
        }
    ]
}

我相当确定 src/client.ts 是应用程序的入口点。我已经完成了这个终端命令来创建源映射:

tsc --sourceMap --outDir dist src/client

结果是这些错误:

node_modules/@angular/common/src/directives/ng_class.d.ts(46,34): error TS2304: Cannot find name 'Set'.
node_modules/@angular/common/src/pipes/async_pipe.d.ts(44,38): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_init.d.ts(16,18): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(106,67): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(122,101): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(148,67): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(150,101): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(24,15): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(28,16): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/di/reflective_provider.d.ts(88,123): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/di/reflective_provider.d.ts(88,165): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(4,9): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(5,23): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(6,25): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/lang.d.ts(12,17): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/lang.d.ts(13,17): error TS2304: Cannot find name 'Set'.
node_modules/@angular/core/src/linker/compiler.d.ts(53,49): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/compiler.d.ts(61,65): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/ng_module_factory_loader.d.ts(14,34): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/system_js_ng_module_factory_loader.d.ts(28,25): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/util/lang.d.ts(8,53): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/http/src/headers.d.ts(45,59): error TS2304: Cannot find name 'Map'.
node_modules/@angular/http/src/url_search_params.d.ts(46,16): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/browser/browser_adapter.d.ts(79,33): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(97,42): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/dom/dom_renderer.d.ts(18,37): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(4,9): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(5,23): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(6,25): error TS2304: Cannot find name 'Map'.
node_modules/@angular/router/src/config.d.ts(279,62): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/interfaces.d.ts(78,99): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/interfaces.d.ts(157,109): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/interfaces.d.ts(227,115): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/interfaces.d.ts(297,91): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/interfaces.d.ts(367,50): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/router.d.ts(386,70): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/router.d.ts(408,59): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/utils/collection.d.ts(35,58): error TS2304: Cannot find name 'Promise'.
node_modules/angular2-universal/common/index.d.ts(1,33): error TS2304: Cannot find name 'WeakMap'.
node_modules/rxjs/Observable.d.ts(10,66): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(66,60): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(66,70): error TS2304: Cannot find name 'Promise'.
src/+app/+about/about-routing.module.ts(12,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/+about/about.component.ts(9,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/+about/about.component.ts(10,15): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/+about/about.module.ts(16,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/+home/home-routing.module.ts(12,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/+home/home.component.ts(16,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/+home/home.module.ts(16,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/+todo/todo-routing.module.ts(13,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/+todo/todo.component.ts(14,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/+todo/todo.module.ts(16,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/app-routing.module.ts(5,10): error TS2304: Cannot find name 'System'.
src/+app/app-routing.module.ts(17,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/app.component.ts(11,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/app.component.ts(28,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/app.module.ts(24,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/shared/api.service.ts(12,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/shared/cache.service.ts(4,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/shared/cache.service.ts(7,15): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/shared/cache.service.ts(7,45): error TS2304: Cannot find name 'Map'.
src/+app/shared/cache.service.ts(86,14): error TS2339: Property 'isNaN' does not exist on type 'NumberConstructor'.
src/+app/shared/model/model.service.ts(25,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/shared/shared.module.ts(43,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/angular2-meta.ts(55,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/browser.module.ts(20,21): error TS2304: Cannot find name 'Map'.
src/browser.module.ts(64,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
Benjamins-MBP:vepo root# tsc --sourceMap --outDir dist src/client
node_modules/@angular/common/src/directives/ng_class.d.ts(46,34): error TS2304: Cannot find name 'Set'.
node_modules/@angular/common/src/pipes/async_pipe.d.ts(44,38): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_init.d.ts(16,18): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(106,67): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(122,101): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(148,67): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/application_ref.d.ts(150,101): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(24,15): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(28,16): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/di/reflective_provider.d.ts(88,123): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/di/reflective_provider.d.ts(88,165): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(4,9): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(5,23): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/collection.d.ts(6,25): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/lang.d.ts(12,17): error TS2304: Cannot find name 'Map'.
node_modules/@angular/core/src/facade/lang.d.ts(13,17): error TS2304: Cannot find name 'Set'.
node_modules/@angular/core/src/linker/compiler.d.ts(53,49): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/compiler.d.ts(61,65): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/ng_module_factory_loader.d.ts(14,34): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/linker/system_js_ng_module_factory_loader.d.ts(28,25): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/core/src/util/lang.d.ts(8,53): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/http/src/headers.d.ts(45,59): error TS2304: Cannot find name 'Map'.
node_modules/@angular/http/src/url_search_params.d.ts(46,16): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/browser/browser_adapter.d.ts(79,33): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(97,42): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/dom/dom_renderer.d.ts(18,37): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(4,9): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(5,23): error TS2304: Cannot find name 'Map'.
node_modules/@angular/platform-browser/src/facade/collection.d.ts(6,25): error TS2304: Cannot find name 'Map'.
node_modules/@angular/router/src/config.d.ts(279,62): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/interfaces.d.ts(78,99): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/interfaces.d.ts(157,109): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/interfaces.d.ts(227,115): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/interfaces.d.ts(297,91): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/interfaces.d.ts(367,50): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/router.d.ts(386,70): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/router.d.ts(408,59): error TS2304: Cannot find name 'Promise'.
node_modules/@angular/router/src/utils/collection.d.ts(35,58): error TS2304: Cannot find name 'Promise'.
node_modules/angular2-universal/common/index.d.ts(1,33): error TS2304: Cannot find name 'WeakMap'.
node_modules/rxjs/Observable.d.ts(10,66): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(66,60): error TS2304: Cannot find name 'Promise'.
node_modules/rxjs/Observable.d.ts(66,70): error TS2304: Cannot find name 'Promise'.
src/+app/+about/about-routing.module.ts(12,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/+about/about.component.ts(9,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/+about/about.component.ts(10,15): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/+about/about.module.ts(16,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/+home/home-routing.module.ts(12,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/+home/home.component.ts(16,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/+home/home.module.ts(16,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/+todo/todo-routing.module.ts(13,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/+todo/todo.component.ts(14,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/+todo/todo.module.ts(16,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/app-routing.module.ts(5,10): error TS2304: Cannot find name 'System'.
src/+app/app-routing.module.ts(17,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/app.component.ts(11,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/app.component.ts(28,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/app.module.ts(24,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/shared/api.service.ts(12,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/shared/cache.service.ts(4,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/shared/cache.service.ts(7,15): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/shared/cache.service.ts(7,45): error TS2304: Cannot find name 'Map'.
src/+app/shared/cache.service.ts(86,14): error TS2339: Property 'isNaN' does not exist on type 'NumberConstructor'.
src/+app/shared/model/model.service.ts(25,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/+app/shared/shared.module.ts(43,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/angular2-meta.ts(55,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
src/browser.module.ts(20,21): error TS2304: Cannot find name 'Map'.
src/browser.module.ts(64,14): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.

我不确定它们是否重要。

我尝试在 VS Code 中启动调试器并收到此错误，该错误停止了调试:

    node --debug-brk=38670 --nolazy dist/client.js  

Debugger listening on [::]:38670 /private/var/root/vepo/node_modules/webfontloader/webfontloader.js:1 (function (exports, require, module, __filename, __dirname) { /* Web Font Loader v1.6.27 - (c) Adobe Systems, Google. License: Apache 2.0
    */(function(){function aa(a,b,c){return a.call.apply(a.bind,arguments)}function ba(a,b,c){if(!a)throw Error();if(2<arguments.length){var d=Array.prototype.slice.call(arguments,2);return function(){var c=Array.prototype.slice.call(arguments);Array.prototype.unshift.apply(c,d);return a.apply(b,c)}}return function(){return a.apply(b,arguments)}}function p(a,b,c){p=Function.prototype.bind&&-1!=Function.prototype.bind.toString().indexOf("native code")?aa:ba;return p.apply(null,arguments)}var q=Date.now||function(){return+new Date};function ca(a,b){this.a=a;this.m=b||a;this.c=this.m.document}var da=!!window.FontFace;function t(a,b,c,d){b=a.c.createElement(b);if(c)for(var e in c)c.hasOwnProperty(e)&&("style"==e?b.style.cssText=c[e]:b.setAttribute(e,c[e]));d&&b.appendChild(a.c.createTextNode(d));return b}functio ReferenceError: window is not defined
        at /private/var/root/vepo/node_modules/webfontloader/webfontloader.js:1:741
        at Object.<anonymous> (/private/var/root/vepo/node_modules/webfontloader/webfontloader.js:18:1775)
        at Module._compile (module.js:570:32)
        at Object.Module._extensions..js (module.js:579:10)
        at Module.load (module.js:487:32)
        at tryModuleLoad (module.js:446:12)
        at Function.Module._load (module.js:438:3)
        at Module.require (module.js:497:17)
        at require (internal/module.js:20:19)
        at Object.<anonymous> (/private/var/root/vepo/dist/client.js:8:23)

如何消除错误以成功调试代码？

Answer 1

对于运行服务器端渲染 (SSR) 的 Angular 6 Universal，我是这样配置的。

启动.json

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}/dist/server.js",
        "stopOnEntry": false,
        "skipFiles": [
            "node_modules/**/*.js"
        ],
        "args": [],
        "cwd": "${workspaceRoot}",
        "preLaunchTask": "Compile",
        "runtimeExecutable": null,
        "runtimeArgs": [
            "--nolazy"
        ],
        "env": {
            "NODE_ENV": "development"
        },
        "console": "integratedTerminal",
        "sourceMaps": true,
        "outFiles": [
            "${workspaceRoot}/dist/**/*.js"
        ]
    },
    {
        "name": "Attach",
        "type": "node",
        "request": "attach",
        "port": 5858,
        "address": "localhost",
        "restart": false,
        "sourceMaps": false,
        "outFiles": [],
        "localRoot": "${workspaceRoot}",
        "remoteRoot": null
    }
]

}

任务.json

{
"version": "2.0.0",
"command": "npm",
"args": [],
"tasks": [
    {
        "label": "Compile",
        "type": "npm",
        "script": "build:ssr",
        "group": {
            "kind": "build",
            "isDefault": true
        }
    }
]

}

本质上，这将执行与以下 npm run build:ssr && npm runserve:ssr 相同的命令。希望这可以帮助。