January 2018 : Instructor-led Online Course in ASP.NET Core 2.0. Conducted by Bipin Joshi. Read more...
Registration for January 2018 batch of ASP.NET Core 2.0 instructor-led online course has already started. Conducted by Bipin Joshi. Register today ! Click here for more details.

Prepare ASP.NET projects (Web Forms / MVC / Core) to use Angular 4

As as ASP.NET developer working with latest trends you might want to use Angular 4 in your projects. Unlike libraries such as jQuery, Angular 4 is a framework and there are quite a few steps involved before you actually start utilizing its powerful features. To that end this article explains the steps necessary to prepare your ASP.NET projects to use Angular 4. We will discuss the process for all the three flavors of ASP.NET available today - ASP.NET Web Forms, ASP.NET MVC and ASP.NET Core.

Below are the 10 steps to get you started with Angular 4 in an ASP.NET project.

 

Step 1 - Install Node and Npm

The first step is to install Node.js and Npm (Node Package Manager). We won't use Node.js here but we need to install it because Npm gets installed as a part of the installation. You can download Node.js here.

Simply run the downloaded installer and follow the instructions. Once the installation is complete locate Node.js program group and open the Node.js Command Prompt. Issue the following two commands one after the other and verify the version numbers.

> node -v
> npm -v

Here is a sample run:

Step 2 - Install Angular CLI

Next, we need to install Angular Command Line Interface or Angular CLI. The Angular CLI offers a command liner interface to perform several Angular tasks such as creating an Angular app and creating Angular components and many others. To install Angular CLI issue the following command at the Node.js command prompt:

> npm install -g @angular/cli

To test the installation issue the following command:

> ng -v

Doing so will display the Angular CLI version as shown below:

Step 3 - Install TypeScript

Your Angular 4 app will use TypeScript. So, you also need to install TypeScript.

To install TypeScript issue the following command at the Node.js Command Prompt:

> npm install -g typescript

To check the TypeScript version issue this command:

> tsc -v

It will respond with something like this:

Step 4 - Create an ASP.NET app

Now we have basic frameworks required to create Angular 4 apps. Remember that your Angular 4 app is going to reside inside your ASP.NET app. So, within a folder structure you have ASP.NET project files as well as Angular 4 files. The Angular 4 app is launched from an ASP.NET page (Web Form or View) and then it can talk to the server side using Ajax calls as and when required. Of course, in this article we are not going to make any Ajax calls as such.

To begin this step, create three ASP.NET applications - Web Forms, MVC and Core - and add them to the same solution. We are doing this just to explain the subtle differences that you should be aware of while using Angular 4. The following figure shows how the Solution Explorer looks like with these three projects.

Step 5 - Create an Angular app

Next step is to create a basic Angular 4 application in all the three ASP.NET projects you just created.

Open the Node.js Command Prompt again and navigate to the ASP.NET Web Forms project root folder. Then issue the following command :

> ng new AngularApp

This command will create a new Angular 4 app named AngularApp and place all the required Angular 4 files under the <aspnet_project_root>\AngularApp folder. This is how the Web Forms project looks like after this step. MVC and Core projects should look identical.

 

The command prompt will also show the success message as follows:

Repeat the same process for the ASP.NET MVC project. The MVC project folder structure will resemble this:

Finally, navigate to the wwwroot folder of the ASP.NET Core application and issue the same command. This time the folder structure will resemble as shown below:

Step 6 - Write some Angular 4 code

Now that you successfully created Angular 4 app in all the three projects, it's time to tweak the code a bit.

Locate the AngularApp/src/app/app.component.ts file and open it in Visual Studio editor. Modify this file as shown below:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My Angular App';
}

Notice that we modified the title of AppComponent from app to My Angular App. Also open app.component.html and just see how the HTML template of the component looks like. If you wish you can change some HTML markup here and see whether the change reflects when the page loads.

Ok. Save the file and close it.

Repeat the same process in the other two projects also. 

Step 7 - Build the Angular 4 app

Now minimize Visual Studio IDE and switch to the Node.js command prompt again.

Navigate to the AngularApp folder and issue this command to build the Angular app:

> ng build --base-href /AngularApp/dist/

This command will compile the TypeScript code of the AngularApp and do a few other tasks for you. The --base-href option specifies the base folder path that is used in the <script> references. This will be clear when we add the ASP.NET page.

Once this command does its job you will find the dist folder under the AngularApp folder as shown below:

Repeat the same for all the ASP.NET projects. All the AngularApp/dist folders should look identical.

Step 8 - Create ASP.NET page to launch the Angular app

At this point your Angular 4 app is ready. However, you would like to house it in your ASP.NET page rather than the default HTML page. So, do the following:

  • In the Web Forms project add a new Web Form named Default.aspx to the root folder.
  • In the MVC project add HomeController and Index.cshtml as you normally do.
  • In the Core project add HomeController and Index.cshtml as you normally do.

You would like to launch the Angular 4 app from these .aspx and .cshtml files. Just for the sake of clarity ASP.NET MVC project structure is shown below:

The ASP.NET Core folder structure would be similar as far as the controller and the view is concerned.

Step 9 - Include Angular 4 script references in the ASP.NET page

Locate AngularApp/dist/Index.html and open it in Visual Studio. Here is what it contents:

Notice a few things:

  • The base tag specifies the base path for the URLs from this page to be /AngularApp/dist/. If you remember this is what we specified in the --base-href option while invoking the build command.
  • The <app-root> is an Angular directive. It's obviously not a standard HTML markup. It will be processed by your component.
  • There is a series of <script> references that include several JavaScript files.

Copy this markup and paste it in the Default.aspx as well as Index.cshtml views (from MVC project and Core project). Save the files when that's done.

Step 10 - Run the ASP.NET and Angular app

Save everything from the project and build the ASP.NET project in the Visual Studio. Take a deep breath and press F5. If all goes well you should see the welcome message like this:

In this article we discussed a simple and straightforward way to use Angular 4 in your ASP.NET applications. Of course, you might want to explore and fine-tune aspects such as templates, output directory, and deployment of the app. In the next installment we will do something more meaningful and interesting.

That's it for now ! Keep coding !!


Bipin Joshi is a software consultant, an author and a yoga mentor having 22+ years of experience in software development. He also conducts online courses in ASP.NET MVC / Core and Design Patterns. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Meditation and Mindfulness to interested individuals. To know more about him click here.

Get connected : Twitter  Facebook  Google+  LinkedIn

Posted On : 25 September 2017


Tags : ASP.NET ASP.NET Core MVC .NET Framework C# Visual Studio