Angular 2 in ASP.NET Core 1.0 using Visual Studio Code and TypeScript

Angular 2Angular 2 in ASP.NET Core 1.0 are going to redefine web development experience for developers.

Thinking of creating ASP.NET website outside Visual Studio IDE was nightmare, but with advent of ASP.NET Core 1.0 as truly open source cross-platform technology it so exciting to create these apps without Visual Studio IDE

In this tutorial I will summaries steps of  using Angular 2 in ASP.NET Core 1.0 using Visual Studio Code as editor not as IDE. These steps can be similar if want to work on Linux or Mac OS.

Updated to Angular 2 RC1 on ASP.NET Core 1.0

What we will learn?

1. Create ASP.NET Core 1.0 web app using ASPNET Yeoman
2. Create package.json and npm install
3. Moving Angular 2 files to wwwroot using Gulp tasks
4. Creating TypeScript project using tsconfig.json
5. Creating Gulp task to transpile TypeScript
6. Adding Gulp watch tasks for any changes in code
7. Configure Build Tasks
8. Running application using lite-server

So let’s get started, I used Windows 7 OS with NPM (Node), TypeScript, Gulp, lite-server installed globally. These steps might similar in Mac OS or Linux or other Windows OS. ASP.NET Core 1.0 needs to set up as well.

Step 1: Create ASP.NET Core 1.0 web app using ASPNET Yeoman generator

It’s interesting to know that ASP.NET is not confined to Visual Studio IDE alone, its must to refer Create web applications using Yeoman in Visual Studio Code

Step 2: Create package.json, add Angular 2 and other packages then run npm install

Angular 2 along with other dependent packages needs to be included in package.json. List of packages needed can be found from 5 min quickstart of Angular2 website

Create package.json file using ASPNET yeoman generator or manually create and copy below code. After that open folder containing project in command prompt and run npm install to install all the packages.

Along with Angular 2, I have included bootstrap and Jquery packages so that I can use them later.

 

Angular 2

package.json and NPM install (Older Image)

If you just observe now in explorer, node_modules folder will created with all packages downloaded as per package.json

Step 3: Moving Angular 2 files to wwwroot using Gulp tasks

In ASP.NET Core 1.0 the wwwroot folder acts website root folder, so all static files like scripts, images, CSS etc should be placed this folder.

Now that Angular 2 packages were downloaded into node_modules folder, which contains numerous files. We are not really interested to include them project as well final deployment related files.

With this intention in mind, we will move files from node_modules to wwwroot using GULP tasks. It will automate copying of the files.

The code is provided in following steps, please refer Step 6

Step 4: Creating TypeScript project using tsconfig.json

Angular 2 with TypeScript is something interesting to work with, in this web application we need TypeScript virtual project by including tsconfig.json file.

tsconfig.json is TypeScript configuration file which does tell compiler what needs to be with TS files.

Create a folder “scripts“, add tsconfig.json using yo commands or add the file manually. Copy below code to tsconfig.json. It tells TypeScript compiler to move tranpiled TS files to “outDir” by targeting them es5 standards.

Any TS files in node_modules is excluded, commonjs module loading is selected while initializing the JS files.

Step 5: Creating Gulp tasks to transpile TypeScript code

However if we had used Visual Studio IDE then this step was not necessary because IDE would have performed this work of transpile (compiling) TypeScript files to JavaScript files.

We are working with Visual Studio Code, its just code editor so need to tell it to do transpile work for us because ultimately JS files are the one’s that need to be referred in HTML files.

The coolest option for this is to use Gulp-TypeScript package to perform this operation. After installing Gulp-Typescript, we need to tasks in gulpfile.js so that we can do transpile work.

I will be explaining gulp tasks in Step 6

Step 6: Adding Gulp watch tasks to look for changes

Imaging what if do any code changes in either Javascript, CSS or mostly importantly TypeScript files(they are doing actual Angular 2 work) and those changes are reflected instantly on browser. Yes, this is possible using Gulp tasks which is below.

