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”

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.


Component Inheritance in Angular 2

Here is a great post that described the new adition to the angular 2 framework, starting with version 2.3 .

just to put it in a nutshell:

“Component Inheritance in Angular 2.3 covers all of the following:

  • Metadata (decorators): metadata (e.g. @Input(), @Output), etc. defined in a derived class will override any previous metadata in the inheritance chain otherwise the base class metadata will be used.
  • Constructor: the base class constructor will be used if the derived class doesn’t have one, this mean that all the services you injected in parent constructor will be inherited to child component as well.
  • Lifecycle hooks: parent lifecycle hooks (e.g. ngOnInit, ngOnChanges) will be called even when are not defined in the derived class.

Component inheritance DO NOT cover templates and styles. Any shared DOM or behaviours must be handled separately.”

Application Configuration

where should i store it ?

i am previous post (Load configuration from external file) i’ve described the way to load the configuration from a json file.

Here, i want to address the option to have our configuration as part of our application, in a class.

We could use angular-cli’s environment.ts file, and add values to the constant that is declared there. but i want to show a more elegant way. this is based on the angular DI documentation and on a stackoverflow answer.

1) app.config.ts

import { OpaqueToken } from "@angular/core";

export let APP_CONFIG = new OpaqueToken("app.config");

export interface IAppConfig {
    apiEndpoint: string;

export const AppConfig: IAppConfig = {    
    apiEndpoint: "http://localhost:15422/api/"    

2) app.module.ts

import { APP_CONFIG, AppConfig } from './app.config';

    providers: [
        { provide: APP_CONFIG, useValue: AppConfig }

3) your.service.ts

import { APP_CONFIG, IAppConfig } from './app.config';

export class YourService {

    constructor(@Inject(APP_CONFIG) private config: IAppConfig) {
             // You can use config.apiEndpoint now

Now you can inject the config everywhere without using the string names and with the use of your interface for static checks.

please note: in my tests, i get warnings if i use the : IappConfig statement in the constractor of “YourService”. you can omit this, and things continue to work as expected (eventually, javascript doesn’t have interfaces)

Angular 2 – Custom Validators

Angular 2 has minimum pack of form field validators:

  • required
  • minlength
  • maxlength
  • pattern

I’ve stumbled across this github project that will add some nice angular 2 validators.

extend validators

  • rangeLength
  • min
  • max
  • range
  • digits
  • number
  • url
  • email
  • date
  • minDate
  • maxDate
  • dateISO
  • creditCard
  • json
  • base64
  • phone
  • uuid
  • equal
  • equalTo
import { CustomFormsModule } from 'ng2-validation'

for example (template driven)


<input type="text" [(ngModel)]="model.field" name="field" #field="ngModel"
 [rangeLength]="[5, 9]"/>
<p *ngIf="field.errors?.rangeLength">error messagep>

The idea is to have directives that add validation functionality to the
form fields.

for example (model driven)

//don't forget to import the following in your module
import { ReactiveFormsModule } from '@angular/forms';

this.form = new FormGroup({
            field: new FormControl('', CustomValidators.range([5, 9]))

Read all about it here: