Posts
22
Comments
75
Trackbacks
0
June 2016 Entries
AngularJS2 on ASP.Net Core using TypeScript Part 1 - Preparing the Seed Project

 

Starting to play with technologies that are not yet released is a pain in the a#$%. First, because big changes can occur thus breaking our proof of concept projects, Second, looking for a good resource online is not as rich when looking for resources for products that are already released, Third, the list of pains goes on …

To start the series we will begin by preparing what we need. On Part 2 of  the series, We will start creating our first AngularJS2 on ASP.Net Core using TypeScript

Updates :

July 2, 2016

ASP.NET Core 1.0 is now released, so I updated the VS and Tools update links
Added an item to update TypeScript Manually


Table of Contents

1. Upgrade your Visual Studio 2015 to Update 3 (released June 27, 2016)
2. Download and Install VS Tools Update
3. Download, Install and Configure latest NodeJS Binaries
4. Download, Install and Configure latest GIT Binaries
5. Download and Install latest Web Compiler Extension for VS 2015
6. Download and Install TypeScript for Visual Studio 2015
7. Update TypeScript

 

Procedures

1. Upgrade your Visual Studio 2015 to Update 2

- download Link https://www.visualstudio.com/en-us/news/releasenotes/vs2015-update3-vs

2. Download and Install VS Tools Update

- download link https://go.microsoft.com/fwlink/?LinkId=817245

3. Download, Install and Configure latest NodeJS Binaries

https://nodejs.org/en/

- Configure Visual Studio to use the newly installed NodeJS instead of the depracated NPM installed with VS. (Uncheck .\node_modules\bin and add a new item “C:\program files\nodejs\”)

image

- If you are using a proxy server configure NodeJS to use your companies proxy

Setup Proxy
---------------------------------------------------------
npm config set proxy http://proxy.com:8888
npm config set https-proxy http://proxy.com:8088

Remove Proxy
---------------------------------------------------------
npm config rm proxy
npm config rm https-proxy

 

 

4. Download, Install and Configure latest GIT Binaries

https://git-scm.com/downloads

- Configure Visual Studio to use the newly installed GIT instead of the depracated NPM installed with VS. (Uncheck $(VSINSTALLDIR)\Web\External\git and add a new item “C:\Program Files\Git\bin”)

image

- If you are using a proxy server configure GIT to use your companies proxy

Setup Proxy
---------------------------------------------------------
git config --global http.proxy http://proxy.com:8088

 

Remove Proxy
---------------------------------------------------------
git config --global --unset http.proxy

 

5. Download and Install latest Web Compiler Extension for VS 2015

https://visualstudiogallery.msdn.microsoft.com/3b329021-cd7a-4a01-86fc-714c2d05bb6c

 

6. Download and Install TypeScript for Visual Studio 2015

https://www.microsoft.com/en-us/download/details.aspx?id=48593

7. Download latest typescriptService.js file from link below and replace the file on “C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript”

https://github.com/Microsoft/TypeScript/tree/master/lib

 

 

NOTE: It is a good idea to have the latest GIT and NODEJS binaries, because Visual Studio 2015 is shipped with an older GIT and NodeJS binaries, you might encounter some errors if you are not going to have the latest versions

Posted On Friday, June 24, 2016 5:46 PM | Comments (5)
AngularJS2 on ASP.Net Core using TypeScript Part 2 - Our First App

 

On Part 1 we started preparing the stage. If you still haven't done so, please visit http://wblo.gs/lRz

On this Part of the series we will start building our first AngularJS2 on ASP.Net Core using Typescript. On Part 3 we will start coding our own Directives (component that can help us change the appearance or behavior of an HTML elements)

Note

Original Article is from AngularIO Site - https://angular.io/docs/ts/latest/quickstart.html 
I wrote this blog entry for those who want to begin doing Angular using ASP.NET Core 1.0 as a backend.

Updates

July 2, 2016 - ASP.NET CORE is now RTM and AngularJS2 RC4 is released, Updated some scripts below

Procedures Summary

  • Create a new ASP.NET Core Web Application
  • Add package.json (package.json)
  • Add a Gulp file
  • Add a typings.json file
  • Install typings
  • Add a tsconfig.json file – This will contain our TypeScript configurations
  • Create an app folder that will house all of our AngularJS2 codes
  • Create the following files within app folder
  • Create systemjs.config.js
  • Create a css folder and add a new scss file with the following code
  • Configure compilerconfig.json (automatically generated after compiling the scss file) to send css files to wwwroot/css folder
  • Create index.html
  • Edit startup.cs
  • Configure the project to use index.html as a startup page

 

PROCEDURES

1. Create a new ASP.NET Core Web Application

- File new project

image_thumb[11]

- Select Web API

image_thumb[12]

2. Add package.json (package.json)

- Open Solutions Explorer (CTRL + W then S)

- Select the your project name within src folder

image_thumb[13]

- Add a new item (CTRL + SHIFT + A)

