Angular 4


Hi everyone. This is my new blog about Angular 2/4.
During my work with Angular 2 , I encounter many issues that result in long searches for answers on the web.
So i’ve decided to write about those issues, and hopefully that could help others.


Debug Angular4 in VSCode

use the following debug configuration, in order to enable chrome debugging from vscode iteself.


“version”: “0.1.0”,
“configurations”: [
“name”: “Launch Client”,
“type”: “chrome”,
“request”: “launch”,
“port”: 9223,
“sourceMaps”: true,
“diagnosticLogging”: true,
“webRoot”: “${workspaceRoot}”,
“runtimeArgs”: [
“userDataDir”: “${workspaceRoot}/.vscode/chrome”

unsubscribing – the right way

export class MyComponent implements OnDestroy, OnInit {

  public user: User;
  private alive: boolean = true;

  public ngOnInit() {
    this.userService.authenticate(email, password)
      .takeWhile(() => this.alive)
      .subscribe(user => {
        this.user = user;

  public ngOnDestroy() {
    this.alive = false;



you can subscribe to multiple observable, and with one statement in the ngOnDestroy event, unsubscribe from them all.

Using this way, the observable’s complete event will fire, in case you handle it.

further reading, by Ben Lesh: RxJS: Don’t Unsubscribe


TypeScript Importer – Add the “Import” to your code automatically

This feature was one of the reasons some of my friends chose WebStorm over VS Code.

What ? who?

suppose you create a new service AService. Then, you want to inject it into your component.
currently you have to add an  Import statement at the top of your code, and inject the service in the constructor.

Here is the shortcut: install “TypeScript Imported” extension in your vs code (ctrl+p then “ext install tsimporter”) , and from now on your life will be much easier.