Frage Wie kann ich Angular 2 in einem .NET 4 Web Forms-Projekt verwenden?


Ich habe ein ASP.NET 4 Web Forms-Projekt in C # geschrieben. Ich möchte Angular 2 hinzufügen. Ich habe eine Menge Beispiele im Web mit ASP.NET 5 gesehen, aber ich kann nicht herausfinden, wie es in meinem Projekt geht.


6
2018-02-12 16:14


Ursprung


Antworten:


Habe ähnliche Anforderungen gestellt und habe ein paar POC dazu gemacht und definitiv damit weitergemacht. Ich habe mit jeder .aspx-Seite als eigenständige eckige 2 SPA-App gearbeitet. Das bedeutet, dass jede aspx-Seite eine eigene App.Component.ts- und main.ts-Datei hat (Dateiname basiert auf der Angular 2-Dokumentation). Die main.ts-Datei enthält den Code zum Starten der Anwendung (Beispielcode unten), sodass für jede ASPX-Seite eine main.ts-Datei vorhanden ist.

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

Es wird eine app.component.ts Datei (genannt home.component.ts für meine home.aspx) für jede aspx Seite geben. Jetzt in der Konfigurationsdatei, die Sytem.config Details enthält, habe ich einen neuen Map- und Package-Eintrag für meine home.aspx wie folgt definiert:

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

Und schließlich habe ich den System.import-Code-Teil in die .aspx-Seite verschoben (Code unten). Jede Seite importiert ihr eigenes Paket, das in system.config definiert ist.

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

hier habe ich meine main.ts als main-home.ts benannt.

Hoffentlich hilft das dir und anderen. Auch ich bin offen für den Vorschlag und die Rezension / alternative Lösung dieses Ansatzes.

Als referenz sehen sie bitte: bootstrapping-multiple-angular-2-applications-auf der gleichen Seite


4
2018-06-12 07:58



Ich stimme der Antwort von @ pawan vollkommen zu, aber ja @pawan, ich habe eine nette Lösung gefunden. Diese Lösung hat mir definitiv geholfen und ich hoffe, dass es euch allen auch weiterhilft.

Wir müssen main.ts und AppComponent.ts nicht für jede einzelne Seite erstellen.

Wir müssen unsere Hauptkomponente, die wir Bootstrapping dynamisch machen. In unserem Fall, in app.component.ts, boote ich unsere Komponente dynamisch basierend auf der URL der aktuellen Seite.

Lassen Sie uns sagen, wenn Ihre Seite home.aspx ist dann BoostRap HomeComponent oder about.aspx dann Boostrap AboutComponent Ich mache es, indem ich die Methode ngDoBootstrap wie folgt implementiere.

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

Auf Basis der Seiten-URL können wir unsere Komponente dynamisch starten und viele Dateien von main.ts und app.component.ts für jede Seite speichern.

Dazu müssen Sie für jede Komponente einen Eintrag in das Array entryComponents von NgModule wie folgt hinzufügen:

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

Hoffe das hilft.


1
2017-08-16 06:50



Ändern Sie Ihre Basisroute index.html auf Ihre Webseite

<base href="/YourWebPageRoute">

Fügen Sie die Seite in das Webformular ein

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

0
2017-10-03 15:27