Góc lấy biến môi trường trong chỉ mục html

Mọi ứng dụng đều trải qua các giai đoạn thử nghiệm trước khi được triển khai vào sản xuất. Nhà phát triển thường kiểm tra ứng dụng trong môi trường nhà phát triển, Người kiểm tra kiểm tra ứng dụng trong môi trường thử nghiệm, Doanh nghiệp kiểm tra ứng dụng trong môi trường uat và cuối cùng, chúng tôi có một môi trường prod cho…

Nội dung chính Show

Cách cập nhật biến môi trường và thậm chí thêm SHA-256 vào chỉ mục ứng dụng của bạn. html mà không cần bất kỳ plugin nào #OTAD-33
Làm cách nào để truy cập các biến môi trường trong HTML góc?
Góc có thể đọc các biến môi trường không?
Chúng tôi có thể thay đổi chỉ mục HTML trong góc không?
HTML chỉ mục hoạt động như thế nào trong góc cạnh?

Cách cập nhật biến môi trường và thậm chí thêm SHA-256 vào chỉ mục ứng dụng của bạn. html mà không cần bất kỳ plugin nào #OTAD-33

Ảnh của Joshua Earle trên Bapt

Tối hôm qua, tôi đã bắt đầu thử thách điên rồ đó là chia sẻ một bài đăng trên blog mỗi ngày cho đến khi đợt kiểm dịch kết thúc tại Thụy Sĩ vào ngày 19 tháng 4 năm 2020, còn 33 ngày nữa cho đến khi hy vọng…

Thiết lập biến môi trường với

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

8 thật tuyệt. Trừ khi chúng tôi cần chuyển cho ứng dụng một số giá trị mà chúng tôi không muốn cam kết với kho lưu trữ

Ví dụ

URL API BackEnd động và có thể thay đổi rất thường xuyên.
. Nếu chúng ta có nhiều môi trường nhà phát triển.
. URL API có thể là duy nhất trong mỗi lần triển khai.

Chúng tôi đang sử dụng thiết bị ghi nhật ký. Và tất cả những gì chúng tôi muốn là thay đổi cấp độ nhật ký trên ứng dụng của chúng tôi.
. Trong trường hợp này, chúng tôi cần thay đổi

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

9 trong tệp

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

0 của mình và xây dựng lại. Chúng tôi không cần phải cam kết thay đổi này với repo.

Trong các quy trình CI/CD (đường ống), một số giá trị có thể được cung cấp bởi các công việc khác
Và nhiều trường hợp sử dụng khác…

Để giải quyết nó, chúng ta có thể tìm thấy một số giải pháp

Tạo/tạo tệp

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

0 nhanh chóng bằng cách sử dụng thư viện

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

0.
— yêu cầu viết và duy trì tập lệnh sẽ thực sự tạo tệp

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

Cấu hình gói web tùy chỉnh.
— chỉ khi bạn thích chơi với cấu hình webpack.

@ngx-env/builder
— yêu cầu sử dụng tiền tố

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

2 cho tất cả các biến môi trường

ngx-build-plus của Manfred Steyer
— mở rộng hành vi xây dựng mặc định của Angular CLI mà không cần đẩy ra.
— cung cấp cho bạn một cách hay và dễ dàng để thao tác cấu hình webpack.

Angular environment variables injection ng-process-env

Trong bài viết này, tôi muốn xem xét một cách tiếp cận sử dụng các khả năng gốc của Angular, chẳng hạn như trình tạo và sơ đồ

ng-tiến trình-env

Hãy bắt đầu với

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

Ý tưởng chính của thư viện này là tạo một phần cấu hình chuyên dụng trong

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

4 và tệp

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

0 có liên quan

Như bạn có thể biết, trong mỗi cấu hình, có một định nghĩa về thay thế tệp

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

// angular.json
{
  "targets": {
    "build": {
      ...
      "configurations": {
        "myconfig": {
          "fileReplacements": [
            {
              "replace": "apps/myblogs/src/environments/environment.ts",
              "with": "apps/myblogs/src/environments/environment.myconfig.ts"
            }
          ]
        }
      }
    }
  }
}

Sau khi cài đặt, chúng ta cần tạo phần cấu hình mới cho ứng dụng của mình.
Để làm như vậy, chỉ cần chạy

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

7.
Ở đâu

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

8 là tên ứng dụng của chúng tôi và

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

9 là tên cấu hình của chúng tôi.
Ví dụ: chúng tôi có ứng dụng myblogs và ngoài các cấu hình mặc định (phát triển và sản xuất), chúng tôi muốn thêm cấu hình mới - triển khai.
Trong trường hợp này, lệnh của chúng ta sẽ như thế này.

{
  "targets": {
    "build": {
      ...
      "configurations": {
        "production": {
          ...
        },
        "development": {
          ...
        },
        "deployment": {
          "fileReplacements": [
            {
              "replace": "apps/myblogs/src/environments/environment.ts",
              "with": "apps/myblogs/src/environments/environment.deployment.ts"
            }
          ]
        }
      }
    }
  }
}

Lệnh này sẽ thực hiện các thay đổi sau đối với mã của bạn

Sẽ tạo một tệp

{
  "targets": {
    "build": {
      ...
      "configurations": {
        "production": {
          ...
        },
        "development": {
          ...
        },
        "deployment": {
          "fileReplacements": [
            {
              "replace": "apps/myblogs/src/environments/environment.ts",
              "with": "apps/myblogs/src/environments/environment.deployment.ts"
            }
          ]
        }
      }
    }
  }
}

1 mới

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

2. Cập nhật

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

4 với phần cấu hình mới

