Taking Angular 4 as Stand Alone with Asp.Net Web Forms or MVC

once you do in the CLI ng build you will have a new folder named dist containing the rendered solution, in our case our nice Products App.

I created a new ng project named MSProductsAppAspNet in order to put it inside an Asp.Net project.

IISHander (ashx)

so to make things easy, i started with a handler to do the same thing we did with the web api, merging the Products[] array init lines as a static var inside Product class.

public class Product {
  public int Id { get; set; }
  public string Name { get; set; }
  public string Category { get; set; }
  public decimal Price { get; set; }
  public static Product[] products = new Product[] {   
    new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
    new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M },
    new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M }
  };
}
and the handler looks like this

public void ProcessRequest(HttpContext context) {
  System.Web.Script.Serialization.JavaScriptSerializer JsonSerializer =
    new System.Web.Script.Serialization.JavaScriptSerializer();

  context.Response.ContentType = "application/json";

  string a = context.Request["a"];

  switch (a) {
    case "GetAllProducts":
      context.Response.Write(JsonSerializer.Serialize(Product.products));
      break;
    case "FindProductById":
      string strId = context.Request["id"];
      int id = int.Parse(strId);
      context.Response.Write(JsonSerializer.Serialize(
      Product.products.FirstOrDefault((p) => p.Id == id)));
      break;
    default:
      break;
  }
}

and in our ng service, ProductRestApiService, I just changed these 3 lines

private url = '/ProductsHandler.ashx?a='; 
this.http.get(this.url + "GetAllProducts")
this.http.get(this.url + "FindProductById&id=" + id)

each in its respective place

I then ng build the project, copied the dist folder to a folder in the project I called ng4 and the only thing I needed to change in the Index.html was the <script src references and add /ng4/ before each, and the results where perfect.

inside aspx page

moving <app-root></app-root> and the <script> tags to the .aspx page, inside the form tag with the server attribute, tried to postback when I clicked search. so I changed find() in FindProductByIdComponent to return false. everything works great.

ok, so now lets build 2 different components in order to use then in say 2 part of the same page or 2 different pages.

of course we could just make 2 Angular 4 projects and have 10 js files, but we don't want that.

well, lets start by stating that if you try to use any component outside <app-root></app-root> you get an error.

inside an Asp.Net website

so I am now throwing ideas....

1st is to just create a long list of our components in 1 project and decide who to call as an attribute on <app-root></app-root> like <app-root component="clock"></app-root>

 then inside app.component.ts import and use ElementRef like this

import { Component, ElementRef } from '@angular/core';
----
export class AppComponent {
  component;
  constructor(elementRef:ElementRef) {
    this.component = elementRef.nativeElement.getAttribute('component');
  }

and in the app.component.html just put all of the components with
*ngIf="component == 'Clock'"

and it will work as long as each <app-root component="clock"></app-root> call with a different component is in a different page, since angular is just looking for its 1st root element.

but if you want several components in the same page... well thats another post to come
but you can start looking at some resources
https://blog.sstorie.com/bootstrapping-multiple-angular-2-applications-on-the-same-page/
https://yakovfain.com/2017/04/06/angular-cli-multiple-apps-in-the-same-project/

MVC

MVC is either working with a Hander, or ApiController, or even standard Controllers, or just throwing your data on the page and launching angular to take it as is, anyway nothing we haven't learned.

for the entire serie
"Angular 4 with .NET (webForms/MVC) Tutorial - Table Of Content"