- On the upper right side of the screen type package, this will filter the main window

image_thumb[15]

Update the contents of the file with the following code and save

{
    "version": "1.0.0",
    "name": "asp.net",
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "systemjs": "^0.19.31",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "^5.0.0-beta.9",
    "symbol-observable": "1.0.1",
    "zone.js": "0.6.12",
    "angular2-in-memory-web-api": "^0.0.14",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.1.0",   
    "gulp": "^3.9.1",
    "rimraf": "^2.5.2"

  }
}

After saving package.json, Visual Studio will use NPM to download the files required by the dependencies and devDependencies you specified.

image_thumb[16]

On your local drive, you will have a copy of the different items you included in your package.json file

image

image

3.  Add a Gulp file

image

- Update the contents of the file with the following code and save

var gulp = require('gulp');
var rimraf = require('rimraf');

gulp.task('default', function () {
    // place code for your default task here
});

gulp.task('clean:lib', function (cb) {
    return rimraf('wwwroot/lib/', cb);
});

gulp.task('copy:lib', function () {
    return gulp.src('node_modules/**/*')
    .pipe(gulp.dest('wwwroot/lib/'));
});

- right click on gulp.js and select Task Runner

image

- click refresh(upper left corner of the task runner explorer )

image

image

- right click on “copy:lib” then select RUN

- After the task runner finishes you will be able to see that the npm files previously downloaded/copied from step 2 will also be copied to wwwroot folder

image

4. Add a typings.json file

image

- Update the contents of the file with the following code and save

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160621231320"
  }
}

5. Install typings

- Open command prompt

- go to the path where your typings.json file is located

- use the following command to install the items we added in typings.json

typings install

- use the following command if you are behind a proxy

typings install –-proxy http://proxy.com:8888

- you will now have a typings folder containing the objects we included on our typings.json file

image

6. Add a tsconfig.json file – This will contain our TypeScript configurations

image

- Update the contents of the file with the following code and save

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "wwwroot/app/"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

6. Create an app folder that will house all of our AngularJS2 codes

image

7. Create the following files within app folder

app.component.js

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

 

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';

bootstrap(AppComponent);

- js files will be generated under wwwroot\app folder as a result of our tsconfig.json after saving the ts files we created above

image

8. Create systemjs.config.js inside wwwroot folder

- Update the contents of the file with the following code and save

/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        '@angular': 'lib/@angular',
        'angular2-in-memory-web-api': 'lib/angular2-in-memory-web-api',
        'rxjs': 'lib/rxjs',
        'symbol-observable':'lib/symbol-observable'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
        'symbol-observable': { main: 'index.js', defaultExtension: 'js' }
    };
    var ngPackageNames = [
      'common',
      'compiler',
      'core',
      'forms',
      'http',
      'platform-browser',
      'platform-browser-dynamic',
      'router',
      'router-deprecated',
      'upgrade',
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
    var config = {
        map: map,
        packages: packages
    };
    System.config(config);
})(this);

9. Create a css folder udner the project folder and add a new scss file with the following code

main.scss

$font-stack: Arial, Helvetica, sans-serif;
$primary-color: #336699;
$font-size:250%;
$margin:2em;

h1 {
  font: $font-size $font-stack;
  color: $primary-color;   
}

body {
      margin: $margin;
}

- right click on main.scss and select Web Compiler then Re-compile file, This will generate main.css

image

main.css and main.min.css will be generated automatically

image

10. Configure compilerconfig.json (automatically generated after compiling the scss file) to send css files to wwwroot/css folder

[
  {
    "outputFile": "wwwroot/css/main.css",
    "inputFile": "css/main.scss"
  }
]

-css files should now be automatically generated under wwwroot/css/

image

11. Create index.html Inside wwwroot folder

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

12. Edit startup.cs – add the code below (BOLD)

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            loggerFactory.AddConsole(Configuration.GetSection("Logging"));
            loggerFactory.AddDebug();
          
app.UseStaticFiles();
            app.UseMvc();
        }

- click the word UseStaticFiles() and press CTRL + .  and select “Add package Microsoft.AspNetCore.StaticFiles 1.0.0

image

13. Configure the project to use index.html as a startup page

- Open Project>Properties and open Debug Tab and set Launch URL: index.html

image

14. Run the Project by pressing F5

image

 

Additional References/Notes

package.json - https://docs.npmjs.com/files/package.json
gulp.js/grunt/gulp/webpack -
https://npmcompare.com/compare/browserify,grunt,gulp,webpack
rimraf – This will traverse a folder and delete objects, similar to linux’ rm –rf command
taskrunner – task runners help developers to automate tasks by using different tools like GULP, BOWER
package.json - A package.json file contains meta data about your app or module. Most importantly, it includes the list of dependencies to install from npm when running npm install

 

Please feel fee to comment . . .

Posted On Friday, June 17, 2016 7:01 PM | Comments (4)
Tag Cloud