Jak mogę użyć Angular 2 w projekcie .NET 4 Web Forms?

Question

Mam projekt ASP.NET 4 Web Forms napisane w języku C#. Chciałbym dodać Angular 2. Widziałem wiele przykładów w Internecie przy użyciu ASP.NET 5, ale nie wiem, jak to zrobić w moim projekcie.

Answer 1

Zetknąłem się z podobnym wymogiem i zrobiłem trochę POC na tym i zdecydowanie posuwałem się naprzód z tym. Pracowałem na każdej stronie .aspx jako samodzielnej aplikacji kątowej 2 SPA. Oznacza to, że każda strona aspx będzie miała swój własny plik App.Component.ts i main.ts (nazwa pliku na podstawie dokumentacji Angular 2). plik main.ts zawiera kod do załadowania aplikacji (przykładowy kod poniżej), więc będzie plik main.ts dla każdej strony .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));

będzie jeden app.component.ts (nazwał go home.component.ts dla mojego home.aspx) plik dla każdej strony aspx. Teraz w pliku konfiguracyjnym, który zawiera dane Sytem.config zdefiniowałem nowa mapa i pakiet wpis dla mojego home.aspx jak pokazano poniżej:

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

I wreszcie przeniosłem kod System.import część strony .aspx (kod poniżej). Każda strona zaimportuje swój własny pakiet zdefiniowany w sytem.config.

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

tutaj nazwałem moje main.ts jako głównego home.ts.

Mam nadzieję, że to pomoże Tobie i innym. Również jestem otwarty na sugestie i recenzję/alternatywne rozwiązanie tego podejścia.

Dla porównania proszę zobaczyć: bootstrapping-multiple-angular-2-applications-on-the-same-page

Answer 2

zmienić trasę podstawową index.html do swojej strony internetowej

<base href="/YourWebPageRoute"> 

obejmują stronę wewnątrz formularza internetowego

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

Answer 3

I całkowicie zgadzam się z @ pawan-tych Odpowiedź brzmi: tak, tak, ale znalazłem fajne rozwiązanie tego. To rozwiązanie zdecydowanie mi pomogło i mam nadzieję, że to też pomoże wam wszystkim.

Nie trzeba tworzyć plików main.ts i AppComponent.ts dla każdej strony.

Musimy uczynić nasz główny komponent, który dynamicznie ładujemy. W naszym przypadku, w app.component.ts, dynamicznie ładuję nasz komponent na podstawie adresu URL bieżącej strony.

Powiedzmy, że jeśli twoja strona to home.aspx, wówczas doładowujesz HomeComponent lub about.aspx, a następnie boostrap AboutComponent Robię to poprzez implementację metody ngDoBootstrap w następujący sposób.

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

ten sposób na podstawie adresu URL strony, możemy dynamicznie bootstrap nasz komponent i zapisywanie plików Wiele main.ts i app.component.ts dla każdej strony.

Do tego trzeba dodać wpis dla każdego składnika w entryComponents tablicy NgModule jak poniżej:

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

nadzieję, że to pomaga.