Angular2 application in Visual Studio Code

In this article we will learn about how to set up Angular2 application in Visual studio code . So we will discuss it step by step. We are not discussing about the typescript , Angular 2 fundamentals or Visual studio code . You must have some basic idea before go through this project set up.

Step 1: 

   First of all we need to install two things
   a. node.js (You can download it form here  https://nodejs.org/en/)
   b. Visual studio code ( You can download it from here https://code.visualstudio.com/download)

So these two things is must necessary for project set up.

Step 2:

So after installing it you can open the Visual studio code. Yow will see the screen like this.
   
                       

Step 3 :

 Then please create a folder by clicking on the Open Folder button. Please follow the screenshots.






Step 4 :

Once you  create the folder then we will go for project configuration set up. As we know we need some configuration files for developing the Angular 2 application . So here is the list of configuration files .
A.   package.json
B.   tsconfig.json
C.   typings.json

Please create the file and copy the content from here.

A. package.json file content

   {
"name": "angular-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc&& concurrently \"tsc -w\" \"lite-server\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"@angular/common": "~2.1.0",
"@angular/compiler": "~2.1.0",
"@angular/core": "~2.1.0",
"@angular/forms": "~2.1.0",
"@angular/http": "~2.1.0",
"@angular/platform-browser": "~2.1.0",
"@angular/platform-browser-dynamic": "~2.1.0",
"@angular/router": "~3.1.0",
"@angular/upgrade": "~2.1.0",
"angular-in-memory-web-api": "~0.1.5",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"
},
"devDependencies": {
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3",
"typings": "^1.4.0"
}
}

B. tsconfig.json file content.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"watch": true ,
"noStrictGenericChecks": true
} ,
"compileOnSave": true
}

c. typings.json file content.
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160909174046"
}
}

So once you done this process we will go to next step.

Step 5 :

Now we will install all the dependencies packages for Angular 2 by npm . So please open the npm command and go to the project path and run the command .
                                              'npm install'


     It would look like this .


Once you execute the command you will see the following folders in project folder like this.



Step 6 : 

 Now the project structure will look like this Image.




Please ignore other files. We will add those in next steps.

Then we will add  "app" folder and on that folder will create systemjs.config.js file inside the app folder . This would be content of your systemjs.config.js file. This systemjs.config.js file is used to load the modules , we have other way to load the modules like webpack , gulp etc but here we are using systemjs.config.js file .

/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function(global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);


Then your project  structure will look likes this.




Step 7 :
     So till now we have only  added some project configuration files and one file for load the modules . But now we will add some typescript file and one html file to show some messages after successfully  project set up.

 Step 8 :

    Inside an app folder, create component name as app.component.ts as shown below.

import {Component} from '@angular/core';

@Component({
selector : 'my-app',
template: '<h1>Hello this is my first Angular 2 applications. </h1>'
})

export class AppComponent {}


Step 9 :

Create module name as app.module.ts.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({

imports : [BrowserModule],
declarations : [AppComponent],
bootstrap : [AppComponent]

})

export class AppModule {}



Step 10 :

Create the app.main.ts file .

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Step 11 :

 Now we will add the index.html file to render the message.

<html>
<head>
<title>Angular 2 Application</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link rel="stylesheet" href="styles.css">-->
<base href="/">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="app/systemjs.config.js"></script>
<script>
System.import('app/app.main.js').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading my Angular 2 applications...</my-app>
</body>
</html>

So when index.html will load it will call main.js(created by tsc compiler) file and from the main.js file component file will get called .

Step 12:

Now we have completed the project set up and application is done .
So to run the application through visual studio code we need to configure the lunch.json and task.json.

A. Launch.json 

First, press F1 or CTRL+SHIFT+P in Visual Studio code and type launch in the address bar on the top of the editor, select node.js file from the selection list. Once you select launch.json file, it will be created under .vscode folder.

In order to launch Angular2 Application, launch.json will use the lite-Server, which is defined in node_modules. Change the program property from “${workspaceRoot}/app.js” to “${workspaceRoot}/node_modules/lite-server/bin/lite-server”.

B. task.json 

   Press F1 or CTRL+SHIFT+P and type “task”, select “Configure Task runner” and subsequently use Typescript-Watch Mode.This will create tasks.json, which will be created under .vscode folder.

Remove the arguments from argsproperty, as we don’t require it now and add new property as “watch”:true. Now, we are ready to run Application. To start an Application, type "npm start" command. After build completes, click F5.


Finally you will see the screen .




So this was our angular 2 application in visual studio code . Hope this will help.

Please like this blog if it really helped  you.

Comments

Post a Comment

Popular posts from this blog

The input is not a valid Base-64 string as it contains a non-base 64 character, more than two padding characters, or an illegal character among the padding characters.

I was trying to upload a file in client side and sending back the data from the client to Web API controller by angular service . Step 1 : I was doing it by. (It was bot the complete code )   function saveFile(file, cb) {     var readerObj = new FileReader();     readerObj .readAsDataURL(file);     readerObj .onload = function () {         savedFileDataAsBase64Format(readerObj .result, file.name,cb);     };     readerObj .onerror = function (error) {         alert("Error in uploading the file.");     }; Step 2 :     This is my Web api controller action method.        [HttpPost]         [Route("api/FileInput/SaveBase64FileData/{fileName}")]         public void SaveBase64FileData(string fileName, [FromBody]string fileData)         {     ...
Read more

The transaction is aborted or Failure while attempting to promote transaction.

This error is generally produced while you working on the  Linq query with Entity framework and there was some other system configurations like Visual studio 2015. Entity framework version 4. C# 4.5 But while I checked the Inner exception I got the following message  "There is already an open DataReader associated with this Command which must be closed first" So in my case there was some WCF services and from the WCF services I was extracting the data by Linq query . This was code  Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 using (TransactionScope scope = new TransactionScope()) { using (CentralisedData_DataDataContext db = new CentralisedData_DataDataContext()) { // Some code was there } db.SubmitChanges(); ...
Read more

Unable to load one or more breakpoints in Visual studio.

Image
Those who are working on Visual studio IDE they might have faced this type of error while opening any existing project . Sometimes by rebuild the solution or removing the break points the issue is get resolved .  So this problem/ issue is caused due to various reason but among those reason one of them is worked for me .  Here is my solutions. It worked for me . Please follow my steps. Step 1:    Please go to the physical folders/files of your solution . Just right click of the solution and from the options choose "Open Folder is File Explorer". Please check the attached Image. Please click on Image to view it properly Step 2:     Then you will see the files like this. Then please check the if the "Hide Items" checkbox is checked or not . If not checked please check that one. Then you will   see .vs folder .                               Please click on Im...
Read more