{
  "targets": {
    "build": {
      ...
      "configurations": {
        "production": {
          ...
        },
        "development": {
          ...
        },
        "deployment": {
          "fileReplacements": [
            {
              "replace": "apps/myblogs/src/environments/environment.ts",
              "with": "apps/myblogs/src/environments/environment.deployment.ts"
            }
          ]
        }
      }
    }
  }
}

________số 8

Bây giờ chúng ta có thể xây dựng/cung cấp ứng dụng của mình bằng cờ cấu hình
______84. Tệp

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

0 mặc định
sẽ được thay thế bằng

{
  "targets": {
    "build": {
      ...
      "configurations": {
        "production": {
          ...
        },
        "development": {
          ...
        },
        "deployment": {
          "fileReplacements": [
            {
              "replace": "apps/myblogs/src/environments/environment.ts",
              "with": "apps/myblogs/src/environments/environment.deployment.ts"
            }
          ]
        }
      }
    }
  }
}

Cấu hình cấu hình của bạn

Thời điểm này là thời điểm tốt để thêm các cấu hình cần thiết bổ sung vào phần

{
  "targets": {
    "build": {
      ...
      "configurations": {
        "production": {
          ...
        },
        "development": {
          ...
        },
        "deployment": {
          "fileReplacements": [
            {
              "replace": "apps/myblogs/src/environments/environment.ts",
              "with": "apps/myblogs/src/environments/environment.deployment.ts"
            }
          ]
        }
      }
    }
  }
}

3 hoặc chỉ cần sao chép/dán từ cấu hình

{
  "targets": {
    "build": {
      ...
      "configurations": {
        "production": {
          ...
        },
        "development": {
          ...
        },
        "deployment": {
          "fileReplacements": [
            {
              "replace": "apps/myblogs/src/environments/environment.ts",
              "with": "apps/myblogs/src/environments/environment.deployment.ts"
            }
          ]
        }
      }
    }
  }
}

Bây giờ chúng ta cần thiết lập các biến để truy xuất từ

{
  "targets": {
    "build": {
      ...
      "configurations": {
        "production": {
          ...
        },
        "development": {
          ...
        },
        "deployment": {
          "fileReplacements": [
            {
              "replace": "apps/myblogs/src/environments/environment.ts",
              "with": "apps/myblogs/src/environments/environment.deployment.ts"
            }
          ]
        }
      }
    }
  }
}

9.
Mở tệp

{
  "targets": {
    "build": {
      ...
      "configurations": {
        "production": {
          ...
        },
        "development": {
          ...
        },
        "deployment": {
          "fileReplacements": [
            {
              "replace": "apps/myblogs/src/environments/environment.ts",
              "with": "apps/myblogs/src/environments/environment.deployment.ts"
            }
          ]
        }
      }
    }
  }
}

1 đã tạo và cập nhật phần

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

01 với các biến bạn cần.

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

0Đã đến lúc xây dựng

Bây giờ chúng tôi đã sẵn sàng để thu thập các biến môi trường của mình và xây dựng ứng dụng (trên cục bộ hoặc trong CI/CD)

Giả sử rằng đây là biến môi trường của chúng ta

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

Để thu thập các biến, tất cả những gì chúng ta cần là chạy lệnh

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

02.
Tệp

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

03 sẽ được đổi thành.

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

Tất cả những gì chúng ta cần làm bây giờ là xây dựng ứng dụng của mình với cấu hình

{
  "targets": {
    "build": {
      ...
      "configurations": {
        "production": {
          ...
        },
        "development": {
          ...
        },
        "deployment": {
          "fileReplacements": [
            {
              "replace": "apps/myblogs/src/environments/environment.ts",
              "with": "apps/myblogs/src/environments/environment.deployment.ts"
            }
          ]
        }
      }
    }
  }
}

3.
______205

Hãy tóm tắt nó

Tôi hy vọng một ngày nào đó

// environment.deployment.ts
export const environment = {
  production: false,
  baseUrl: 'http://localhost:4200',
  envVar: {
    /**
     * Add environment variables you want to retriev from process
     * PORT:4200,
     * VAR_NAME: defaultValue
     */
  }
};

8 sẽ hỗ trợ việc sử dụng các biến môi trường. Bạn có thể làm theo yêu cầu tính năng lâu đời này

Làm cách nào để truy cập các biến môi trường trong HTML góc?

Cách sử dụng biến môi trường trong góc? .

Bước 1. Cài đặt ứng dụng góc

Bước 2. Tạo tệp môi trường

Bước 3. Định cấu hình tệp môi trường

Bước 4. Sử dụng biến môi trường

Bước 5. Chạy ứng dụng với môi trường

Góc có thể đọc các biến môi trường không?

Angular cung cấp hỗ trợ tích hợp để định cấu hình và quản lý Biến môi trường . Nó giữ cấu hình môi trường trong thư mục thư mục src/environments.

Chúng tôi có thể thay đổi chỉ mục HTML trong góc không?

Tùy chỉnh cấu hình Webpack trong ứng dụng góc của bạn . we can use the index transform option to modify the HTML file output, based on the environment.

HTML chỉ mục hoạt động như thế nào trong góc cạnh?

tệp html. Angular là một khung cho phép chúng tôi tạo "Ứng dụng một trang" và đây chỉ mục. html là trang đơn do máy chủ cung cấp .

programming html

Góc lấy biến môi trường trong chỉ mục html

Cách cập nhật biến môi trường và thậm chí thêm SHA-256 vào chỉ mục ứng dụng của bạn. html mà không cần bất kỳ plugin nào #OTAD-33

Làm cách nào để truy cập các biến môi trường trong HTML góc?

Góc có thể đọc các biến môi trường không?

Chúng tôi có thể thay đổi chỉ mục HTML trong góc không?

HTML chỉ mục hoạt động như thế nào trong góc cạnh?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội