asp.net-core
Angular2 och .Net Core

Snabbtutorial för en Angular 2 Hello World! App med .Net Core i Visual Studio 2015

Steg:

1. Skapa tom. Net Core-app:

2. Gå till wwwroot och skapa en normal html-sida som heter Index.html:

3. Konfigurera Startup.cs för att acceptera statiska filer (detta kommer att behöva lägga till "Microsoft.AspNetCore.StaticFiles": "1.0.0" -biblioteket i filen "project.json"):

4. Lägg till NPN-fil:

   • Högerklicka på WebUi-projektet och lägg till NPN-konfigurationsfil (package.json):

   • Verifiera de senaste versionerna av paketen:

     Obs: Om Visual Studio inte upptäcker versionerna av paketen (Kontrollera alla paket, eftersom vissa av dem visar versionen och andra inte), kan det bero på att Node-versionen som kommer i Visual Studio inte fungerar korrekt , så det kommer förmodligen att kräva att installera nod js externt och sedan länka installationen till Visual Studio.

     i. Ladda ner och installera nod js: https://nodejs.org/es/download/

     ii. Länk installationen med Visual Studio: https://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/ : III. (Valfritt) efter att ha sparat package.json kommer det att installera beroenden i projektet, om inte, köra "npm install" med hjälp av en kommandotolk från samma plats som package.json-filen.

     Obs! Rekommenderas att installera "Öppna kommandoraden", ett tillägg som kan läggas till Visual Studio:

5. Lägg till typskript:

   • Skapa en TsScript-mapp i WebUi-projektet, bara för organisation (TypeScripts går inte till webbläsaren, de kommer att transpileras till en normal JS-fil, och den här JS-filen kommer att vara den som går till wwwroot foder med gulp, detta kommer att förklaras senare):

   • I mappen lägg till "TypeScript JSON Configuration File" (tsconfig.json): Och lägg till nästa kod:

     

   • Lägg till en ny fil som heter typings.json i WebUi-projektets rot: Och lägg till nästa kod:

   • I Web Project-roten öppnar du en kommandorad och kör "typinstallation", detta skapar en typmapp (Detta kräver "Öppna kommandoraden" förklaras som ett valfritt steg i anteckningen i steg 4, siffran iii).

6. Lägg till gulp för att flytta filer:

   • Lägg till "Gulp Configuration File" (gulpfile.js) i roten till webbprojektet:
   • Lägg till kod:

7. Lägg till Angular 2 bootstrapping-filer i mappen “tsScripts”:

   app.component.ts

   app.module.ts

   main.ts

8. Inuti wwwroot, skapa nästa filstruktur:

9. Lägg till systemjs.config.js i skriptmappen (men utanför appen): Och lägg till nästa kod:

10. Utför Gulp-uppgift för att generera skript i wwwroot.

    • Högerklicka på gulpfile.js
    • Task Runner Explorer i. Om uppgifterna inte laddas ("Misslyckas med att ladda. Se Output-fönstret") Gå till utgångsfönstret och titta på felen, det mesta är syntaxfel i gulp-filen.
    • Högerklicka på "standard" -uppgiften och "Kör" (Det kommer att ta ett tag, och bekräftelsemeddelandena är inte särskilt exakta, det visar det slutfört men processen körs fortfarande, ha det i åtanke):

11. Ändra Index.html som:

12. Kör nu och njut.

    Anmärkningar:

    • Om det finns kompilationsfel med typskript, till exempel "TypeScript Virtual Project", är det en indikator på att TypeScript-versionen för Visual Studio inte uppdateras enligt den version vi valde i "package.json", om detta händer, installera : https://www.microsoft.com/en-us/download/details.aspx?id=48593

referenser:

• Deborah Kurata's "Angular 2: Getting Started" -kurs i Pluralsight:

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

• Angular 2 officiell dokumentation:

  https://angular.io/

• Artiklar av 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/

Förväntade fel vid generering av Angular 2-komponenter i .NET Core-projektet (version 0.8.3)

När du skapar nya Angular 2-komponenter i ett .NET Core-projekt kan du stöta på följande fel (från version 0.8.3):

Error locating module for declaration
        SilentError: No module files found

ELLER

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

[LÖSNING]

1. Byt namn på app.module.client.ts till app.client.module.ts

2. Öppna app.client.module.ts: beroende på deklarationen med 3 punkter “...” och lämna in deklarationen inom parentes.

   Till exempel: [...sharedConfig.declarations, <MyComponent>]

3. Öppna boot-client.ts: uppdatera din import för att använda den nya app.client.module-referensen.

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

4. Försök nu att generera den nya komponenten: ng g component my-component

[FÖRKLARING]

Angular CLI letar efter en fil med namnet app.module.ts i ditt projekt och försöker hitta en referens för deklarationsegenskapen för att importera komponenten. Detta bör vara en matris (som sharedConfig.declarations är), men ändringarna tillämpas inte

[KÄLLOR]

• https://github.com/angular/angular-cli/issues/2962
• https://www.udemy.com/aspnet-core-angular/learn/v4/t/lecture/6848548 (avsnitt 3.33 föreläsningsbidrag Bryan Garzon)