asp.net-core
Angular2 i .Net Core

Szybki samouczek dla Angular 2 Hello World! Aplikacja z .Net Core w Visual Studio 2015

Kroki:

1. Utwórz pustą aplikację .Net Core Web:

2. Przejdź do wwwroot i utwórz normalną stronę HTML o nazwie Index.html:

3. Skonfiguruj Startup.cs, aby akceptował pliki statyczne (będzie to wymagało dodania biblioteki „Microsoft.AspNetCore.StaticFiles”: „1.0.0” w pliku „project.json”):

4. Dodaj plik NPN:

   • Kliknij prawym przyciskiem myszy projekt WebUi i dodaj plik konfiguracyjny NPN (package.json):

   • Sprawdź ostatnie wersje pakietów:

     Uwaga: Jeśli Visual Studio nie wykrywa wersji pakietów (Sprawdź wszystkie pakiety, ponieważ niektóre z nich pokazują wersję, a inne nie), może to być spowodowane tym, że wersja Node pojawiająca się w Visual Studio nie działa poprawnie , więc prawdopodobnie będzie wymagać zainstalowania węzła js zewnętrznie, a następnie połączenia tej instalacji ze Visual Studio.

     ja. Pobierz i zainstaluj węzeł js: https://nodejs.org/es/download/

     ii. Połącz instalację z Visual Studio: https://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/ : iii. (Opcjonalnie) po zapisaniu pliku package.json zainstaluje zależności w projekcie, jeśli nie, uruchom polecenie „npm install” z wiersza polecenia z tej samej lokalizacji, co plik package.json.

     Uwaga: Zalecane jest zainstalowanie „Open Command Line”, rozszerzenia, które można dodać do Visual Studio:

5. Dodaj maszynopis:

   • Utwórz folder TsScript w projekcie WebUi, tylko dla organizacji (TypeScripts nie przejdzie do przeglądarki, zostaną one transpilowane do normalnego pliku JS, a ten plik JS będzie tym, który przejdzie do fodera wwwroot za pomocą gulp, to wyjaśnimy później):

   • Wewnątrz tego folderu dodaj „Plik konfiguracyjny JSON TypeScript” (tsconfig.json): I dodaj następny kod:

     

   • W katalogu głównym projektu WebUi dodaj nowy plik o nazwie typings.json: I dodaj następny kod:

   • W katalogu głównym Web Project otwórz wiersz poleceń i uruchom „instalację typów”, utworzy to folder typów (wymaga to „Otwarcia wiersza poleceń” wyjaśnionego jako opcjonalny krok w uwadze w kroku 4, cyfra iii).

6. Dodaj łyk, aby przenieść pliki:

   • Dodaj „Plik konfiguracyjny Gulp” (gulpfile.js) w katalogu głównym projektu internetowego:
   • Dodaj kod:

7. Dodaj pliki ładowania Angular 2 do folderu „tsScripts”:

   app.component.ts

   app.module.ts

   main.ts

8. Wewnątrz wwwroot utwórz następną strukturę plików:

9. W folderze skryptów (ale poza aplikacją) dodaj plik systemjs.config.js: I dodaj następny kod:

10. Wykonaj Gulp Task, aby wygenerować skrypty w wwwroot.

    • Kliknij prawym przyciskiem myszy gulpfile.js
    • Task Runner Explorer ja. Jeśli zadania nie są załadowane („Nie można załadować. Zobacz okno wyników”) Przejdź do okna wyników i spójrz na błędy, przez większość czasu są to błędy składniowe w pliku gulp.
    • Kliknij prawym przyciskiem myszy zadanie „domyślne” i „Uruchom” (trochę potrwa, a komunikaty potwierdzające nie są bardzo precyzyjne, oznacza to, że zostało zakończone, ale proces nadal trwa, pamiętaj o tym):

11. Zmodyfikuj Index.html jak:

12. Teraz biegnij i ciesz się.

    Uwagi:

    • W przypadku wystąpienia błędów kompilacji z maszynopisem, na przykład „Projekt wirtualny TypeScript”, oznacza to, że wersja TypeScript dla programu Visual Studio nie jest aktualizowana zgodnie z wersją wybraną w pliku „package.json”. Jeśli tak się stanie, zainstaluj : https://www.microsoft.com/en-us/download/details.aspx?id=48593

Bibliografia:

• Deborah Kurata „Angular 2: Pierwsze kroki” w Pluralsight:

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

• Oficjalna dokumentacja Angular 2:

  https://angular.io/

• Artykuły 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/

Oczekiwane błędy podczas generowania komponentów Angular 2 w projekcie .NET Core (wersja 0.8.3)

Podczas generowania nowych komponentów Angular 2 w projekcie .NET Core możesz napotkać następujące błędy (od wersji 0.8.3):

Error locating module for declaration
        SilentError: No module files found

LUB

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

[ROZWIĄZANIE]

1. Zmień nazwę app.module.client.ts na app.client.module.ts

2. Otwórz app.client.module.ts: dodaj deklarację 3 kropkami „...” i zawiń deklarację w nawiasach.

   Na przykład: [...sharedConfig.declarations, <MyComponent>]

3. Otwórz boot-client.ts: zaktualizuj import, aby użyć nowego odwołania app.client.module.

   Na przykład: import { AppModule } from './app/app.client.module';

4. Teraz spróbuj wygenerować nowy komponent: ng g component my-component

[WYJAŚNIENIE]

Angular CLI szuka pliku o nazwie app.module.ts w twoim projekcie i próbuje znaleźć odwołania do właściwości deklaracji w celu zaimportowania komponentu. Powinna to być tablica (jak w pliku sharedConfig.declarations), ale zmiany nie zostaną zastosowane

[ŹRÓDŁA]

• https://github.com/angular/angular-cli/issues/2962
• https://www.udemy.com/aspnet-core-angular/learn/v4/t/lecture/6848548 (sekcja 3.33 autor wykładu Bryan Garzon)