Featured

Angular 4

angular2

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.

 

Sponsored Post
Sponsored Post Menu
Learn from the experts: Create a successful blog with our brand new courseThe WordPress.com Blog

Are you new to blogging, and do you want step-by-step guidance on how to publish and grow your blog? Learn more about our new Blogging for Beginners course and get 50% off through December 10th.

WordPress.com is excited to announce our newest offering: a course just for beginning bloggers where you’ll learn everything you need to know about blogging from the most trusted experts in the industry. We have helped millions of blogs get up and running, we know what works, and we want you to to know everything we know. This course provides all the fundamental skills and inspiration you need to get your blog started, an interactive community forum, and content updated annually.

Register now

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”: [
“–disable-session-crashed-bubble”,
“–disable-infobars”
],
“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.

tsimporter

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';

@NgModule({
    providers: [
        { provide: APP_CONFIG, useValue: AppConfig }
    ]
})

3) your.service.ts

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

@Injectable()
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)