Angular4 VS2017 template - cannot modify the code

ServiceStack VS AngularJS
1

I am sure I am missing something simple…

I have created a ServiceStack Angular4App project with the latest (v1.0.40.0) VS2017 project templates extension:

After loading to VS2017 and having all packages restored I got it working straight away.

But the major problem is that any modification to the src/modules/app/hello.ts do not get compiled (and reflected at runtime). Doesn’t matter what I do: rebuild all, restart VS.

Effectively the VS template as is is only good to compile the app once. After that I cannot change it.

I think this might be a clue:
Having break point in the src/modules/app/hello.ts was not possible though as an alternative one could put the breakpoint g in dynamically generated ./node_modules/angular2-template-loader!./node_modules/@angularclass/hmr-loader!./src/modules/app/home/hello.ts. I guess it has something to do with WEBPACK

I appreciate any advice.

2

All SPA projects require running a webpack build which handles incremental compilation of any client assets. If you’re using VS 2017 you can just run the dev Gulp Task in VS.NET’s Task Runner Explorer:

Which if you don’t have already open, can open from View > Other Windows > Task Runner Explorer.

You just need to leave it running the background and it will take care of compiling any .ts that have changed.

1 Like
3

Thank you for such a prompt response.

It did the trick. Great. I just… assumed that after loading the VS solution all background watchers would be started automatically or user is warned about the extra steps needed. Anyway. The problem is solved. Thanks!

The question remains about the break points though. Do you have any idea why the VS breakpoints in the very original ts file are not processed but only the dynamic scripts:

4

I wouldn’t expect VS to be able to handle debugging webpack compiled assets, try debugging in Chrome WebInspector instead:

image.png1596×699 176 KB

5

I think you are right.

Interestingly enough the VSChromDebugger allows debugging webpacked ts files just fine. It simply produces the “dynamic scripts” in the ScriptDocuments node of the project tree (see the image in my post). And these ts files are perfectly debugable. It’s inconvenient to navigate to them but… kind of OK.

The real show stopper there is that dev Galp task updates the actual pack (great) but the debugging info required by the VS+Chrome integration stays the same. The ts file changes are just not reflected in those dynamic scripts. Making the whole VS+Chrome debug integration useless.

Debugging inside of the browser is the only working option. At least currently.

Thank you again for such a quick and complete support.

1 Like
6

Latest update.

The template I was working with is “.NET4.5+ServiceStack+Angular4”

But another template “.NETCore+ServiceStack+Angular4” seems to be a better fit for the task.

It still requires an extra push with the dev Galp task but after that everything works as expected. Even more, the berakpoints can be placed directly in the original ts files and the VS debugging with Chrome works in full.

It’s not a template fault. No, it seems like VS+Chrom integration for webpacked projects work reliably only under .NETCore but not under .NETFull.

1 Like