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

Question

I have a ASP.NET 4 Web Forms project written in C#. I would like to add Angular 2. I've seen a lot of examples on the web using ASP.NET 5 but I can't figure out how to do it in my project.

Answer 1

Have faced similar requirement and did some POC on this and definitely moving forward with it . I worked on with each .aspx page as 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). main.ts file contains the code to 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 Sytem.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 sytem.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 suggestion and review/alternate solution of this approach.

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

Answer 2

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.