Membina dan Melayan Aplikasi Sudut Merentasi Persekitaran dengan environment.ts (Angular )

Sebagai pembangun Angular, menggunakan aplikasi anda ke persekitaran yang berbeza – pembangunan (dev), ujian penerimaan pengguna (UAT) dan pengeluaran – adalah perkara biasa. Walau bagaimanapun, menukar kod secara berterusan untuk memenuhi spesifikasi persekitaran ini boleh membosankan, terdedah kepada ralat dan menghalang kecekapan.

Artikel ini menggariskan pendekatan langkah demi langkah untuk membina dan menyediakan aplikasi Sudut anda merentasi pelbagai persekitaran tanpa mengubah suai pangkalan kod, memanfaatkan kefungsian environment.ts yang berkuasa.

Senario:

Bayangkan aplikasi Sudut di mana bahagian hadapan berinteraksi dengan API hujung belakang yang dihoskan pada persekitaran yang berbeza. Mari kita terokai cara mencipta persekitaran baharu, mengkonfigurasinya dan menyediakan/membina aplikasi anda berdasarkan persekitaran sasaran.

Menyediakan Persekitaran:

Jana Fail Persekitaran:

Jalankan arahan berikut dalam terminal anda:

ng menjana persekitaran

Ini mencipta folder bernama persekitaran dalam direktori src, yang mengandungi fail environment.ts awal. Secara lalai, fail ini berfungsi sebagai konfigurasi persekitaran pembangunan anda.

Mentakrifkan Pembolehubah Persekitaran:

Buka environment.ts dan tentukan pembolehubah persekitaran pembangunan anda:

export const environment = {
  production: false, //Set to False for development
  apiUrl: 'http://my-dev-url' //Replace with your development URL
};

Mencipta Fail Khusus Persekitaran:

Untuk persekitaran UAT dan Pengeluaran, cipta fail berasingan:

environment.test.ts (untuk UAT)
environment.prod.ts (untuk Pengeluaran)

Tambahkan URL UAT dan API Pengeluaran anda masing-masing pada fail ini:

// environment.test.ts (UAT)
export const environment = {
  production: false,
  apiUrl: 'http://my-uat-url'
};

// environment.prod.ts (Production)
export const environment = {
  production: true,
  apiUrl: 'http://my-prod-url'
};

Menggunakan Persekitaran dalam Kod:

Untuk menggunakan URL API dalam kod anda:

Import environment.ts:

import { persekitaran } daripada './environments/environment';

Akses URL API:

Dalam perkhidmatan atau komponen anda, suntikan pembolehubah persekitaran:

export class MyService {
  constructor() {}
  apiUrl = environment.apiUrl;
}

Mengkonfigurasi angular.json untuk Binaan Khusus Persekitaran:

Tatarajah Sasaran:

Buka angular.json dan cari bahagian "konfigurasi" di bawah "bina". Ini mentakrifkan konfigurasi binaan untuk persekitaran yang berbeza.

"configurations": {
  "production": {
    // Rest of the configs
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  },

"staging": {
    // Rest of the configs
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.test.ts"
      }
    ]
  },
  // ... other configurations
},

"defaultConfiguration": "production"

Ini mengarahkan CLI Sudut untuk menggantikan environment.ts lalai dengan environment.prod.tssemasa binaan pengeluaran dan environment.test.ts untuk binaan UAT.

Untuk menyediakan aplikasi pada berbilang persekitaran, anda boleh menambah konfigurasi servis di dalam angular.json sebagai:

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": { … },
    "configurations": {
      "development": {
        // Use the `development` configuration of the `build` target.
        "buildTarget": "my-app:build:development"
      },
      "staging": {
        // Use the `development` configuration of the `build` target.
        "buildTarget": "my-app:build:staging"
      },
      "production": {
        // Use the `production` configuration of the `build` target.
        "buildTarget": "my-app:build:production"
      }
    },
    "defaultConfiguration": "development"
  },

Membina dan Berkhidmat untuk Persekitaran Tertentu:

Bina untuk pengeluaran:

Untuk membina aplikasi anda untuk pengeluaran, gunakan:

ng bina --configuration=pengeluaran

Gunakan nama konfigurasi yang ditakrifkan dalam angular.json (pengeluaran, pementasan dalam senario kami)

Hidangkan untuk UAT:

Untuk menyampaikan permohonan anda untuk UAT, gunakan:

ng serve --configuration=staging

Kesimpulan

Menggunakan konfigurasi khusus persekitaran meningkatkan pengalaman pembangun dengan ketara. Ia menawarkan pendekatan yang bersih dan boleh diselenggara, memperkemas penggunaan aplikasi merentasi pelbagai persekitaran dan akhirnya mengurangkan masa min untuk pengeluaran (MTTP).

Selain itu, jika anda suka membaca artikel ini, anda boleh mengetahui lebih lanjut tentang saya di sini.

Atas ialah kandungan terperinci Membina dan Melayan Aplikasi Sudut Merentasi Persekitaran dengan environment.ts (Angular ). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!