asp.net-core
Angular2 und .Net Core

Schnelles Tutorial für eine Angular 2 Hello World! App mit .Net Core in Visual Studio 2015

Schritte:

1. Leere .Net Core-Webanwendung erstellen:

2. Gehen Sie zu wwwroot und erstellen Sie eine normale HTML-Seite mit dem Namen Index.html:

3. Konfigurieren Sie Startup.cs so, dass statische Dateien akzeptiert werden (dazu müssen Sie "Microsoft.AspNetCore.StaticFiles": "1.0.0" -Bibliothek in der Datei "project.json" hinzufügen):

4. NPN-Datei hinzufügen:

   • Klicken Sie mit der rechten Maustaste auf das WebUi-Projekt, und fügen Sie die NPN-Konfigurationsdatei (package.json) hinzu:

   • Überprüfen Sie die letzten Versionen der Pakete:

     Hinweis: Wenn Visual Studio die Versionen der Pakete nicht erkennt (Alle Pakete prüfen, da einige die Version anzeigen und andere nicht), kann dies daran liegen, dass die in Visual Studio kommende Node-Version nicht ordnungsgemäß funktioniert Daher ist es wahrscheinlich erforderlich, den Knoten js extern zu installieren und diese Installation dann mit Visual Studio zu verknüpfen.

     ich. Laden Sie den Knoten js herunter und installieren Sie ihn: https://nodejs.org/es/download/

     ii. Verknüpfen Sie die Installation mit Visual Studio: https://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/ : iii. (Optional) Nach dem Speichern der package.json werden die Abhängigkeiten im Projekt installiert. Falls nicht, führen Sie "npm install" mit einer Eingabeaufforderung am selben Speicherort wie die package.json-Datei aus.

     Hinweis: Es wird empfohlen, "Open Command Line" zu installieren, eine Erweiterung, die zu Visual Studio hinzugefügt werden kann:

5. Typoskript hinzufügen:

   • Erstellen Sie einen TsScript-Ordner innerhalb des WebUi-Projekts, nur für die Organisation. (Die TypeScripts werden nicht in den Browser geladen. Sie werden in eine normale JS-Datei umgewandelt. Diese JS-Datei wird die Datei wwwroot mit gulp sein, dies ist der Ordner wird später erklärt):

   • Fügen Sie in diesem Ordner "TypeScript JSON-Konfigurationsdatei" (tsconfig.json) hinzu: Und fügen Sie den nächsten Code hinzu:

     

   • Fügen Sie im Stammverzeichnis des WebUi-Projekts eine neue Datei mit dem Namen typings.json hinzu: Und fügen Sie den nächsten Code hinzu:

   • Öffnen Sie im Web Project-Stammverzeichnis eine Befehlszeile, und führen Sie "typings install" aus. Dadurch wird ein Typisierungsordner erstellt. (Dies erfordert die "Befehlszeile öffnen", die als optionaler Schritt im Hinweis in Schritt 4, Ziffer iii erläutert wird).

6. Schluck hinzufügen, um Dateien zu verschieben:

   • Fügen Sie "Gulp Configuration File" (gulpfile.js) im Stammverzeichnis des Webprojekts hinzu:
   • Code hinzufügen:

7. Fügen Sie Angular 2-Bootstrapping-Dateien im Ordner "tsScripts" hinzu:

   app.component.ts

   app.module.ts

   main.ts

8. Erstellen Sie in wwwroot die nächste Dateistruktur:

9. Fügen Sie im Ordner scripts (aber außerhalb der App) die Datei systemjs.config.js hinzu: Und fügen Sie den nächsten Code hinzu:

10. Führen Sie Gulp Task aus, um die Skripte in wwwroot zu generieren.

    • Klicken Sie mit der rechten Maustaste auf gulpfile.js
    • Task Runner Explorer ich. Wenn die Tasks nicht geladen sind ("Fehler beim Laden. Siehe Ausgabefenster"). Gehen Sie zum Ausgabefenster und sehen Sie sich die Fehler an. Meistens handelt es sich um Syntaxfehler in der gulp-Datei.
    • Klicken Sie mit der rechten Maustaste auf "Standard" und dann auf "Ausführen". (Es dauert eine Weile, und die Bestätigungsmeldungen sind nicht sehr genau. Es zeigt an, dass der Vorgang abgeschlossen ist, der Prozess läuft jedoch weiter, denken Sie daran.)

11. Ändern Sie Index.html wie:

12. Jetzt laufen und genießen.

    Anmerkungen:

    • Falls Kompilierungsfehler mit Typescript auftreten, beispielsweise "TypeScript Virtual Project", ist dies ein Indikator dafür, dass die TypeScript-Version für Visual Studio nicht entsprechend der in der "package.json" ausgewählten Version aktualisiert wird. In diesem Fall installieren Sie sie bitte : https://www.microsoft.com/de-de/download/details.aspx?id=48593

Verweise:

• Deborah Kuratas Kurs "Angular 2: Getting Started" in Pluralsight:

  https://www.pluralsight.com/courses/angular-2-getting-started-update

• Angular 2 Offizielle Dokumentation:

  https://angular.io/

• Artikel von Mithun Pattankar:

  http://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/

  http://www.mithunvp.com/using-angular-2-asp-net-mvc-5-visual-studio/

Erwartete Fehler beim Generieren von Angular 2-Komponenten im .NET Core-Projekt (Version 0.8.3)

Beim Generieren neuer Angular 2-Komponenten in einem .NET Core-Projekt können folgende Fehler auftreten (ab Version 0.8.3):

Error locating module for declaration
        SilentError: No module files found

ODER

No app module found. Please add your new Class to your component. 
        Identical ClientApp/app/app.module.ts

[LÖSUNG]

1. Benennen Sie app.module.client.ts in app.client.module.ts um

2. Öffnen Sie app.client.module.ts: Setzen Sie die Deklaration mit 3 Punkten "..." voran und wickeln Sie die Deklaration in Klammern ein.

   Zum Beispiel: [...sharedConfig.declarations, <MyComponent>]

3. Öffnen Sie boot-client.ts: Aktualisieren Sie Ihren Import, um die neue Referenz app.client.module zu verwenden.

   Beispiel: import { AppModule } from './app/app.client.module';

4. Versuchen Sie nun, die neue Komponente zu generieren: ng g component my-component

[ERLÄUTERUNG]

Angular CLI sucht in Ihrem Projekt nach einer Datei mit dem Namen app.module.ts und versucht, Referenzen für die Deklarationseigenschaft zu finden, um die Komponente zu importieren. Dies sollte ein Array sein (wie bei sharedConfig.declarations), die Änderungen werden jedoch nicht übernommen

[Quellen]

• https://github.com/angular/angular-cli/issues/2962
• https://www.udemy.com/aspnet-core-angular/learn/v4/t/lecture/6848548 (Abschnitt 3.33 Vortragender Bryan Garzon)