Samouczek: tworzenie aplikacji ASP.NET Core za pomocą usługi Angular w programie Visual Studio

Z tego artykułu dowiesz się, jak utworzyć projekt ASP.NET Core, który będzie działać jako zaplecze interfejsu API i projekt Angular, który będzie działać jako interfejs użytkownika.

Program Visual Studio zawiera szablony aplikacji jednostronicowej (SPA) ASP.NET Core, które obsługują platformę Angular i React. Szablony udostępniają wbudowany folder Aplikacja kliencka w projektach ASP.NET Core, który zawiera podstawowe pliki i foldery każdej struktury.

Możesz użyć metody opisanej w tym artykule, aby utworzyć aplikacje jednostronicowe ASP.NET Core, które:

• Umieść aplikację kliencką w osobnym projekcie spoza projektu ASP.NET Core
• Utwórz projekt klienta na podstawie frameworku CLI zainstalowanego na komputerze.

Warunki wstępne

Upewnij się, że zainstalowano następujące elementy:

• Program Visual Studio 2022 w wersji 17.8 lub nowszej z zainstalowanym obciążeniem ASP.NET i tworzenia aplikacji internetowych. Przejdź do strony pobierania programu Visual Studio , aby zainstalować ją bezpłatnie. Jeśli musisz zainstalować obciążenie i masz już program Visual Studio, przejdź do Tools>Get Tools and Features..., co spowoduje otwarcie Instalatora programu Visual Studio. Wybierz obciążenie ASP.NET i tworzenia aplikacji internetowych, a następnie wybierz pozycję Modyfikuj.
• npm (https://www.npmjs.com/), który jest dołączony do Node.js
• Angular CLI (https://angular.dev/tools/cli), który może być wersją według Twojego wyboru. Projekt front-end jest tworzony przy użyciu narzędzi CLI frameworka zainstalowanych na lokalnym komputerze, więc określa to wersję Angular używaną w szablonie.

Tworzenie aplikacji frontonu

1. W oknie Start (wybierz pozycję Plik> Okno Start, aby otworzyć), wybierz pozycję Utwórz nowy projekt.

   

2. Wprowadź Angular na pasku wyszukiwania u góry, a następnie wybierz pozycję Angular i ASP.NET Core.

   

3. Nadaj projektowi nazwę AngularWithASP, a następnie wybierz pozycję Dalej.

   W oknie dialogowym „Dodatkowe Informacje” upewnij się, że opcja Konfigurowanie dla HTTPS jest włączona. W większości scenariuszy pozostaw inne ustawienia na wartościach domyślnych.

4. Wybierz pozycję Utwórz.

   W Eksploratorze rozwiązań są wyświetlane następujące elementy:

   

   W porównaniu z autonomicznym szablonem angular zobaczysz kilka nowych i zmodyfikowanych plików do integracji z platformą ASP.NET Core:

   • aspnetcore-https.js
   • proxy.conf.js
   • package.json(zmodyfikowane)
   • angular.json(zmodyfikowane)
   • app.components.ts
   • app.module.ts

   Aby uzyskać więcej informacji na temat niektórych z tych plików projektu, zobacz Następne kroki.

Ustawianie właściwości projektu

1. W Eksploratorze rozwiązań kliknij prawym przyciskiem myszy projekt AngularWithASP.Server i wybierz Właściwości.

   

2. Na stronie Właściwości otwórz kartę Debug i wybierz opcję Otwórz interfejs użytkownika profili uruchamiania debugowania. Usuń zaznaczenie opcji Uruchom przeglądarkę dla profilu https lub profilu nazwanego na podstawie projektu ASP.NET Core, jeśli taki istnieje.

   

   Ta wartość uniemożliwia otwarcie strony internetowej przy użyciu danych o pogodzie źródłowej.

   Notatka

   W programie Visual Studio launch.json przechowuje ustawienia uruchamiania skojarzone z przyciskiem Uruchom na pasku narzędzi Debugowanie. launch.json musi znajdować się w folderze .vscode.

3. Kliknij rozwiązanie prawym przyciskiem myszy w Eksploratorze rozwiązań i wybierz pozycję właściwości . Sprawdź, czy ustawienia projektu uruchamiania są ustawione na wiele projektówi czy akcja dla obu projektów jest ustawiona na Start.

Uruchamianie projektu

Naciśnij F5 lub wybierz przycisk Rozpocznij w górnej części okna, aby uruchomić aplikację. Pojawią się dwa wiersze polecenia:

• Projekt interfejsu API ASP.NET Core uruchomiony
• Interfejs wiersza polecenia platformy Angular z uruchomionym poleceniem ng start

Zostanie wyświetlona aplikacja Angular i zostanie wypełniona za pośrednictwem interfejsu API (port localhost może się różnić od zrzutu ekranu).

Jeśli nie widzisz aplikacji, zobacz Rozwiązywanie problemów.

Publikowanie projektu

Począwszy od programu Visual Studio 2022 w wersji 17.3, możesz opublikować zintegrowane rozwiązanie przy użyciu narzędzia Publikuj w programie Visual Studio.

1. W Eksploratorze rozwiązań kliknij prawym przyciskiem myszy projekt AngularWithASP.Server i wybierz pozycję Dodaj referencję do projektu>.

   Upewnij się, że wybrano projekt angularwithasp.client.

2. Wybierz pozycję OK.

3. Ponownie kliknij prawym przyciskiem myszy projekt ASP.NET Core i wybierz polecenie Edytuj plik projektu.

   Spowoduje to otwarcie pliku .csproj dla projektu.

4. W pliku .csproj upewnij się, że odwołanie do projektu zawiera element <ReferenceOutputAssembly> z wartością ustawioną na false.

   To odwołanie powinno wyglądać jak poniżej.

    <ProjectReference Include="..\angularwithasp.client\angularwithasp.client.esproj">
      <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
    </ProjectReference>
   

5. Kliknij prawym przyciskiem myszy projekt ASP.NET Core i wybierz pozycję Załaduj ponownie projekt, jeśli ta opcja jest dostępna.

6. W Program.csupewnij się, że jest obecny następujący kod.

   app.UseDefaultFiles();
   app.UseStaticFiles();
   
   // Configure the HTTP request pipeline.
   if (app.Environment.IsDevelopment())
   {
      app.UseSwagger();
      app.UseSwaggerUI();
   }
   

7. Aby opublikować, kliknij prawym przyciskiem myszy projekt ASP.NET Core, wybierz pozycję Publikuji wybierz opcje, aby dopasować go do żądanego scenariusza publikowania, takiego jak platforma Azure, publikowanie w folderze itp.

   Proces publikowania zajmuje więcej czasu niż tylko w przypadku projektu ASP.NET Core, ponieważ polecenie npm run build jest wywoływane podczas publikowania. BuildCommand jest domyślnie uruchamiany npm run build.

   Jeśli publikujesz w folderze, zobacz strukturę katalogów ASP.NET Core, aby uzyskać więcej informacji na temat plików dodanych do folderu publikowania .

Rozwiązywanie problemów

Błąd serwera proxy

Może zostać wyświetlony następujący błąd:

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:5001 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

Jeśli widzisz ten problem, najprawdopodobniej frontend został uruchomiony przed backendem.

• Gdy zobaczysz, że wiersz polecenia zaplecza działa, po prostu odśwież aplikację Angular w przeglądarce.
• Sprawdź również, czy backend jest skonfigurowany do uruchomienia przed frontendem. Aby sprawdzić, wybierz rozwiązanie w Eksploratorze rozwiązań, wybierz pozycję właściwości z menu Project. Następnie wybierz Skonfiguruj projekty startowe i upewnij się, że projekt ASP.NET Core (backend) jest pierwszy na liście. Jeśli nie jest to pierwszy, wybierz projekt i użyj przycisku Strzałka w górę, aby utworzyć pierwszy projekt na liście uruchamiania.

Weryfikowanie portu

Jeśli dane pogodowe nie są ładowane poprawnie, może być również konieczne sprawdzenie, czy porty są poprawne.

1. Przejdź do pliku w projekcie ASP.NET Core (w folderze właściwości ). Pobierz numer portu z właściwości applicationUrl.

   Jeśli istnieje wiele właściwości applicationUrl, poszukaj jednej, która używa punktu końcowego https. Powinien wyglądać podobnie do https://localhost:7049.

2. Następnie przejdź do pliku proxy.conf.js projektu Angular (wyszukaj w folderze src). Zaktualizuj właściwość docelową tak, aby odpowiadała właściwości applicationUrl w launchSettings.json. Po zaktualizowaniu tej wartości powinna wyglądać podobnie do następującej:

   target: 'https://localhost:7049',
   

Doker

Jeśli utworzysz projekt z obsługą platformy Docker włączoną, wykonaj następujące czynności:

1. Po załadowaniu aplikacji pobierz port HTTPS platformy Docker przy użyciu okna kontenerów w programie Visual Studio. Sprawdź kartę Environment lub Ports.

   

2. Otwórz plik proxy.conf.js dla projektu Angular. Zaktualizuj zmienną target, aby odpowiadała portowi HTTPS w oknie Kontenery. Na przykład w poniższym kodzie:

   const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
      env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'https://localhost:7209';
   

   zmień https://localhost:7209 na pasujący port HTTPS (w tym przykładzie https://localhost:62958).

3. Uruchom ponownie aplikację.

Następne kroki

Aby uzyskać więcej informacji na temat aplikacji SPA w ASP.NET Core, zobacz sekcję Angular w obszarze Tworzenie aplikacji jednostronicowych. Artykuł połączony zawiera dodatkowy kontekst dla plików projektów, takich jak aspnetcore-https.js i proxy.conf.js, chociaż szczegóły implementacji różnią się ze względu na różnice między szablonami projektu. Na przykład zamiast folderu ClientApp pliki Angular znajdują się w osobnym projekcie.

Aby uzyskać specyficzne dla projektu klienta informacje dotyczące programu MSBuild, zobacz właściwości programu MSBuild dla JSPS.