Hur man sätter upp ett Angular 2-projekt i VSTO 2015

Steg 1: Hämta QuickStart-filer

[Källa: https://github.com/angular/quickstart]

Steg 2: Skapa ett Visual Studio ASP.NET projekt

Skapa ASP.NET 4.x projektet som vanligt:

  1. I Visual Studio: File | New | Project
  2. I Template-trädet, välj Templates | Visual C#| Web.
  3. Välj template ASP.NET Web Application, ge projektet ett namn och klicka på OK.
  4. Välj mallen EMPTY, klicka på OK.

Steg 3: Kopiera QuickStart filer i projektmappen ASP.NET

Kopiera QuickStart-filer som hämtats från github till mappen som innehåller .csproj filen. Inkludera vissa (inte alla) filer i Visual Studio-projektet på följande sätt:

Klicka på Show All Files-knappen i Solution Explorer. Högerklicka på varje mapp / fil som ska ingå i projektet och välj Include in Project:

  • app\ (mapp)
  • styles.css
  • index.html
  • package.json
  • tsconfig.json

Steg 4: Gör Restore av nödvändiga paket

Gör Restore på paket som krävs för en Angular 2-app enligt följande:

  1. Högerklicka på package.json-filen i Solution Explorer och välj Restore Packages. (Detta använder npm för att installera alla paket som definierats i package.json-filen, det kan ta lite tid.)
    Om så önskas, öppna utdatafönstret (View | Output) för att se vilka npm-kommandon som utförs.
    Ignorera varningarna.
    När klart ska ett meddelande visas som säger npm command completed with exit code 0.
  2. Klicka på Refresh-symbolen i Solution Explorer.
  3. OBS! Lägg inte till node_modules-mappen till projektet.

Steg 5: Bygg och kör appen

  1. Säkerställ att index.html är start page (högerklicka på index.html och välj Set As Start Page).
  2. Bygg och kör igång appen.
    • med debuggern, Run eller F5 (långsammare).
    • utan debuggern Ctrl + F5 (snabbare).
Annonser