We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Getting started with Angular 2 in ASP.NET Core with TypeScript using Visual Studio 2015

Setup Environment

The following pre-requisites are needed to getting started with Angular 2 application ­­­­­in ASP.Net MVC 6.

Visual Studio 2015: If you already have a copy of Visual Studio 2015 installed, you need to update Visual Studio 2015 with Update 3.

Or

Download Visual Studio Community 2015 for free.

.NET Core: You need to install .NET core, which can be downloaded from the following link:

.NET Core 1.0.0 - VS 2015 Tooling Preview 2 (Run apps with the .NET Core runtime).

Create an empty ASP.NET Core project

Open Visual studio 2015 and select ASP.NET core web Application and name it as ESAngular2Demo and select “Empty” project template. 

 

Creating simple web page

Let’s create HTML file named index.html under wwwroot folder.

Right click on wwwroot folder and select Add New Item option then create index.html file. This HTML page will act as default page. Copy below code into html page.

 

For ASP.NET Core to serve static files, we need to add StaticFiles middleware in Configure method of Startup.cs page.

project.json is redesigned to make it better, we have Static Files middleware to serve static assets like HTML, JS files etc.

[Startup.cs]

 

Add below package to the project.json file for using static files.

[project.json]

 

Now right click on project “ESAngular2Demo” and choose Restore Packages to restore the required packages. Then Build and run project it will render the html page.

 

Start with Angular 2 in ASP.NET Core

Before start Angular 2 in ASP.NET Core refer 5 MIN QUICK START for getting started with Angular 2.

Adding NPM Configuration file for Angular 2 packages

Right Click on “ESAngular2Demo “, add new file “NPM Configuration File, by default package.json is added to ASP.NET Core project. This acts Node Package Manager (NPM) file, which is must for adding packages for Angular 2 application.

Add the below Typescript configuration (tsconfig.json) and typings.json files by right click the project “ESAngular2Demo”and choose Typescript JSON configuration file.

[tsconfig.json]

 

[typings.json]

 

Copy and paste below configuration in package.json file.

[package.json]

 

After saving this, Visual Studio starts restoring the packages. It would download all the packages mentioned in the above package.json.

If packages are not restored properly, right click the project and open in Windows Explorer and install node packages using command prompt. Run the below command in project location.

npm install

 

 

After installation, the restored packages look like below screenshot.

Moving files using GULP

After NPM install of Angular 2 in ASP.NET Core project, notice node_modules folder has all packages needed.

wwwroot is web root folder, so it’s essential to move all needed files to this folder. In index.html we can refer them from this location.

Right Click on “ESAngular2Demo” project, add new “Gulp Configuration File” naming it gulpfile.js and copy below code into it.

[gulpfile.js]

 

Adding Typescript Configuration file

Include Typescript Configuration file which does work of transpiling typescript files into JavaScript.

Create “scripts” folder under root of project “ESAngular2Demo and add Typescript configuration (tsconfig.json) and typings.json files into it. Copy below code snippet and paste it into the corresponding files.

[tsconfig.json]

 

[typings.json]

 

Adding EJ Components

Create app.component.ts and main.ts files under scripts folder. Copy below code into typescript files to render ejDialog components.

[app.component.ts]

 

[main.ts]

 

After finished above two steps run default gulp task once, which is in “Task Runner Explorer”, otherwise the below mentioned folders will not be created.

 

  • appScripts folder containing transpiled Typescript files.
  • libs folder has all Angular 2 package files needed to get started. We used Gulp tasks to achieve this.

Add systemjs.config.js file under “wwwroot” folder to load Angular 2 script files.

[systemjs.config.js]

 

Adding HTML file

In index.html file copy below code to render “Dialog” component. Create “deps” folder under wwwroot” and add all EJ dependencies scripts and css files under deps folder.

[index.html]

 

Finally, you will get following output:

Download sample demo here.

Article ID: Published Date: Last Revised Date: Platform: Control:
7062 08/25/2016 08/25/2016 JavaScript General
Did you find this information helpful?
Comments
Eric Brunner Feb 04, 2017
Is there no easier way to incooperate EJ into a VS2015 project? 
Reply
Eric Brunner Feb 04, 2017
Is there no easier way to incooperate EJ into a VS2015 project? 
Reply
Abinaya Subbiah [Syncfusion] Mar 02, 2017

Hi Eric,

 

Thanks for your interest Syncfusion Products.

 

We are working on improvement in our UG documentation to reduce the steps to configure Angular 2 application in Visual Studio environment. We are also working on to implement the Visual Studio Templates which is helpful to create the entire configuration in single shot.

 

Regards,

Abinaya S

Reply
Add Comment
You must log in to leave a comment

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.