A Falcon 9 soft landed (and reusable?) fairing. Amazing!

Debugging Angular framework running inside Docker container using VS Code

Build and test the Angular Framework’s code inside a container. Not to be mistaken for an app built with angular in a container.

Goal: have the angular framework code build and run its tests inside a Docker container and be able to debug that using VS Code.
But … why? Well my reasons are:

1. To prove it’s possible
2. To learn about Docker
3. Try and contribute to Angular — both to the framework’s code itself and in having a Docker way of build/run tests
4. Being a windows user — line endings*

*I found it hard to keep the line endings in the angular framework code to stay LF. Both VS Code when editing and git when checking out the code were very helpful to put CRLF where LF was supposed to be — namely in the .sh build and test scripts. And while VS Code accepted .editorconfig no ammount of git config and git attribute could persuade my local git not to CRLF all the things. So onwards to Docker

Prerequisites: Installed Docker, VS Code. See Angular’s PR guide and Dev guide. Ignore the prerequisite software as we’ll use a docker image all ready.

The plan:

1. Run the container in which we’ll do our test runs and the build
2. Provide a volume where Angular’s code will be available both to the outside/host and the inside/container. Need that to be able to edit the code and also do the build and tests
3. Clone our fork of https://github.com/angular/angular
4. Build the code
5. Run tests
6. Debug tests

The steps:

In order to make it simpler both for myself and for anyone that wants to follow, I have a github repo with some helper scripts: https://github.com/gparlakov/ng_contrib

1.git clone https://github.com/gparlakov/ng_contrib

2. cd into it
cd ng_contrib

3. Start the container
go.cmd
(first time you’ll get asked to allow docker to use your drive and the image will get downloaded):

Start a node:8 container passing it a volume angular and running bash in the container

Inside of the container there’s the angular folder

4. Clone your own angular fork
git clone https://github.com/gparlakov/angular
which should put it in ./angular folder

5. cd angular

6. yarn install

7. ./test.sh node

Now for the docker specific part. It turns out that when the ./test.sh node is fired up it uses the node --inspect command and that does not fly. It does not allow you to attach a debugger from outside of the container — which is what we need. See below — if we start the ./test.sh node --debug a debugger will start listening at some point but it would not be accessible from the host.

In order to be accessible we need to do node --inspect=0.0.0.0:9229 and that allows us to actually connect to the debugger inside the container. One way to do that is to edit ng_contrib/angular/tools/tsc-watch/index.ts

Now when we run the ./test.sh node --debug we’ll be able to attach a debugger.

localhost:59229/json/list is part of the node debugger api.

So at this point we can use VS Code to attach to the running process.

Use a config like this one. Or just use the launch.json provided in ng_contrib repo.

With the debugger and VS Code running start the debug and press the pause button and:

Quirks:

Q1: Jasmine focus requires tests restart: The tests are quite long and you might want to focus on a section fdescribe. But that requires restart of the tests and attaching the debugger immediately because after tests complete — debugger stops listening until the next run.

Q2: Might want to do the ./node --inspect-brk=0.0.0.0:9229 which will stop the test run and wait for the debugger to attach.

Q3: Use debugger;for breaking as suggested. Breakpoints would sometimes show as unverified.

Thanks for reading. I hope this was useful. It certainly was for myself. Now go and contribute to angular (even on windows PC:).