Test Tour: Angular 2

[egamma]

see #23385 for the theory.

Angular quick starter: https://github.com/angular/quickstart

Extensions:

• Angular language service
• Setup tasks or use NPM Script Runner to run the scripts in the package.json

Implement & run some protractor tests.

[egamma]

Config

The quick start doesn't compile into a separate build directory, as a consequence the explorer is cluttered with derived resourced for .js and .map.js. You really need to configure files.exclude

	"files.exclude": {
		"**/*.js": { "when": "$(basename).ts"},
		"**/*.js.map": true
	},

These settings are not trivial to configure. One idea would be that the TS extension detects this setup and prompts the user whether they want to exclude deriver .js and .js.map files.

[egamma]

Language Service

• Intellisense/hovering/go to definition works out of the box in .ts files

• with the Angular Language Service extension you also get Intellisense inside templates:
  
  

• the rename symbol refactoring doesn't work. Trying to rename name in the template:
  
  trying to rename name in the code:
  
  This is on the roadmap see https://www.youtube.com/watch?v=ez3R0Gi4z5A&feature=youtu.be at the end. Requires a unified server.

No Intellisense in html for references scripts:

[egamma]

Tslint task

Tslint setup with the vsocde-tslint extension works out of the box. The quickstarter bundles its own tslint extension.

Configuration: setting up a task that runs tslint with a problem matcher. Using Configure Task Runner > npm. This action does't create a task for tslint? @dbaeumer

{
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "install",
            "args": ["install"]
        },
        {
            "taskName": "update",
            "args": ["update"]
        },
        {
            "taskName": "test",
            "args": ["run", "test"]
        }
    ]
}

Adding one for tslint with a problem matcher:

        {
            "taskName": "lint",
            "args": ["run", "lint"],
            "problemMatcher": "$tslint4"
        }   

Would be nice to get Intellisense for variables after "$.

Tslint4 problemmatcher doesn't handle verbose output properly: https://github.com/Microsoft/vscode-tslint/issues/188

Could make it work when disabling the verbose output and overwriting the absolute fileLocation setting. (Nice that you can use a problem matcher as a template 🌹)

            "taskName": "lint",
            "args": ["run", "lint"],
            "problemMatcher": {
                "base": "$tslint4",
                "fileLocation": "relative"
            }
        }

[egamma]

Debugging Karma Tests

Karma Test Running. Just works and is neat, triggered using file watching. Below I forced to create a test failure

Setting up debugging for Karma test run
https://stackoverflow.com/questions/42805028/how-to-debug-karma-tests-in-visual-studio-code
Used the attach Answer

Added the following to karma.conf.js

    browsers: ['ChromeDebugging'],
    customLaunchers: {
      ChromeDebugging: {
        base: 'Chrome',
        flags: ['--remote-debugging-port=9333']
      }
    },

launch.json

        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach Karma Chrome",
            "address": "localhost",
            "port": 9333,
            "pathMapping": {
                "/": "${workspaceRoot}/",
                "/base": "${workspaceRoot}/"
            }
        }

• Start testing: npm run tests
• Set a break point in app.component.spec.ts.
• Change a file, e.g., app.component.ts to trigger test run
  => break point is hit.

@roblourens is this be documented somewhere?

[egamma]

Recommendations

The Angular Language Service extension is nice, we should recomment it for Angular development. This could be done by peeking into the package.json.

[kieferrm]

Notes from our test tour. Neither @mjbvz nor I had any angular experience.

Angular Starter Kit

Setup

• bring up a fresh instance of vscode that has no extensions installed
• clone the starter kit repository
• open vscode on the cloned repo
• open a .ts file and the package.json file
• the files are showing errors because of missing dependencies (which is expected)
• Note
  • In both cases there should be a quick fix for running npm install
• when you run npm install, squiggles don't go away
• npm start .. success
• when simply pressing F5 to launch you run into Angular: unclear debug error message #24244
• Note:
  • there are no recommendations in this scenario although the package.json file has clear references to @angular
  • when looking for an Angular extension, you don't have any idea which extension to choose. There are many, all using the same icon... You need to know that you want the Angular Language Service.
  • you want to use angular-inline extension to get html colorization in @Component({ template: <html here})
  • once you have that all setup, pretty much everything works out of the box
• at one point I ended up in a state where the NG server started to use 100% CPU endlessly when I opened ${workspaceRoot}/node_modules/core-js/client/shim.js. however, when I started with a fresh extension-dir and fresh user-dir I could not reproduce the issue (see Zombie processes throughout the day angular/vscode-ng-language-service#32 (comment))

Debug

• you need to know that you need the Chrome Debugger, there is no recommendation
• when chrome is already open you run into Unclear error message in chrome debug #24250
• when setting up the chrome launch config you need to figure out the right value for webroot
• Note
  • When somebody is new to Angular and new to vscode, getting the debugger to work is just hard enough to be frustrated.
• combined launch config for server and protract tests just works

Tasks

• straight forward - no issues

Editing & Test Running

• works out of the box

General

• when you get started with angular you need to know a lot of stuff (several layered test frameworks, ....)
• Angular Productivity Pack extension pack has a lot of goodies in it, Chrome however is missing
• everything is even easier once you know 😉

Using the Angular CLI

• using the angular CLI setup is comparable to the above although Matt and I preferred it over the starter kit
• one issue is that building happens through ng build rather than tsc. ng uses webpack`. When you setup the build task you need to setup your own problem matcher @mjbvz pls paste the problem matcher.

[dbaeumer]

@egamma with the new extension story the tslint task should come from the tslint extension. The core should IMO not parse the package.json and should add any tslint tasks.

[mjbvz]

Closing since we've complete the test tour. We've already opened a few issues to track discovered bugs and for a few feature requests, and feel free to open additional ones to track findings of this test tour