Berlaku untuk: Studio visual TidakVisual Studio untuk Mac TidakKode Visual Studio

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

Saat ini, Visual Studio menyertakan template ASP.NET Core Single Page Application (SPA) yang mendukung Angular dan React. Template menyediakan folder Aplikasi Klien bawaan di proyek ASP.NET Core Anda yang berisi file dan folder dasar dari setiap kerangka kerja.

Mulai Visual Studio 2022 Pratinjau 2, Anda dapat menggunakan metode yang dijelaskan dalam artikel ini untuk membuat Aplikasi Halaman Tunggal Inti ASP.NET yang:

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

Prasyarat

Pastikan untuk menginstal yang berikut ini:

  • Visual Studio 2022 Pratinjau 2 atau lebih baru dengan ASP.NET dan pengembangan web beban kerja terpasang. Buka halaman unduhan Visual Studio untuk menginstalnya secara gratis. Jika Anda perlu menginstal beban kerja dan sudah memiliki Visual Studio, buka Peralatan > Dapatkan Alat dan Fitur…, yang membuka Penginstal Visual Studio. Memilih ASP.NET dan pengembangan web beban kerja, lalu pilih Memodifikasi.
  • npm (https://www.npmjs.com/), yang disertakan dengan Node.js
  • Angular CLI (https://angular.io/cli) Ini bisa menjadi versi pilihan Anda

Buat aplikasi frontend

  1. Di jendela Mulai (pilih Mengajukan > Mulai Jendela untuk membuka), pilih Buat proyek baru.


    Buat proyek baru

  2. Cari Angular di bilah pencarian di bagian atas lalu pilih Template Sudut TypeScript Mandiri.


    Pilih template

  3. Beri nama proyek dan solusi Anda. Ketika Anda sampai di Informasi tambahan jendela, pastikan untuk memeriksa Tambahkan integrasi untuk Proyek API Web ASP.NET Kosong pilihan. Opsi ini menambahkan file ke templat Angular Anda sehingga dapat dihubungkan nanti dengan proyek ASP.NET Core.


    Informasi tambahan

    Setelah proyek dibuat, Anda akan melihat beberapa file baru dan yang dimodifikasi:

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

Buat aplikasi backend

  1. Di Solution Explorer, klik kanan nama solusi, arahkan kursor ke atas Menambahkanlalu pilih Proyek baru.


    Tambahkan proyek baru

  2. Cari dan pilih proyek ASP.NET Core Web API.


    Pilih template API Web

  3. Beri nama proyek dan solusi Anda. Ketika Anda sampai di Informasi tambahan jendela, pilih .NET 6.0 sebagai kerangka kerja target Anda.

    Setelah proyek dibuat, Solution Explorer akan terlihat seperti ini:


    Lihatlah Solution Explorer

Tetapkan properti proyek

  1. Di Solution Explorer, klik kanan proyek ASP.NET Core dan pilih Properti.


    Buka properti proyek

  2. Buka menu Debug dan pilih Buka UI profil peluncuran debug pilihan. Hapus centang Luncurkan Peramban pilihan.


    Buka UI profil peluncuran debug

    Catatan

    Saat ini, peluncuran.json harus terletak di bawah .vscode map.

Atur proyek startup

  1. Di Solution Explorer, klik kanan nama solusi dan pilih Atur Proyek Startup. Ubah proyek startup dari proyek startup tunggal menjadi Beberapa proyek startup. Pilih Awal untuk setiap tindakan proyek.


    Setel beberapa proyek startup

  2. Selanjutnya, pilih proyek backend dan pindahkan ke atas frontend, sehingga dimulai terlebih dahulu.


    Pilih proyek startup pertama

Mulai proyek

Sebelum Anda memulai proyek, pastikan nomor port cocok.

  1. Pergi ke launchSettings.json file di proyek ASP.NET Core Anda (di Properti map). Dapatkan nomor port dari applicationUrl Properti.

    Jika ada beberapa applicationUrl properti, cari satu menggunakan an https titik akhir. Seharusnya terlihat mirip dengan https://localhost:7049.

  2. Kemudian, pergi ke proxy.conf.js file untuk proyek Angular Anda (lihat di src map). Perbarui properti target agar sesuai dengan applicationUrl properti di launchSettings.json. Saat Anda memperbaruinya, nilai itu akan terlihat seperti ini:

    target: 'https://localhost:7049',
    
  3. Untuk memulai proyek, tekan F5 atau pilih Awal tombol di bagian atas jendela. Anda akan melihat dua prompt perintah muncul:

    • Proyek API Inti ASP.NET berjalan
    • CLI Angular menjalankan perintah ng start

    Catatan

    Periksa keluaran konsol untuk pesan, seperti pesan yang menginstruksikan Anda untuk memperbarui versi Node.js Anda.

Anda akan melihat aplikasi Angular muncul, yang diisi melalui API. Jika Anda tidak melihat aplikasi tersebut, lihat Pemecahan Masalah.

Publikasikan proyek

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

Catatan

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

  1. Di Solution Explorer, klik kanan proyek ASP.NET Core dan pilih Menambahkan > Referensi projek.

  2. Pilih proyek Angular dan pilih Oke.

  3. Klik kanan proyek ASP.NET Core di Solution Explorer dan pilih Bongkar Proyek.

    Ini membuka .csproj berkas untuk proyek.

  4. Dalam .csproj file, perbarui referensi proyek dan tambahkan <ReferenceOutputAssembly> dengan nilai yang ditetapkan ke false.

    Ketika Anda telah memperbarui referensi, itu akan terlihat seperti ini (mengganti folder proyek Anda sendiri dan nama proyek).

    <ProjectReference Include="..\angularprojectfolder\angularprojectname.esproj">
        <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
    </ProjectReference>
    
  5. Klik kanan proyek ASP.NET Core dan pilih Muat Ulang Proyek.

  6. Untuk mempublikasikan, klik kanan proyek ASP.NET Core, pilih Menerbitkandan pilih opsi untuk mencocokkan skenario publikasi yang Anda inginkan, seperti Azure, publikasikan ke folder, dkk.

    Proses publikasi membutuhkan lebih banyak waktu daripada hanya untuk proyek ASP.NET Core, karena npm run build command akan dipanggil saat penerbitan.

    Anda dapat memodifikasi npm run build perintah menggunakan Perintah Pembuatan Produksi di properti proyek Angular. Untuk memodifikasinya, klik kanan proyek Angular di Solution Explorer dan pilih Properti.

Penyelesaian masalah

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. Setelah Anda melihat prompt perintah backend aktif dan berjalan, cukup segarkan Aplikasi Angular di browser.

By AKDSEO