asp.net-core
Angular2 en .Net Core

Snelle tutorial voor een Angular 2 Hello World! App met .Net Core in Visual Studio 2015

Stappen:

1. Maak een lege .Net Core-webapp:

2. Ga naar wwwroot en maak een normale html-pagina met de naam Index.html:

3. Configureer Startup.cs om statische bestanden te accepteren (hiervoor moet de bibliotheek "Microsoft.AspNetCore.StaticFiles": "1.0.0" worden toegevoegd in het bestand "project.json"):

4. NPN-bestand toevoegen:

   • Klik met de rechtermuisknop op het WebUi-project en voeg het NPN-configuratiebestand (package.json) toe:

   • Controleer de laatste versies van de pakketten:

     Opmerking: als Visual Studio de versies van de pakketten niet detecteert (controleer alle pakketten, omdat sommige de versie wel tonen en andere niet), kan het zijn dat de Node-versie die in Visual Studio wordt geleverd niet correct werkt , dus het zal waarschijnlijk nodig zijn om node js extern te installeren en die installatie vervolgens te koppelen aan Visual Studio.

     ik. Download en installeer node js: https://nodejs.org/es/download/

     ii. Koppel de installatie aan Visual Studio: https://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/ : iii. (Optioneel) nadat het pakket.json is opgeslagen, worden de afhankelijkheden in het project geïnstalleerd. Zo niet, voer dan "npm install" uit met een opdrachtprompt op dezelfde locatie als het pakket.json-bestand.

     Opmerking: Aanbevolen om "Open opdrachtregel" te installeren, een extensie die kan worden toegevoegd aan Visual Studio:

5. Schrijftype toevoegen:

   • Maak een TsScript-map in het WebUi-project, alleen voor de organisatie (de TypeScripts gaan niet naar de browser, ze worden omgezet in een normaal JS-bestand, en dit JS-bestand gaat naar de wwwroot-foder met behulp van gulp, dit wordt later uitgelegd):

   • Voeg in die map "TypeScript JSON Configuration File" (tsconfig.json) toe: En voeg de volgende code toe:

     

   • Voeg in de root van het WebUi Project een nieuw bestand toe met de naam typings.json: En voeg de volgende code toe:

   • Open in de Web Project-root een opdrachtregel en voer "typings install" uit, dit zal een typmap maken (hiervoor is "Open opdrachtregel" vereist, uitgelegd als een optionele stap in de opmerking in stap 4, cijfer iii).

6. Gulp toevoegen om bestanden te verplaatsen:

   • Voeg "Gulp Configuration File" (gulpfile.js) toe aan de root van het webproject:
   • Code toevoegen:

7. Voeg Angular 2 bootstrapping-bestanden toe in de map "tsScripts":

   app.component.ts

   app.module.ts

   main.ts

8. Maak binnen wwwroot de volgende bestandsstructuur:

9. Voeg in de map met scripts (maar buiten de app) de systemjs.config.js toe: En voeg de volgende code toe:

10. Voer Gulp Task uit om de scripts in wwwroot te genereren.

    • Klik met de rechtermuisknop op gulpfile.js
    • Task Runner Explorer ik. Als de taken niet zijn geladen ("Kan niet laden. Zie Uitvoervenster") Ga naar het uitvoervenster en bekijk de fouten, meestal zijn het syntaxisfouten in het gulp-bestand.
    • Klik met de rechtermuisknop op de "standaard" taak en "Uitvoeren" (het duurt even, en de bevestigingsberichten zijn niet erg nauwkeurig, het laat zien dat het klaar is, maar het proces loopt nog steeds, houd daar rekening mee):

11. Wijzig Index.html als:

12. Ren nu en geniet.

    Opmerkingen:

    • In het geval van compilatiefouten met typescript, bijvoorbeeld "TypeScript Virtual Project", is dit een indicatie dat de TypeScript-versie voor Visual Studio niet wordt bijgewerkt volgens de versie die we hebben geselecteerd in "package.json", installeer dit als dit gebeurt : https://www.microsoft.com/en-us/download/details.aspx?id=48593

Referenties:

• Deborah Kurata's cursus "Angular 2: Getting Started" in Pluralsight:

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

• Officiële Documentatie 2:

  https://angular.io/

• Artikelen van 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/

Verwachte fouten bij het genereren van Angular 2-componenten in .NET Core-project (versie 0.8.3)

Bij het genereren van nieuwe Angular 2-componenten in een .NET Core-project kunt u de volgende fouten tegenkomen (vanaf versie 0.8.3):

Error locating module for declaration
        SilentError: No module files found

OF

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

[OPLOSSING]

1. Wijzig de naam van app.module.client.ts in app.client.module.ts

2. Open app.client.module.ts: plaats de aangifte met 3 puntjes “...” en wikkel de aangifte tussen haakjes.

   Bijvoorbeeld: [...sharedConfig.declarations, <MyComponent>]

3. Open boot-client.ts: update uw import om de nieuwe app.client.module-referentie te gebruiken.

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

4. Probeer nu de nieuwe component te genereren: ng g component my-component

[UITLEG]

Angular CLI zoekt naar een bestand met de naam app.module.ts in uw project en probeert een verwijzing te vinden voor de eigenschap declarations om de component te importeren. Dit moet een array zijn (zoals de sharedConfig.declarations is), maar de wijzigingen worden niet toegepast

[BRONNEN]

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