How to solve angualr cli auto change recompiling failed issue

The reason is caused by the too small number of max_user_watches in system.  a temp solution is to:

 echo 65536 | sudo tee -a /proc/sys/fs/inotify/max_user_watches

But this will lose it after reboot so you can change system setting of linux in this way:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
Advertisements

How to use jQuery in Angular 2

First install jQuery with NPM: npm install --save jquery

Update scripts key in your angular-cli.json to include jQuery

"scripts": [
  "../node_modules/jquery/dist/jquery.js"
]

You should stop angular-cli and rerun it using ng serve.

Now jQuery is available globally in the application. Whenever you need to use just declare $ or jQuery at the top like so:

import { Component, OnInit } from '@angular/core';  
// import line is this one
declare var $:any;
//declare var jQuery: any;

export default class Random implements OnInit {  
  ngOnInit() {
    // $ will be availble
    console.log($);
  }
}

 

jQuery THIS trap in Angular 2

Because of the access scope for jQuery, you must be careful when you use the jQuery in the  Angular. such as for this code  :

resultList  :string[] = [];
       myarray  :string[] = ['s1','s2','s3'];

       ............
                this.resultList.push('testS1');
                jQuery.each( this.myarray, function( index, v ) {
                        this.resultList.push(  v );
                });
       ...............

The error you will get will be :
Cannot read property ‘push’ of undefined

Correct way is:

       resultList  :string[] = [];
       myarray  :string[] = ['s1','s2','s3'];

       ............
                this.resultList.push('testS1');
                let __mythis = this;
                jQuery.each( this.myarray, function( index, v ) {
                        __mythis.resultList.push(  v );
                });
       ...............

Angular – How to pass data by the router link

Refer to google page of https://angular.io/docs/ts/latest/guide/router.html#!#navigate ,

I just give a myself example to show how it works. This is a master component that wswapill guide the router to a component link of  /itemdetail  and together pass one object – this.selectedItemObj to next page. (selectedItemObj  could contain the itemName, id, etc. inside.)

import { Router} from '@angular/router';
....constructor(
        private router: Router
    )...
....this.router.navigate( ['/itemdetail', this.selectedItemObj] );
...

And then  at the target component, we can try to get the router link parameters at the init stage to initialize the data:

import { ActivatedRoute, Router, Params } from '@angular/router';
...
constructor(
        private route: ActivatedRoute,
        private router: Router
    ) {... }
...
ngOnInit() {
        this.route.params.subscribe(
            params => {
                this.itemName = params['itemName'];
                this.item = + params['id'];
                // TODO, you can call your service to get more data based on the ID or name 
                   ...
                });
..........

If you do not need to do too much things after you get the params data, you can use the switchMap to do a simple service call before subscribe, refer to google link for the example there.