How can I use Angular 2 in a .NET 4 Web Forms project?

I have faced a similar requirement and did some POC on this and definitely moving forward with it. I worked on with each .aspx page as a stand-alone Angular 2 SPA app. This means each aspx page will have its own App.Component.ts and main.ts file (file name based on Angular 2 documentation). The main.ts file contains the code to the Bootstrap the application (sample code below), so there will be a main.ts file for each .aspx page.

import {bootstrap} from 'angular2/platform/browser';
import {HTTP_BINDINGS} from 'angular2/http';

import {HomeComponent} from './home.component';

bootstrap(HomeComponent, [HTTP_BINDINGS])
    .catch(err => console.error(err));

There will be one app.component.ts (named it home.component.ts for my home.aspx) file for each .aspx page. Now in the config file which contains System.config details, I defined new map and package entry for my home.aspx as shown below:

System.config({
    transpiler: 'typescript',
    typescriptOptions: {
        emitDecoratorMetadata: true,
        experimentalDecorators: true
    },
    map: {
        app: '../../Javascript/angular/app',
        home: '../../Javascript/angular/home'
    },
    packages: {
        app: { main: './main.ts', defaultExtension: 'ts'},
        home: { defaultExtension: 'ts' }
    }
});

And finally, I moved the System.import code part to .aspx page (code below). Each page will import its own package defined in system.config.

 <script>
          System
            .import('home/main-home')
            .catch(console.error.bind(console));
    </script>

here I have named my main.ts as main-home.ts.

Hopefully this helps you and others. Also, I am open for suggestions and ti review/alternate solutions of this approach.

For reference, please see: bootstrapping-multiple-angular-2-applications-on-the-same-page

I totally agree with @pawan's answer but yes @pawan i found a nice solution of this. This solution definitely helped me and hope it will help all of you too.

We don't need to create main.ts and AppComponent.ts for each and every page.

We need to make our main component which we are bootstrapping dynamic. In our case, in app.component.ts, i am bootstrapping our component dynamically based on url of current page.

Let's say if your page is home.aspx then boostrap HomeComponent or about.aspx then boostrap AboutComponent I am doing it by implementing ngDoBootstrap method as following.

export class AppModule { 
    url : string;
    constructor(@Inject(DOCUMENT) private document: any){
        this.url = this.document.location.href.toLowerCase();
    }
    ngDoBootstrap(app:ApplicationRef){
        if(this.url.indexOf("home.aspx") > 0){
            app.bootstrap(HomeComponent);   
        }
        else if(this.url.indexOf("about.aspx") > 0){
            app.bootstrap(AboutComponent);  
        }
    }
}

This is how based on page url, we can dynamically bootstrap our Component and save a lot files of main.ts and app.component.ts for each page.

For this, you need to add entry for each component into entryComponents array of NgModule as below:

@NgModule({
  entryComponents : [
        HomeComponent, 
        AboutComponent, 
    ]
})

Hope this helps.

change your index.html base route to your webpage

<base href="/YourWebPageRoute">

include the page inside the webform

<% Response.WriteFile("index.html"); %>