Skip to main content

Asp.net core integration with angular2


This is a tutorial to get your aspnet core project integrated with Angular2.  I'm using VS2015 community edition.

Code can be download from here. Press F5 and browse to http://localhost/index.html to see your Angular2 in action.

Long story ......begins.

First thing you gotta do is create an ASP.Net core project. Here I just used MVC project and click next till the project is created. I did this because this project automatically includes static files configuration in the owin pipeline. It hard to setup using blank project because you need to get the dependencies right.

Next you need to modify startup files to allow serving of index.html static files.



Next I created the package.json file. It's pretty much the same as Angular2 Quickstart example.



VS2015 might try to resolve project dependencies from now and you probably have to wait for a bit.

Add another file called tsconfig. Again copy and paste job.



Next create a gulp.js files as shown below :-



We wanted to copy the required javascript files from node_modules to a libs directory in aspnetcore's wwwroot folder.

Goto wwwroot and create file called index.html with the following contents.



Finally we need to add our angular components. Create a folder called app in wwwroot. You can copy and paste from angular quickstart cuz that's what i did.

In app folder, create app.component.ts, app.module.ts, main.ts.







Finally, we need to have our systemjs.config.js file in our project.



From the command prompt, run "npm start" -> as this process is required to start typescript automatic compilation from .ts to .js file.

If you encounter issue like TS2304 : Cannot find name 'set' - please try :

npm install --save-dev @types/core-js










Comments

Popular posts from this blog

Android Programmatically apply style to your view

Applying style to your view (button in this case) dynamically is pretty easy. All you have to do is place the following in your layout folder (res/layout)
Let's call this file : buttonstyle.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" > <shape> <solid android:color="#449def" /> <stroke android:width="1dp" android:color="#2f6699" /> <corners android:radius="3dp" /> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape> </item> <item> <shape> <gradient android:startColor="#449def" a…

OpenCover code coverage for .Net Core

I know there are many post out there getting code coverage for .dotnetcore. I'm using opencover to address this needs.

In case, you do no want to use opencover and wanted to stick with vs2015 code coverage, you can try to copy Microsoft.VisualStudio.CodeCoverage.Shim.dll from C:\Program Files (x86)\Microsoft Visual Studio 14.0\Team Tools\Dynamic Code Coverage Tools\coreclr\ and drop it into your project "bin\Debug\netcoreapp1.0" folder.  Please note : you need to be on VS2015 Enterprise to do this. 

To get started, I guess we need to add OpenCover and ReportGenerator for our test projects, as shown in diagram below :-



When nuget packge gets restored, we will have some binaries downloaded to our machine and we going to use this to generate some statistics. I think the biggest issue is to getting those command lines work.

In dotnetcore, we run test project using "dotnet test" (assuming you are in the test project folder - if not please go there)  So we add this …

DataTable does not have AsEnumerable

I have problem locating my AsEnumerable extension method in my DataTabe (System.Data). Thank god for this post by Angel
(http://blogs.msdn.com/angelsb/archive/2007/02/23/does-not-contain-a-definition-for.aspx)

I was able to find this method once i have added reference to the following assembly.

C:\Program Files\Reference Assemblies\Microsoft\Framework\v3.5\System.Data.DataSetExtensions.dll

Try to do a dummy Build and you should be able to get it.