There are various ways to this, but Gulp Tasks are pretty easy to understand. Create gulpfile.js file and copy code

The gulp tasks code under is self explanatory with commented lines, to give much better visual representation go through below image.

You might think so much get started with Angular 2 in ASP.NET Core 1.0, not really this is one time operation; once done you can just create html pages, add TypeScript to work with Angular 2.

Angular 2

Gulp Tasks for Angular 2 in ASP.NET Core 1.0

Step 7: Configure Build Tasks in Visual Studio Code

If we want to run all gulp tasks above on Alt+Cntrl+B (i.e. Build), we need to tasks.json file and add these gulp tasks so that we can work with them.

 tasks.json is Task Runner for Visual Studio Code

Just do Alt+Cntrl+B (i.e. Build), it will prompt that no task runner is configured do you want one. Just click on “Configure Task Runner” and copy below code in it.

Angular 2

Configure Task Runner – tasks.json (older image)


Step 8: Adding Angular 2 code & refer them in index.html

From Angular 2 quick start link, it tells to create “app.ts” and “boot.ts” which acts as Angular component and bootstrap respectively.

Just copy below code into app.ts, boot.ts and index.html. We are set now, next step is running application.

9. Using Systemjs to load Angular 2 scripts

If you observe “index.html” you will notice that we are referring systemjs.config.js, but where are Angular 2 related files. This is were the Systemjs configuration file will help us to load all necessary files. Create systemjs.config.js and copy below code.

Configuration code is pretty simple – Looks for @Angular folder for packages, loads RxJs, hand written scripts related to application.

 

10. Running application using lite-server

I prefer using lite-server when working with Visual Studio Code is that it does lots of things like open browser, syncing any changes and more.

When in VS Code, press F1 –> go for “Run Task” and click “default” – Gulp Task described above. It does create “libs“, “appScripts” folder under wwwroot; ouput window shows that Gulp watch task is running and looking for changes.

Angular 2

Running Gulp Tasks in VS Code

Open wwwroot in console and type “lite-server” to see magic, everything works perfectly !!

Everything get reflected on save !!

Everything get reflected on save !!

This project is available on Github, have a look.  Also Checkout Angular 2 in ASP.NET Core 1.0 using Visual Studio 2015 IDE.

You may also like...

