Tôi có thể chuyển đối số cho angular-cli tại thời gian build

Question

Tôi muốn chuyển đối số tùy chỉnh tới angular-cli khi tạo ứng dụng Angular2 (bản ghi). Điều này có thể không? Làm thế nào tôi có thể truy cập đối số này trong mã của tôi?

Kịch bản giống như sau: Tôi có một ứng dụng Angular2 với 2 bố cục. Mỗi bố cục có 3 màu (đỏ, xanh dương, xanh lục). Tôi muốn xây dựng tất cả các kết hợp có thể. Một ứng dụng cho mỗi bố cục và màu => layout1red, layout1green, layout2blue, ...

Tôi muốn tạo 6 tệp cấu hình JSON cho mỗi bản dựng, nơi tôi xác định bố cục và màu sắc và một số thuộc tính bổ sung.

Answer 1

Có thể tạo nhiều tệp cấu hình với @angular/cli.

Như đã đề cập trong docs file cấu hình tùy chỉnh có thể được thêm vào trong các cách sau:

• tạo src/environments/environment.NAME.ts
• thêm { "NAME": 'src/environments/environment.NAME.ts' } đến đối tượng apps[0].environments trong .angular-cli.json
• sử dụng chúng thông qua --env=NAME cờ trên xây dựng/phục vụ lệnh.

Vì vậy, có thể bạn sẽ cần 6 tệp cấu hình cho dev và 6 tệp cấu hình cho sản phẩm.

Và sau đó truy cập các biến đó, chỉ cần nhập đối tượng môi trường từ tệp environment.ts.

Answer 2

tôi đã không nhận được câu hỏi của bạn đầy đủ, tôi có thể nghĩ đến hai cách để làm cho điều này xảy ra:

luận A- Passing khi tạo một dự án mới:

1- Để có thể vượt qua các đối số cho cli góc, bạn cần hiểu nơi bạn muốn nó được sử dụng.

Nếu các cấu hình đó được sử dụng trong bố cục của bạn, bạn có thể ngã ba nút angi và cập nhật bản thiết kế và dễ dàng thêm cấu hình của riêng bạn.

Dưới đây là các thành phần kế hoạch chi tiết:

 angular-cli/packages/@angular/cli/blueprints/component/files/__path__/__name__.component.ts 

nào trông như thế này:

@Component({ 
    selector: '<%= selector %>',<% if(inlineTemplate) { %> 
    template: ` 

bạn thấy selector? đó là tên của thành phần mà bạn có thể chơi cùng và khi kết thúc khi bạn đang tạo một dự án mới, bạn có thể chuyển cờ của riêng mình vào đó và sử dụng nó.

Nhưng đây không phải là ý tưởng tốt nhất vì bạn luôn gặp rắc rối khi cập nhật cli góc.

2- Các giải pháp khả thi khác là sử dụng ng eject

Điều này sẽ tạo ra các cấu hình webpack trong một file riêng biệt và đặt nó trong thư mục gốc của dự án của bạn, sau đó bạn có thể chơi với tập tin đó và cung cấp cấu hình của bạn và làm cho nó được tùy chỉnh cho mỗi ứng dụng của bạn.

Nhưng một lần nữa, tôi không chắc chắn bạn muốn sử dụng cấu hình đó như thế nào.

Đây là ứng cử viên hoàn hảo cho cấu hình build time của bạn.

3 Sử dụng các cấu hình environments:

Như nó đã được trả lời, điều này cũng rất thuận tiện cho việc cung cấp build time cấu hình:

Thực hiện theo @mikedanylov 's câu trả lời và sau đó sử dụng nó như thế này trong bạn tập tin:

import { environment } from './environments/environment'; 

if(environment.colorRed==='blue'){ 

    console.log('the color is blue'); 

} 


npm build -e=colorRed 

---

B: Run time:

Đây là một lựa chọn tốt hơn, bạn có thể tạo ra một cuộc gọi trong index.html của bạn như thế này:

<script scr="wherever/configurations/blue"></script> 

và sau đó bên trong cấu hình bạn có thể có:

var configuration = { 
     whatEver:"blue" 
    } 

và vì đây là một tập lệnh, nó có sẵn ở khắp mọi nơi và bạn có thể truy cập nó trong các thành phần của bạn:

export class MyComponent{ 


    ngOnInit(){ 
     console.log('colour is : '+window['configuration.whatEver']); // obviously you can improve this and create type definitions and what not. 
    } 
} 

Điều này sẽ cung cấp cho bạn nhiều flexib về việc cập nhật cấu hình của bạn trong tương lai mà không cần phải xây dựng lại ứng dụng của bạn.

Rõ ràng bạn có thể thực hiện cùng một cuộc gọi thông qua cuộc gọi Ajax, nhưng tôi thấy ở trên là ứng dụng không thuyết phục hơn.