To resolve this error, we need to type the below command,
npm cache clean --force
This command is forcefully cleaning the cache.
Tuesday, 12 November 2019
Thursday, 3 May 2018
Error Build:Unknown compiler option 'lib' in angular application for Visual Studio 2015.
in: angular
In this article, We will discuss about How to resolve Error Build:Unknown compiler option 'lib' in angular application for Visual Studio 2015.
To resolve this error, goto .csproj and open it in notepad or any other editor.
Search TypeScriptToolsVersion and change
<TypeScriptToolsVersion>1.8</TypeScriptToolsVersion>
to
<TypeScriptToolsVersion>2.0</TypeScriptToolsVersion>
and after that rebuild your application and Which will work fine.
"Restore Packages" Option is missing on right click of package.json in angular application for Visual Studio 2015.
in: angular
In this article, We will discuss about "Restore Packages" Option is missing on right click of package.json in Visual Studio 2015.
This issue is related to Visual Studio 2015.
So, To Resolve this issue Just Restart Visual Studio 2015 and always Run Visual Studio in Administrator mode.
After this it will show Restore Package Option when we right click on package.json file.
Wednesday, 2 May 2018
Custom Pipes in Angular 2.
in: angular 2 Comments
In this article, We will discuss about Custom Pipes in Angular 2.
Pipe Created by developer to the requirement is called Custom Pipe.
Custom Pipe is a class implementing PipeTransform interface by overriding Transform method, this class should be applied with Pipe decorator.
Syntax:-
----------
@Pipe({
name:"PipeName"
});
export class <classname> implements PipeTransform
{
public transform(para1:type,para2:type):type
{
........
}
}
para 1 will receive data, this data can be transformed into required format.
para 2 will receive an option to be applied to data, it is an optional parameter.
Tuesday, 1 May 2018
Pipes in Angular 2.
in: angular
In this article, We will discuss about Pipes in angular 2.
Pipes is a built-in logic[class] to transform data into required format.
Pipes is similar to filters in angularjs.
Angular is providing following builtin pipes which is as follows,
1/ UpperCase Pipe:-
------------------------
This will convert string into UpperCase.
2/ LowerCase Pipe:-
------------------------
This will convert string into LowerCase.
3/ Number Pipe:-
---------------------
This will round up number to required fraction size[decimal].
Syntax:-
----------
varname|number:"minimumintegerpart:minfractionsize-maxfractionsize"
4/ Currency Pipe:-
----------------------
This can be used to display a number with currency symbol or code.
Syntax:-
----------
varname|currency:"currencycode:true|false:minintegerpart:minfractionsize-maxfractionsize"
5/ Percent Pipe:-
--------------------
This can be used to display percentage.
6/ Date Pipe:-
----------------
This can be used to display date in required format.
Syntax:-
---------
varname|date:format
Directives in Angular 2.
in: angular
In this article, We will discuss about What is Directives in angular 2.
Angular is providing directives to extend html functionality.
Angular directives are similar to html element attributes.
Directives are divided into 3 types,
i/ Component Directive
ii/ Behavioural Directive
iii/ Structural Directive
i/ Component Directive:-
------------------------------
This directive based on Component class [template] using selector is called "Component Directive".
This allows using Component [template] as an element[tag] with in webpage.
ii/ Behavioural Directive:-
-------------------------------
This directives will change appearance or behaviour of html element.
Example:-[ngStyle],[ngClass],[ngSwitch],[(ngModel)]
iii/ Structural Directive:-
------------------------------
This Directives will add/remove html tag[element] dynamically into browser dom.
This Directive will start with * symbol.
Example:- *ngIf,*ngFor,*ngSwitchCase,*ngSwitchDefault.
Sunday, 29 April 2018
Difference between Interpolation and Property Binding.
in: angular
In this article, We will discuss about What is the difference between Interpolationa and Property Binding.
Well, Interpolation and Property Binding both comes under one way data binding and looks almost Similar but having few basic differences which is as follows,
Interpolation:-
-----------------
i/ Interpolation can be implemented using {}.
ii/ Interpolation supports concatenation of string within a variable.
iii/ Interpolation doesn't support working with boolean type.
Property Binding:-
----------------------
i/ Property Binding can be implemented using [].
ii/ Property Binding does not supports concatenation of String.
iii/ Property Binding support working with boolean types.
Data Binding in Angular 2.
in: angular
In this article, We will discuss about Data Binding in Angular 2.
The relation between Component variable and template[view] is called as data binding.
The main advantage of data binding is Component var value will be given to template and vice versa without manual coding.
Angular 2 supports two type of data binding:-
i/ one way data binding
ii/ two way data binding
i/ one way data binding:-
-----------------------------
The data flow from Component variable to template[view] or from template[view] to component variable is called as one way data binding.
One way data binding can be implemented in 3 ways:
a/ Interpolation
b/ Property Binding
c/ Event Binding
a/ Interpolation:-
--------------------
Providing Component variable value to a string using an expression is called as "Interpolation".
The expression requires double curly braces.
Example:- {{prodid}}
b/ Property Binding:-
-------------------------
Providing Component variable value to html element property is called "Property Binding".
Property binding can be implemented using square bracket [].
Example:- <span [innerHtml]="prodid">
c/ Event Binding:-
----------------------
Providing Component class method to template Control event is called as "Event Binding".
This can flow data from Template to Component.
Event Binding can be implemented using Parenthesis ().
Example:- <button (mouseenter)="m1('Save')">
ii/Two Way Data Binding:-
--------------------------------
Synchronizing data between Component and template is called "Two way data binding".
This will flow data from Component to template and Vice-Versa.
Two way data binding is a combination of Property Binding and Event Binding.
Example:- <input [(ngModel)]="price">
Saturday, 28 April 2018
How to use multiple components in angular 2.
in: angular
In this article, We will discuss about How to use multiple components in angular 2.
First of all, Goto Visual Studio Code.
Open a Folder.
Create package.json file and the file looks like as below,
package.json
------------
{
"name": "multiplecomponent",
"description": "Example Of Multiple Components",
"dependencies": {
"@angular/core": "latest",
"@angular/common": "latest",
"@angular/compiler": "latest",
"@angular/platform-browser": "latest",
"@angular/platform-browser-dynamic": "latest",
"rxjs": "6.0.0",
"zone.js": "latest",
"systemjs": "latest",
"core-js": "latest"
}
}
Goto Integrated Terminal and type "npm install".
Create systemjs.config.js file and the file looks like as below,
systemjs.config.js
------------------
System.config({
map:{
"app":"scripts",
"@angular/core":"node_modules/@angular/core/bundles/core.umd.js",
"@angular/common":"node_modules/@angular/common/bundles/common.umd.js",
"@angular/compiler":"node_modules/@angular/compiler/bundles/compiler.umd.js",
"@angular/platform-browser":"node_modules/@angular/platform-browser/bundles/platform-browser.umd.js",
"@angular/platform-browser-dynamic":"node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js",
"rxjs":"node_modules/rxjs"
},
packages:{
"app":{main:"./app"},
"rxjs":{}
}
});
Create tsconfig.json file and the file looks like as below,
tsconfig.json
-------------
{
"compilerOptions": {
"target": "es5",
"sourceMap": false,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"lib": [
"es2015","dom"
]
}
}
Create "scripts" folder and add app.ts file in it and the file looks like as below,
Create "images" folder and add those images which we were using in app.ts file.
Create "styles" folder and add "componentstyle.css" file (this css file we are using in app.ts file as styleurl) and the file looks like as below,
componentstyle.css
------------------
div{
font-size: x-large;
}
Create "views" folder and add "bodycontent.html" file (this html file we are using in app.ts file as templateUrl) and the file looks like as below,
bodycontent.html
----------------
<div>
Angular Rocks!!
</div>
Create index.html file andthe file looks like as below,
index.html
----------
<html>
<head>
<script src="node_modules/core-js/client/shim.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import("scripts").catch(function(ex){
console.log("Error With SystemJS Loader File");
});
</script>
</head>
<body>
<header>Loading Header...</header>
<br>
<bodyinfo>Loading Body...</bodyinfo>
</body>
</html>
Goto Intergrated Terminal and type tsc
Again type http-server
Goto Browser and run with http://127.0.0.1:8080/index.html".
Monday, 23 April 2018
Module in angular 2.
in: angular
In this article, We will discuss about What is Module in angular 2.
Module is a collection of Components,Pipes and Services.
The class applied with @NgModule decorator function is called as Module.
Syntax : -
------------
@NgModule({
declarations:["",...],
imports:["",...],
bootstrap:[...]
})
class className{}
platformbrowserDynamic().bootstrapmodule(className);
style vs styleUrl in angular 2 component.
in: angular
In this article, We will discuss about What is the difference between style and styleUrl in angular 2 component.
style : -
---------
1/ style can be used to specify the inline style to component.
2/ style doesn't provide intellisense and auto-completion.
3/ style can't be reusable.
styleUrl : -
-------------
1/ styleUrl can be used to specify component style within css files.
2/ styleUrl provide intellisense and auto-completion.
3/ styleUrl can be reusable through components.
Saturday, 21 April 2018
template vs templateUrl in angular 2 components.
in: angular
In this article, We will discuss about What is the difference between template and templateUrl in angular 2 Components.
template:-
-------------
1/ template can be used to specify inline markup.
2/ template doesn't provide intellisense and auto-completion.
3/ template can't be reusable.
templateUrl:-
----------------
1/ templateUrl can be used to specify markup with in html file.
2/ templateUrl will provide intellisense and auto-completion.
3/ templateUrl can be reusable across many components.
node_modules appears empty, you may need to run `npm install` when you run ng server --open in Angular CLI.
in: angular
In this article, We will discuss about node_modules appears empty, you may need to run `npm install` when you run ng server --open in Angular CLI.
Whenever you will create new Project in Angular CLI with "ng new Proj1", then at that time automatically it will create node_modules folder and it will automatically install all the required packages in it.
But when you run "ng server --open", it will show error like node_modules appears empty, you may need to run `npm install` because it is not getting the proper path .
So first of all, we need to Check the path, that is whether we are inside of that project or not in command prompt and then we need to type "ng server --open".
Example:-
---------
Let's Say We created a new Project "AngularApp1" under D:\MyProject\ by using "ng new AngularApp1".
But while running the project, i am inside D:\MyProject\ in command prompt and running with ng server --open then at that time in MyProject it is trying to find out node_modules folder but which is not present. Rather than it is present under "D:\MyProject\AngularApp1" folder.
So Now, In Command prompt we need to switch to "D:\MyProject\AngularApp1" and type ng server --open and which will work fine.
Friday, 20 April 2018
Component in angular 2.
in: angular
In this article, We will discuss about What is Component in angular 2.
Component is a class to combine data,logic and template[View] as one Unit.
The class applied with @Component decorator function is considered as Component class.
Syntax:-
----------
@Component({
selector : Specify element name to component,
template : Specify inline markup to component,
templateUrl : Specify html markup to component,
style : Specify inline style to component,
styleUrl : Specify external style to component
})
class classname
{
variable declarations
method declarations
}Example:-
------------
@Component({
selector : "my-app",
template : "<h2>Welcome to Angular 2</h2>";
style : ["h2{color:red}"]
})
class appComponent
{}Tuesday, 17 April 2018
HelloWorld Example in angular 2 application.
in: angular
In this article, We will discuss about How to Create a HelloWorld Example in angular 2 application.
Create a particular folder name as "HelloWorld" in a particular drive.
Goto Visual Studio Code.
Click on "Open Folder" and Which will open a PopUp Window and there we need to Select "HelloWorld" folder.
In the Explorer Window, It Will Show "HelloWorld".
Click on "HelloWorld" and again Click on New File and give the name of file as "package.json".
package.json
---------------
{
"name":"myproject",
"description":"my angular 5 project",
"dependencies":{
"@angular/core":"latest",
"@angular/common":"latest",
"@angular/compiler":"latest",
"@angular/platform-browser":"latest",
"@angular/platform-browser-dynamic":"latest",
"rxjs":"latest",
"zone.js":"latest",
"systemjs":"latest",
"core-js":"latest"
}
}
goto integrated terminal and click npm install.
After that it will take Some time to install all those files into node_modules folder.
Create new file into "HelloWorld" folder and give the name as "systemjs.config.js".
Create new file into "HelloWorld" folder and give name as "tsconfig.json".
tsconfig.json
---------------
{
"compilerOptions": {
"target": "es5",
"sourceMap": false,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"lib": [
"es2015","dom"
]
}
}
Create "scripts" folder under "HelloWorld" folder.
Create typescript file[main startup file/entry file] into scripts folder.
app.ts
-------
import {Component,NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
@Component({
selector:"my-app",
template:"<h2> Hello World </h2>"
})
class AppComponent{}
@NgModule({
declarations:[AppComponent],
imports:[BrowserModule],
bootstrap:[AppComponent]
})
class AppModule{}
platformBrowserDynamic().bootstrapModule(AppModule);
Create new file into "HelloWorld" folder and give name as "index.html".
index.html
-------------
<html>
<head>
<script src="node_modules/core-js/client/shim.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import("scripts").catch(function(ex)
{
console.log("error with SystemJS module loader file");
});
</script>
</head>
<body>
<h1>Angular First Example</h1>
<my-app>Loading Component...</my-app>
</body>
</html>
Goto Integrated Terminal and type tsc[It Will Compile app.ts into app.js].
In the same integrated terminal type http-server.
Goto Browser and type "http://127.0.0.1:8080/index.html".
Sunday, 15 April 2018
What are the Steps required to Create an angular 2 application?
in: angular
In this article, We will discuss about What are the Steps re quired to Create an angular 2 application.
Step 1:-
---------
Create package.json file with dependencies.
Step 2:-
---------
run npm install
This will read package.json automatically to install node packages provided with dependencies.
Stpe 3:-
---------
Creating js file for systemjs module loader.
This js file should contain mapping of node packages to js files and startup file for execution should be provided.
systemjs module loader will goto application folder, in this folder it will look for startup file for execution,based on component class requirement node package js file will be loaded.
Step 4:-
---------
Create tsconfig.json file.
This file is required for typescript compiler.
Step 5:-
---------
Create ts file with Component and module.
Step 6:-
---------
Create html page to host angular app.
Step 7:-
---------
run tsc with in integrated terminal.
Step 8:-
---------
install http-server as node package.
Step 9:-
---------
run http-server
Step 10:-
-----------
goto browser to run html page using url,
http://localhost:8080/htmlpage
Saturday, 14 April 2018
What are the node packages required for Angular 2 app development?
in: angular
In this article, We will discuss about What are the node packages required for Angular 2 app development.
The node packages are as follows,
1/ @angular/core:-
------------------------
This package will provide core.umd.js file, this file is used to provide common functions and classes used in angular app development.
Ex:- @Componet, @NgModule
2/ @angular/common:-
----------------------------
This package will provide common.umd.js file, this allows service creating and injecting dependencies.
3/ @angular/compiler:-
----------------------------
This package will provide compile.umd.js file, this will render Component template[html] into browser.
4/ @angular/platform-browser:-
--------------------------------------
This package will provide platform-browser.umd.js file.
5/ @angular/platform-browser-dynamic:-
--------------------------------------------------
This package will provide platform-browser-dynamic.js file.
The platform-browser.umd.js and platform-browser-dynamic.umd.js file will run angular app within browser by loading modules along with components.
6/ systemjs:-
---------------
This package will provide system.js file, this is a angular module loader to load modules on demand.
7/ core.js:-
-------------
This package will provide shim.js file, this will implement polyfills to support angular app execution with older version browser.
8/ rxjs:-
9/ zone.js:-
-----------------
This above 2 package will provide data binding support in angular.
The above all Packages we need to use while developing angular app.
How to Setup System for Angular 2 development environment?
in: angular
In this article, We will discuss about How to Setup System for Angular 2 development environment.
Angular System requires node.js,npm and typescript compiler installation.
First We need to install node.js and which is as follows, goto www.nodejs.org and download the software and run it which is given in below picture,
Download the node.js software based on your 32/64 bit.
After that We need to install typescript.
Goto Command Prompt and type
> npm install typescript -g
which will install typescript globally and which is shown in below picture,
Now, System is ready to use for Angular 2 application development.
Thursday, 12 April 2018
Angular 2 Features.
in: angular
In this article, We will discuss about what are the different angular 2 features.
1/ Component Based Architecture:-
--------------------------------------------
Angular Provides Complete Object Oriented Programming Support, this leads to reusability, unit testable and loosely coupled programming.
2/ Data Binding Support:-
---------------------------------
The relation between Class Variable and Html Control is called data binding, in this case the variable value will be given to html control and vice versa without
manual coding.
3/ Uses Html element properties and events:-
------------------------------------------------------
Angular Uses Html element properties and events like onclick but here the syntax is like (click).
4/ Angular is available for Client Side and Server Side Programming:-
-----------------------------------------------------------------
Angular can be used for server side programming with the help of Angular Universal , it can be used with Node.js and asp.net core for Server Side Programming.
5/ More Languages Support:-
-----------------------------------
Angular Supports different language for app development.
* javascript5[ES5]
* javascript6[ES6|ES2015]
* typescript
* dart
6/ Mobile App Support:-
------------------------------
Angular can be used for mobile app development using ionic 2 framework.
7/ Builtin Validation Support:-
-------------------------------------
Angular Supports 2 types of validations.
i/ MDF(Model Driven Form) validations :-
-----------------------------------------------------
this will apply validations to class properties.
ii/ TDF(Template Driven Form) validations:-
-----------------------------------------------------
this will apply validations to webpage controls.
8/ Routing Support:-
----------------------------
Routing will provide navigation between webpages.
9/ Service Creation is Simple:-
--------------------------------------
Class with business logic is called Service, this will be reusable across different components.
10/ Dependency Injection Support:-
-------------------------------------------
Injecting Class dependencies through a constructor is called "dependency injection".
11/ Compile time typechecking:-
----------------------------------------
Angular Supports Compile time datatype checking based on datatypes by typescript.
12/ Ajax Support:-
-----------------------
Angular app can call REST API methods using ajax to communicate with database.
Monday, 9 April 2018
Difference between Angular and Angular JS?
in: angular
In this article, We will discuss about What is the difference between Angular and Angular JS.
Angular :-
----------
1/ Component based development With Object Oriented Programming is Possible.
2/ Datatype Support with Compile time type Checking is Possible.
3/ Can be used for both Server Side as well as Client Side Programming.
4/AngularSupports JavaScript/TypeScript/EcmaScript 5/6.
Angular JS :-
-------------
1/ Component based development With Object Oriented Programming is not Possible.
2/ No DataType Support, with Compile time type Checking is not Possible.
3/ Can be used for only Client Side Programming.
4/ AngularJS Supports only JavaScript/EcmaScript 5.