29 Responses

  1. Stephen Michaels says:

    I’m getting No GulpFile Found when trying to run the task. What am I doing wrong?

  2. Gravinaut says:

    My error! Thank you Mithun.

  3. Gravinaut says:

    Running the build always stalls after “Starting ‘setup’…”. It does not reach “Starting ‘ts’…”. Same thing when fetching the zip from github. Any ideas?

  4. James says:

    How can the generated javascript files be debugged? I’m using Edge browser. I’ve tried attaching VS 2015 to the MicrosoftEdgeCP.exe process but breakpoints set in Album.js are unknown to VS. I found some suggestions about enabling source maps
    http://stackoverflow.com/questions/28834065/how-to-debug-typescript-in-visual-studio-2015-asp-net-5
    but didn’t work for me.

  5. gamelover42 says:

    In both the bower.json and npm’s package.json spec it states that package names must be lower case.

    https://docs.npmjs.com/files/package.json#name

    https://github.com/bower/spec/blob/master/json.md#name

  6. @Mithun

    Maybe I’m missing something but when you run the site using lite-server you are you are running a node application, you are not running an ASP.NET Core application as advertised in the blog’s title.

    • ASP.NET core is designed so that it works as cross platform web technology, in this lite-server can also be used run application. This is not only way but this article shows various technologies can be used along.

  7. Nick says:

    I’m a beginner on using angular2, Visual Studio code, and all dependencies for npm.
    I fallow all your steps but, Where will be created all *.json config files ? (on same directory created with yeoman)
    Project structure missing. (will be OK, because easy to fallow the steps)
    At the end no js files where generated from the *.d.ts files

    Will be more efficient steps like,

    1) Create directory “Demo”
    2) run: npm yo -g
    3) create file “start.json”
    4) replace content from “start.json” with next lines ……
    5) run; npm gulp -g
    6) run …
    7) run task default.

    Reason, Here are many tehnologies used and many of us (“developers”), need in most cases to create an app and add some ts file and routers. Maybe sources for a Project template? (easy to start)

    Thanks.

    • Hmmm… I understand so many technologies involved. I have provided github repo link so that others can use. Did you try that?

      • Nick says:

        I have create a batch file that will compile all project from cmd line, maybe it’s useful. (in Windows must be run from Command line as administrator). put next line in directory Angular2AspNetCoreDemo-master on a bach file. e.g. (VSCode.bat)

        cls
        ECHO OFF
        ECHO Run as Administrator
        ECHO ————————————————————–

        ECHO Change Path to current directory

        set @_dir=%~dp0
        cd %_dir%
        REM Names in project
        set @generated = generated
        set @projectName = DemoApp

        ECHO Updating npm, please wait
        for /f “delims=” %%i in (‘npm install npm -g’) do set output=%%i

        ECHO Install/Updating Yeoman, please wait
        for /f “delims=” %%i in (‘npm install -g yo’) do set output=%%i

        ECHO Install ASPNET Yeoman generator, please wait
        for /f “delims=” %%i in (‘npm install -g generator-aspnet’) do set output=%%i

        rem Future options

        rem ECHO Create directory
        rem mkdir %@generated%
        rem ECHO Generate application with yeoman
        rem cd “%@generated%”
        rem for /f “delims=” %%i in (‘yo aspnet’) do set output=%%i
        rem yo aspnet

        rem ECHO Restore DNU packages ?????

        rem ECHO Create Startup.cs
        rem xcopy /y %@_dir%%@projectName%\Startup.cs %@_dir%data\Startup.cs
        rem ECHO Create on wwwroot file index.html
        rem copy /y NUL %@_dir%%@projectName%\wwwroot\index.html >NUL

        ECHO Install npm, please wait
        for /f “delims=” %%i in (‘npm install’) do set output=%%i

        ECHO Install npm, please wait
        for /f “delims=” %%i in (‘npm install gulp -g’) do set output=%%i

        rem Need litle -server ? missing dev configuration file.
        rem ECHO Install litle-server
        rem for /f “delims=” %%i in (‘npm install lite-server –save-dev’) do set output=%%i

        ECHO Set nodeJs complete

  8. Leroy Lim says:

    Hi, how about can I add Angular Routing? Please advise.

    Thanks.

  9. CT CHANGCT says:

    Hi Mithun,

    The step-by-step guide is awesome, and it work perfectly. But when I added a launch.json and try to debug the code. I encounter the following runtime exception. Do you know what I have missing?

    reflect-metadata shim is required when using class decorators

  10. Simon says:

    Hi ! This is a very good tutorial but I’m convinced you forgot to tell about the setup of the typings you are referencing in boot.ts. The angular’s “5 minutes tutorial” is explains those in an appendix but it’s not obvious. In addition to your tutorial, I personnaly installed the “typings” dev dependency and the scripts they talk about in package.json :
    “scripts”: {
    “start”: “concurrent \”npm run tsc:w\” \”npm run lite\” “,
    “tsc”: “tsc”,
    “tsc:w”: “tsc -w”,
    “lite”: “lite-server”,
    “typings”: “typings”,
    “postinstall”: “typings install”
    }

    I then ran “npm run typings — list”, and then the typings got created automatically.

  11. boban984 says:

    Hi Mithun

    Could you do a more real type scenario.
    With some structure to the project like different folders for different sections.
    Something like :
    http://prntscr.com/a6pvt7
    or
    http://prntscr.com/a6pvsx

  1. March 7, 2016

    […] you’re interested running Angular 2 in Visual Studio Code read this […]

  2. July 2, 2016

    […] Angular 2 in ASP.NET Core 1.0 using Visual Studio Code and TypeScript […]

Leave a Reply