I'm just trying to debug the server-side code on the Angular 2 Universal Starter in VS Code. The Angular 2 Universal Starter actually uses VS Code and even has a launch.json file in it.
The break points I have set in the backend code in VS Code never pause execution. The app has not been edited at all from the original, except I have edited the launch.json file as it needs to be edited.
This is the original:
{
"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
}
]
}
This is with my edits:
{
"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
}
]
}
I am fairly sure that src/client.ts is the entry point to the app. I have done this terminal command to create sourcemaps:
tsc --sourceMap --outDir dist src/client
The result of that was these errors:
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.
I'm not sure if they matter.
I try to launch the debugger in VS Code and get this error which stops debugging:
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)
How do I get rid of the error to successfully debug the code?
For Angular 6 Universal running Server Side Rendering (SSR) here's how I configured it.
launch.json
}
tasks.json
}
Essentially this will do the same command as following
npm run build:ssr && npm run serve:ssr
. Hope this helps.