Bagikan melalui

Tutorial: Membuat aplikasi ASP.NET Core dengan Angular di Visual Studio

Dalam artikel ini, Anda mempelajari cara membuat proyek ASP.NET Core untuk bertindak sebagai backend API dan proyek Angular untuk bertindak sebagai UI.

Visual Studio menyertakan templat Aplikasi Halaman Tunggal Inti (SPA) ASP.NET yang mendukung Angular dan React. Templat menyediakan folder Aplikasi Klien bawaan di proyek ASP.NET Core Anda yang berisi file dasar dan folder dari setiap kerangka kerja.

Anda dapat menggunakan metode yang dijelaskan dalam artikel ini untuk membuat Aplikasi Halaman Tunggal Inti ASP.NET yang:

  • Letakkan aplikasi klien dalam proyek terpisah, di luar dari proyek ASP.NET Core
  • Membuat proyek klien berdasarkan kerangka kerja CLI yang diinstal di komputer Anda

Nota

Artikel ini menjelaskan proses pembuatan proyek menggunakan templat yang diperbarui di Visual Studio 2022 versi 17.8.

Prasyarat

Pastikan untuk menginstal hal berikut:

  • Visual Studio 2022 version 17.8 or later with the ASP.NET and web development workload installed. Go to the Visual Studio downloads page to install it for free. Jika Anda perlu menginstal beban kerja dan sudah memiliki Visual Studio, buka Alat >Dapatkan Alat dan Fitur..., yang membuka Alat Penginstal Visual Studio. Choose the ASP.NET and web development workload, then choose Modify.
  • npm (https://www.npmjs.com/), which is included with Node.js
  • Angular CLI (https://angular.dev/tools/cli), yang dapat menjadi versi pilihan Anda. Proyek front-end dibuat menggunakan alat CLI kerangka kerja yang telah Anda instal di komputer lokal Anda, jadi ini menentukan versi Angular yang digunakan dalam templat.

Membuat aplikasi

  1. Di jendela Mulai (pilih File>Jendela Mulai untuk dibuka), pilih Buat proyek baru.

    cuplikan layar memperlihatkan Buat proyek baru

  2. Cari Angular di bilah pencarian di bagian atas lalu pilih Angular dan ASP.NET Core.

    Cuplikan layar memperlihatkan memilih templat.

  3. Beri nama proyek AngularWithASP lalu pilih Berikutnya.

    In the Additional Information dialog, make sure that Configure for HTTPS is enabled. Dalam sebagian besar skenario, biarkan pengaturan lain pada nilai default.

  4. Pilih Buat.

    Penjelajah Solusi memperlihatkan hal berikut:

    Cuplikan layar memperlihatkan Penjelajah Solusi.

    Dibandingkan dengan templat Angular mandiri , Anda akan melihat beberapa file baru dan yang dimodifikasi untuk integrasi dengan ASP.NET Core:

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

    Untuk informasi selengkapnya tentang beberapa file proyek ini, lihat Langkah berikutnya.

Mengatur properti proyek

  1. Di Penjelajah Solusi, klik kanan proyek AngularWithASP.Server dan pilih Properti .

    Cuplikan layar memperlihatkan properti Proyek terbuka.

  2. In the Properties page, open the Debug tab and select Open debug launch profiles UI option. Hilangkan centang pada opsi Luncurkan Browser untuk profil https atau profil yang dinamai sesuai dengan proyek ASP.NET Core, jika ada.

    Screenshot showing Debug launch profiles UI.

    Nilai ini mencegah pembukaan halaman web dengan data cuaca sumber.

    Nota

    Di Visual Studio, launch.json menyimpan pengaturan startup yang terkait dengan tombol Mulai di toolbar Debug. launch.json harus berada di bawah folder .vscode.

  3. Klik kanan solusi di Penjelajah Solusi dan pilih properti . Verify that the Startup project settings are set to Multiple projects, and that the Action for both projects is set to Start.

Memulai proyek

Tekan F5 atau pilih tombol Mulai di bagian atas jendela untuk memulai aplikasi. Dua perintah muncul:

  • Proyek ASP.NET Core API berjalan
  • The Angular CLI running the ng start command

Nota

Check console output for messages. Misalnya mungkin ada pesan untuk memperbarui Node.js.

Aplikasi Angular muncul dan diisi melalui API (port localhost dapat bervariasi dari cuplikan layar).

Cuplikan layar memperlihatkan aplikasi prakiraan cuaca.

Jika Anda tidak melihat data prakiraan cuaca di browser, lihat Pemecahan Masalah.

Menerbitkan proyek

Mulai dari Visual Studio 2022 versi 17.3, Anda dapat menerbitkan solusi terintegrasi menggunakan alat Visual Studio Publish.

Nota

Untuk menggunakan publikasi, buat proyek JavaScript Anda menggunakan Visual Studio 2022 versi 17.3 atau yang lebih baru.

  1. In Solution Explorer, right-click the AngularWithASP.Server project and select Add>Project Reference.

    Pastikan proyek angularwithasp.client dipilih.

  2. Pilih OK.

  3. Klik kanan proyek ASP.NET Core lagi dan pilih Edit File Proyek.

    This opens the .csproj file for the project.

  4. Dalam file .csproj, pastikan referensi proyek menyertakan elemen <ReferenceOutputAssembly> dengan nilai yang diatur ke false.

    Referensi ini akan terlihat seperti berikut ini:

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

  5. Klik kanan proyek ASP.NET Core dan pilih Muat Ulang Proyek jika opsi tersebut tersedia.

  6. Di Program.cs, pastikan kode berikut ada.

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

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

  7. Untuk menerbitkan, klik kanan proyek ASP.NET Core, pilih Terbitkan, dan pilih opsi untuk mencocokkan skenario penerbitan yang Anda inginkan, seperti Azure, terbitkan ke folder, dll.

    Proses penerbitan membutuhkan lebih banyak waktu daripada hanya untuk proyek ASP.NET Core, karena perintah npm run build dipanggil saat menerbitkan. The BuildCommand runs npm run build by default.

    Jika Anda menerbitkan ke dalam folder, lihat struktur direktori ASP.NET Core untuk informasi lebih lanjut tentang file-file yang ditambahkan ke folder terbitkan .

Pemecahan masalah

Kesalahan proksi

Anda mungkin melihat kesalahan berikut:

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

Jika Anda melihat masalah ini, kemungkinan besar frontend dimulai sebelum backend.

  • Once you see the backend command prompt up and running, just refresh the Angular app in the browser.
  • Also, verify that the backend is configured to start before the front end. Untuk memverifikasi, pilih solusi di Penjelajah Solusi, pilih Properti dari menu Proyek . Selanjutnya, pilih Konfigurasikan Proyek Startup dan pastikan bahwa proyek backend ASP.NET Core berada di urutan pertama dalam daftar. Jika bukan yang pertama, pilih proyek dan gunakan tombol Panah atas untuk menjadikannya proyek pertama dalam daftar peluncuran.

Verify port

Jika data cuaca tidak dimuat dengan benar, Anda mungkin juga perlu memverifikasi bahwa port Anda sudah benar.

  1. Buka file launchSettings.json di proyek ASP.NET Core Anda (di folder Properti). Get the port number from the applicationUrl property.

    Jika ada beberapa properti applicationUrl, cari properti menggunakan titik akhir https. Ini akan terlihat mirip dengan https://localhost:7049.

  2. Kemudian, buka file proxy.conf.js untuk proyek Angular Anda (lihat di folder src). Perbarui properti target agar sesuai dengan properti applicationUrl di launchSettings.json. Saat Anda memperbaruinya, nilai tersebut akan terlihat mirip dengan ini:

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

Docker

Jika Anda membuat proyek dengan dukungan docker diaktifkan, lakukan langkah-langkah berikut:

  1. Setelah aplikasi dimuat, dapatkan port HTTPS Docker menggunakan jendela kontainer di Visual Studio. Check the Environment or Ports tab.

    Cuplikan layar memperlihatkan port kontainer Docker.

  2. Buka file proxy.conf.js untuk proyek Angular. Perbarui variabel target agar sesuai dengan port HTTPS di jendela Kontainer. Misalnya, dalam kode berikut:

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

    Ubah https://localhost:7209 ke port HTTPS yang cocok (dalam contoh ini, https://localhost:62958).

    Nota

    If the HTTPS port is missing in the Containers window, you can use launchSettings.json file to add the port. Di bagian Container (Dockerfile) dan setelah entri "useSSL": true, tambahkan "sslPort": <any port>. In this example, use the following: "sslPort": 62958.

  3. Mulai ulang aplikasi.

Langkah berikutnya

Untuk informasi selengkapnya tentang aplikasi SPA di ASP.NET Core, lihat bagian Angular di bawah Mengembangkan Aplikasi Halaman Tunggal. Artikel tertaut menyediakan konteks tambahan untuk file proyek seperti aspnetcore-https.js dan proxy.conf.js, meskipun detail implementasi berbeda karena perbedaan templat proyek. Misalnya, alih-alih folder ClientApp, file Angular terkandung dalam proyek terpisah.

For MSBuild information specific to the client project, see MSBuild properties for JSPS.