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

Question

I have an ASP.NET 4 Web Forms project written in C #. I would like to add Angular 2. I have seen many examples on the Internet using ASP.NET 5, but I cannot figure out how to do this in my project.

Answer 1

faced a similar requirement and did some POC on it and definitely moved forward. I worked with every .aspx page as a standalone angular 2 SPA application. This means that 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 download 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)); 

For each aspx page there will be one app.component.ts file (named by him home.component.ts for my home.aspx). Now in the configuration file that contains the Sytem.config data, I defined a 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 part of the System.import code to the .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 called my main.ts as main-home.ts.

Hope this helps you and others. I am also open to suggesting and reviewing / alternative solutions to this approach.

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

Answer 2

change the base route index.html to your web page.

 <base href="/YourWebPageRoute"> 

includes page inside web form

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

Answer 3

I totally agree with @pawan's answer, but yes @pawan I found a good solution to this. This solution definitely helped me and hopes that it will help all of you.

We do not need to create main.ts and AppComponent.ts for each page.

We need to make the main component that we load dynamically. In our case, in app.component.ts, I dynamically load our component based on the URL of the current page.

Say if your page is home.aspx, then boostrap HomeComponent or about.aspx, then boostrap AboutComponent I do this by implementing the ngDoBootstrap method as follows.

 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); } } } 

Here's how, based on the page URL, we can dynamically load our component and save a lot of main.ts and app.component.ts files for each page.

To do this, you need to add an entry for each component to the entryComponents array from the NgModule, as shown below:

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

Hope this helps.