ERROR ReferenceError: is not defined in angular 4

ERROR ReferenceError:  is not defined

Hi, I was adding click event function in angular 4 components html. below is the code for the same.

<span (click)="removeCity(idx)" >remove</span>

and in component ts file, function written as,

 removeCity = function(index) {

        this.cityList.splice(index, 1);

    }

Where cityList is a array of cities defined in ts file.

But, when I was runing the code, I was getting "ERROR ReferenceError:   is not defined in" Then, did followed below steps from terminal to import jquery in app.module.ts

$ npm i jquery --save

$ npm i @types/jquery -D

and imported 'import * as $ from 'jquery';' in app.module.ts

Now, error is vanished.

Angular4 - node install and upgrade

Angular4 - node install and upgrade

I had installed old version of node js in my laptop ubuntu OS. to start with angular 4 and CLI, we need version more than "node":">= 8.9.0","npm":">= 5.5.1" but my current version is "node":"4.7.2","npm":"3.5.2".

Below are the steps I followed to upgrade and install node with latest version.

First uninstall existing node version.

sachin@sachin-E470:~$ sudo apt-get install --reinstall nodejs-legacy

[sudo] password for sachin:

Reading package lists... Done

Building dependency tree       

Reading state information... Done

0 upgraded, 0 newly installed, 1 reinstalled, 0 to remove and 176 not upgraded.

Need to get 30.9 kB of archives.

After this operation, 0 B of additional disk space will be used.

Get:1 http://old-releases.ubuntu.com/ubuntu zesty/universe amd64 nodejs-legacy all 4.7.2~dfsg-1ubuntu3 [30.9 kB]

Fetched 30.9 kB in 20s (1,495 B/s)        

(Reading database ... 275944 files and directories currently installed.)

Preparing to unpack .../nodejs-legacy_4.7.2~dfsg-1ubuntu3_all.deb ...

Unpacking nodejs-legacy (4.7.2~dfsg-1ubuntu3) over (4.7.2~dfsg-1ubuntu3) ...

Setting up nodejs-legacy (4.7.2~dfsg-1ubuntu3) ...

Processing triggers for man-db (2.7.6.1-2) ...

sachin@sachin-E470:~$ sudo n rm 4.7.2

sachin@sachin-E470:~$ sudo npm uninstall -g n

removed 1 package in 0.053s

Install Latest Version:

sachin@sachin-E470:~$ sudo npm cache clean -f

npm WARN using --force I sure hope you know what you are doing.

sachin@sachin-E470:~$ sudo npm install -g n

/usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n

/usr/local/lib

`-- n@2.1.11

sachin@sachin-E470:~$ sudo n stable

    install : node-v10.4.0

      mkdir : /usr/local/n/versions/node/10.4.0

      fetch : https://nodejs.org/dist/v10.4.0/node-v10.4.0-linux-x64.tar.gz

######################################################################## 100.0%

  installed : v10.4.0

Now, we can check the node version installed as shown below:

sachin@sachin-E470:~$ node -v

v10.4.0

Check node and npm versions:

sachin@sachin-E470:~$ node -v

v10.4.0

sachin@sachin-E470:~$ npm -v

6.1.0

To install CLI:

sachin@sachin-E470:~$ npm install -g @angular/cli

Here -g means it is installed globally and not for specific project.

To check angular CLI installed or not:

sachin@sachin-E470:~$ ng -v

    _                  _ ____ _     ___

   / \  _ __ __ _ _   _| | __ _ _ __   / ___| | |_ _|

  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | | | | | |

 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |

/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|

               |___/

   

Angular CLI: 6.0.8

Node: 10.4.0

OS: linux x64

Angular:

...

Package                      Version

------------------------------------------------------

@angular-devkit/architect    0.6.8

@angular-devkit/core         0.6.8

@angular-devkit/schematics   0.6.8

@schematics/angular          0.6.8

@schematics/update           0.6.8

rxjs                         6.2.0

typescript                   2.7.2

Next - We will see demo for sample project in angular.

Its done!!!!

Download WebStorm IDE for angular 4

it000483@IND-PUN-LAP-183:~/angular4$ wget https://download.jetbrains.com/webstorm/WebStorm-2017.1.4.tar.gz

--2017-06-11 15:43:17-- https://download.jetbrains.com/webstorm/WebStorm-2017.1.4.tar.gz

Resolving download.jetbrains.com (download.jetbrains.com)... 54.217.236.18

Connecting to download.jetbrains.com (download.jetbrains.com)|54.217.236.18|:443... connected.

HTTP request sent, awaiting response... 302 Moved Temporarily

Location: https://download-cf.jetbrains.com/webstorm/WebStorm-2017.1.4.tar.gz [following]

--2017-06-11 15:43:22-- https://download-cf.jetbrains.com/webstorm/WebStorm-2017.1.4.tar.gz

Resolving download-cf.jetbrains.com (download-cf.jetbrains.com)... 52.222.135.71, 52.222.135.249, 52.222.135.30, ...

Connecting to download-cf.jetbrains.com (download-cf.jetbrains.com)|52.222.135.71|:443... connected.

HTTP request sent, awaiting response... 200 OK

Length: 251746799 (240M) [binary/octet-stream]

 Saving to: ‘WebStorm-2017.1.4.tar.gz’

Angular 4 Introduction and Install

Introduction:

Site for Referrence : https://cli.angular.io/

Angular1 – based on MVC model

angular2 – based on component

angular4 – performance better than angular 2

npm - node package management

npm install -g @angular/cli

download and install npm – 3.10 greater

node -v

npm -v

ng -v

Creating project:

ng new <projectName> --skip-install

cd <projectName>

ng serve – for starting the app

localhost:4200 --by default

 -- To change port:

ng serve --host 0.0.0.0 --port 4201