Debug doesn't hit in Angular 6 project (ng serve -c mock)

Hi All,

I had a problem to run is debug mode my Angular 6 project generated with cli, but this post helped me. https://blog.jetbrains.com/webstorm/2017/01/debugging-angular-apps/#comment-302330

I have:

"@angular/cli": "~6.0.8"
"@angular/compiler-cli": "^6.0.3",
"@angular-devkit/build-angular": "~0.6.8",



I went further to run my project in mock environment/ng serve -c mock/, but i faced my original problem, debug doesn't hit.

I have the following settings in my app for mock environment:

environment.mock.ts

export const environment = {
...
};

export function init(env) {
Object.assign(environment, env);
}


angular.ts

"projects": {
"myproject": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "gb",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/myproject",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [...],
"styles": [...],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
"mock": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.mock.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "myproject:build"
},
"configurations": {
"production": {
"browserTarget": "myproject:build:production"
},
"mock": {
"browserTarget": "myproject:build:mock"
}
}
},


1. i run: ng serve -c mock
2. i start my Javascript debug config, which points to localhost:4200

At this point i checked the Chrome Dev Toolbar and i saw the following, the source is not available:
So in this case brake point doesn't hit.


Compare to when i run: ng serve, i have the source available:
In this case brake point hits!


For me it looks like, the '-c' options changes something in the execution and runs different, than the normal 'ng serve'.
Can someone advice, what can be the problem? What do i miss?


5 comments

looks as if no sourcemaps are produced

in your angular.ts, you have

"mock": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.mock.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
}

what about setting "sourceMap" to true?

1

Thanks Elena, it solved the problem!!! Wow!

I have related question, you might can answer it.

Previously i was able to use the application(Angular 5) in debug mode with

"@angular/cli": "1.7.3",

, because i defined the following in the packages.json

"scripts": {
...
"start-mock": "ng serve --env=mock",
...
}

I put it in the run configuration with 'npm run' command and i hit the debug button and worked  the debug mode out of the box.

Will it ever work debugging such a simple way again in the JetBrains world?

(Currently debugging is such an inconvenient feature)

0

>I put it in the run configuration with 'npm run' command and i hit the debug button and worked  the debug mode out of the box.

 

Do you mean that you used to be able to debug your Angular app by selecting NPM run configuration and pressing Debug? You are mistaken, it had never worked this way. Your npm script just builds the application and starts the dev server; debugging this script, well, debugs the script - nothing more. To debug the app (that is a client-side application run in browser), you have to use a different run configuration - JavaScript Debug

0

I can confirm the above mentioned settings worked with an Angular 5.2 project with the following setup:

Webstorn 2017.1

Node 8.9.4
Npm 5.6.0
Angular-cli 1.7.3
Script in packages.json: "start-mock""ng serve --env=mock"

Npm run config:

Hitting debug button on the tool bar, debug worked fine.

Unfortunately with the latest updates:
Webstorm 2018.1.5
Node 9.5
Angular -cli 6.0

the simple way of Debug execution is not working anymore.
I understand the technology is evolving it brings new new and good features, but on the other hand can loose straight forward solutions.
It would be great to have back simple things work again.

Thanks again for your help, it was really valuable!

0

>Hitting debug button on the tool bar, debug worked fine.

that's strange (to put it mildly). What did work namely? Running this configuration in debugger in 2017.1 results in starting 3 node.js processes, but none of then is run with debug options, and the process just exits once the app building is completed. And, of course, it doesn't result in attaching the debugger to the client app run in browser

Results in 2018.1 are exactly the same

0

Please sign in to leave a comment.