Aracılığıyla paylaş

Öğretici: Visual Studio'da Angular ile ASP.NET Core uygulaması oluşturma

Bu makalede, API arka ucu olarak hareket etmek için bir ASP.NET Core projesi ve kullanıcı arabirimi olarak davranacak bir Angular projesi oluşturmayı öğreneceksiniz.

Visual Studio, Angular ve React'i destekleyen ASP.NET Core Tek Sayfalı Uygulama (SPA) şablonları içerir. Şablonlar, ASP.NET Core projelerinizde her çerçevenin temel dosyalarını ve klasörlerini içeren yerleşik bir İstemci Uygulaması klasörü sağlar.

Aşağıdaki ASP.NET Temel Tek Sayfalı Uygulamalar oluşturmak için bu makalede açıklanan yöntemi kullanabilirsiniz:

  • İstemci uygulamasını ASP.NET Core projesinin dışında ayrı bir projeye yerleştirme
  • Bilgisayarınızda yüklü çerçeve CLI'sini temel alarak istemci projesini oluşturma

Uyarı

Bu makalede, Visual Studio 2022 sürüm 17.8'de güncelleştirilmiş şablon kullanılarak proje oluşturma işlemi açıklanır.

Önkoşullar

Aşağıdakileri yüklediğinizden emin olun:

  • Visual Studio 2022 sürüm 17.8 veya üzeri ile ASP.NET ve web geliştirme iş yükü yüklü. Visual Studio'yu ücretsiz yüklemek için Visual Studio indirmeleri sayfasına gidin. İş yükünü yüklemeniz gerekiyorsa ve Visual Studio'yu zaten yüklediyseniz, Visual Studio Yükleyicisi'ni açan Araçlar>Araç ve Özellikleri Al...gidin. ASP.NET ve web geliştirme iş yükünü seçin, ardından değiştir'iseçin.
  • npm (https://www.npmjs.com/), Node.js ile birlikte gelen
  • Angular CLI (https://angular.dev/tools/cli), seçtiğiniz sürüm olabilir. Ön uç projesi, yerel makinenize yüklediğiniz çerçeve CLI araçları kullanılarak oluşturulur, bu nedenle şablonda kullanılan Angular sürümünü belirler.

Uygulamayı oluşturma

  1. Başlangıç penceresini açmak için Dosya>Başlangıç Penceresi seçin, ardından Yeni bir proje oluşturseçin.

    Yeni proje oluşturma gösteren ekran görüntüsü

  2. Üstteki arama çubuğunda Angular'ı arayın ve ardından Angular ve ASP.NET Coreöğesini seçin.

    Şablon seçmeyi gösteren ekran görüntüsü.

  3. Projeyi AngularWithASP adlandırın ve Sonrakiseçin.

    Ek Bilgi iletişim kutusunda HTTPS için yapılandır seçeneğinin etkin olduğundan emin olun. Çoğu senaryoda, diğer ayarları varsayılan değerlerde bırakın.

  4. Oluştur'uSeçin.

    Çözüm Gezgini aşağıdakileri gösterir:

    çözüm gezginini gösteren ekran görüntüsü .

    tek başına Angular şablonuyla karşılaştırıldığında, ASP.NET Core ile tümleştirme için bazı yeni ve değiştirilmiş dosyalar görürsünüz:

    • aspnetcore-https.js
    • proxy.conf.js
    • package.json(değiştirildi)
    • angular.json(değiştirildi)
    • app.components.ts
    • app.module.ts

    Bu proje dosyalarından bazıları hakkında daha fazla bilgi için bkz. Sonraki adımlar.

Proje özelliklerini ayarlama

  1. Çözüm Gezgini'nde AngularWithASP.Server projesine sağ tıklayın ve Özellikleröğesini seçin.

    Proje özelliklerini açma ekranının görüntüsü.

  2. Özellikler sayfasında hata ayıklama sekmesini açın ve Hata ayıklama başlatma profilleri kullanıcı arabirimini aç seçeneğini seçin. Tarayıcıyı Başlat seçeneğinin işaretini, varsa, https profili veya ASP.NET Core projesinin adını taşıyan profil için kaldırın.

    Başlatma profillerinde hata ayıklama kullanıcı arabirimini gösteren ekran görüntüsü.

    Bu değer, kaynak hava durumu verileriyle web sayfasının açılmasını engeller.

    Uyarı

    Visual Studio'da launch.json, hata ayıklama araç çubuğundaki Başlangıç düğmesiyle ilişkili başlangıç ayarlarını depolar. launch.json .vscode klasörünün altında bulunmalıdır.

  3. Çözüm Gezgini'nde çözüme sağ tıklayın ve Özellikleröğesini seçin. Başlangıç projesi ayarlarının Birden çok projeolarak ayarlandığını ve her iki proje için Eylem'in Başlatolarak ayarlandığını doğrulayın.

Projeyi başlatma

Uygulamayı başlatmak için F5 basın veya pencerenin üst kısmındaki Başlangıç düğmesini seçin. İki komut istemi görüntülenir:

  • çalışan ASP.NET Core API projesi
  • Angular CLI'nin 'ng start' komutunu çalıştırması

Uyarı

İletiler için konsol çıkışını denetleyin. Örneğin, Node.jsgüncelleştirilmesi için bir ileti olabilir.

Angular uygulaması görünür ve API aracılığıyla doldurulur (localhost bağlantı noktası ekran görüntüsünden farklı olabilir).

Hava durumu tahmin uygulamasını gösteren ekran görüntüsü.

Hava durumu tahmin verilerini tarayıcıda görmüyorsanız bkz . Sorun giderme.

Projeyi yayımlama

Visual Studio 2022 sürüm 17.3'den başlayarak, Visual Studio Yayımlama aracını kullanarak tümleşik çözümü yayımlayabilirsiniz.

Uyarı

Yayımlama özelliğini kullanmak için Visual Studio 2022 sürüm 17.3 veya üzerini kullanarak JavaScript projenizi oluşturun.

  1. Çözüm Gezgini'nde AngularWithASP.Server projesine sağ tıklayın ve >Proje Referansı Ekleseçin.

    angularwithasp.client projesi'nın seçili olduğundan emin olun.

  2. Tamam'ı seçin.

  3. ASP.NET Core projesine yeniden sağ tıklayın ve proje dosyasını düzenle seçin.

    Bu işlem, projenin .csproj dosyasını açar.

  4. .csproj dosyasında, proje referansının değerinin <ReferenceOutputAssembly>olarak ayarlandığı bir false öğesi içerdiğinden emin olmalısınız.

    Bu referans aşağıdaki gibi görünmelidir:

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

  5. ASP.NET Core projesine sağ tıklayın ve bu seçenek varsa Projeyi Yeniden Yükle seçin.

  6. Program.csiçinde aşağıdaki kodun mevcut olduğundan emin olun.

    app.UseDefaultFiles();
app.UseStaticFiles();

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

  7. Yayımlamak için ASP.NET Core projesine sağ tıklayın, Yayımla'ı seçin ve azure gibi istediğiniz yayımlama senaryosuyla eşleşecek seçenekleri belirleyin( örneğin, bir klasörde yayımla vb.).

    Yayımlama işlemi yalnızca bir ASP.NET Core projesi için olduğundan daha fazla zaman alır çünkü yayımlama sırasında npm run build komutu çağrılır. BuildCommand varsayılan olarak npm run build çalıştırır.

    Bir klasörde yayımlarsanız, yayımlama klasörüne eklenen dosyalar hakkında daha fazla bilgi için bkz. ASP.NET Core dizin yapısı.

Sorun giderme

Ara sunucu hatası

Aşağıdaki hatayı görebilirsiniz:

[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)

Eğer bu sorunu görüyorsanız, büyük olasılıkla frontend, backend'den önce başlamıştır.

  • Arka uç komut isteminin çalışır durumda olduğunu gördüğünüzde, tarayıcıda Angular uygulamasını yenilemeniz gerekir.
  • Ayrıca, arka ucun ön uç öncesinde başlatacak şekilde yapılandırıldığını doğrulayın. Doğrulamak için Çözüm Gezgini'nde çözümü seçin, Proje menüsünden Özellikler seçin. Ardından başlangıç projelerini yapılandırma seçin ve arka uç ASP.NET Core projesinin listede ilk sırada olduğundan emin olun. İlk değilse projeyi seçin ve Yukarı ok düğmesini kullanarak projeyi başlatma listesindeki ilk proje yapın.

Bağlantı noktasını doğrulama

Hava durumu verileri doğru yüklenmiyorsa bağlantı noktalarınızın doğru olduğunu da doğrulamanız gerekebilir.

  1. ASP.NET Core projenizde (launchSettings.json klasöründe) dosyasına gidin. applicationUrl özelliğinden bağlantı noktası numarasını alın.

    Birden çok applicationUrl özelliği varsa, https uç noktası kullanan bir özellik arayın. https://localhost:7049'e benzemelidir.

  2. Ardından Angular projenizin proxy.conf.js dosyasına gidin (src klasörüne bakın). hedef özelliğini applicationUrl özelliğiyle eşleşecek şekilde güncelleştirin. Güncelleştirdiğinizde, bu değer şuna benzer görünmelidir:

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

Docker

Projeyi Docker desteği etkin olarak oluşturursanız aşağıdaki adımları izleyin:

  1. Uygulama yükledikten sonra Visual Studio'da Kapsayıcıları penceresini kullanarak Docker HTTPS bağlantı noktasını alın. Ortamı veya Bağlantı Noktaları sekmesini denetleyin.

    docker kapsayıcısı bağlantı noktalarını gösteren ekran görüntüsü .

  2. Angular projesi için proxy.conf.js dosyasını açın. target değişkenini Kapsayıcılar penceresindeki HTTPS bağlantı noktasıyla eşleşecek şekilde güncelleştirin. Örneğin, aşağıdaki kodda:

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

    https://localhost:7209 eşleşen HTTPS bağlantı noktasıyla değiştirin (bu örnekte https://localhost:62958).

    Uyarı

    Kapsayıcılar penceresinde HTTPS bağlantı noktası eksikse, bağlantı noktasını eklemek için launchSettings.json dosyasını kullanabilirsiniz. bölümünde Container (Dockerfile) ve girdiden "useSSL": truesonra ekleyin "sslPort": <any port>. Bu örnekte, aşağıdakileri kullanın: "sslPort": 62958.

  3. Uygulamayı yeniden başlatın.

Sonraki adımlar

ASP.NET Core'daki SPA uygulamaları hakkında daha fazla bilgi için Tek Sayfalı Uygulamalar Geliştirmealtındaki Angular bölümüne bakın. Bağlantılı makale, aspnetcore-https.js ve proxy.conf.jsgibi proje dosyaları için ek bağlam sağlar, ancak uygulama ayrıntıları proje şablonu farklılıkları nedeniyle farklıdır. Örneğin, ClientApp klasörü yerine Angular dosyaları ayrı bir projede yer alır.

İstemci projesine özgü MSBuild bilgileri için bkz. JSPS için MSBuild özellikleri.