Come posso utilizzare Angular 2 in un progetto di Web Form 4 .NET?

Question

Ho un progetto di Web Forms ASP.NET 4 scritto in C#. Vorrei aggiungere Angular 2. Ho visto molti esempi sul web usando ASP.NET 5 ma non riesco a capire come farlo nel mio progetto.

Answer 1

Hanno affrontato requisiti simili e hanno fatto alcuni POC su questo e sicuramente andare avanti con esso. Ho lavorato su ogni pagina .aspx come app stand alone angular 2 SPA. Ciò significa che ciascuna pagina aspx avrà il proprio App.Component.ts e il file main.ts (nome del file basato sulla documentazione Angular 2). Il file main.ts contiene il codice per eseguire il bootstrap dell'applicazione (codice di esempio sotto) in modo che ci sia un file main.ts per ciascuna pagina .aspx.

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

Ci sarà uno app.component.ts (chiamarono home.component.ts per la mia home.aspx) file per ogni pagina aspx. Ora nel file di configurazione che contiene Sytem.config dettagli sono stati definiti nuovi mappa e pacchetto voce per il mio home.aspx come illustrato di seguito:

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

E finalmente mi sono trasferito il codice System.import parte alla pagina .aspx (codice sotto). Ogni pagina importerà il proprio pacchetto definito in sytem.config.

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

Qui ho chiamato i miei main.ts come principale-home.ts.

Speriamo che questo aiuti voi e gli altri. Inoltre sono aperto a suggerimenti e revisioni/soluzioni alternative di questo approccio.

Per riferimento si veda: bootstrapping-multiple-angular-2-applications-on-the-same-page

Answer 2

cambiamento il percorso di base index.html alla tua pagina web

<base href="/YourWebPageRoute"> 

includono pagina all'interno della pagina web del

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

Answer 3

Sono totalmente d'accordo con @ Pawan di risposta ma sì @pawan ho trovato una bella soluzione di questo. Questa soluzione mi ha sicuramente aiutato e spero che possa aiutare anche tutti voi.

Non è necessario creare main.ts e AppComponent.ts per ogni pagina.

Abbiamo bisogno di rendere il nostro componente principale che stiamo facendo il bootstrap dinamico. Nel nostro caso, in app.component.ts, eseguo il bootstrap del componente in modo dinamico in base all'URL della pagina corrente.

Diciamo che se la tua pagina è home.aspx poi boostrap HomeComponent o about.aspx then boostrap AboutComponent Lo sto facendo implementando il metodo ngDoBootstrap come segue.

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

Questo è il modo in base a URL della pagina, possiamo inizializzarlo in modo dinamico la nostra componente e salvare un file lotto di main.ts e app.component.ts per ogni pagina.

Per questo, è necessario aggiungere la voce di ciascun componente in entryComponents gamma di NgModule come di seguito:

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

Spero che questo aiuti.