Czy mogę przekazywać argumenty do angular-cli w czasie kompilacji

Question

Chciałbym przekazać niestandardowe argumenty do angular-cli podczas budowania aplikacji Angular2 (maszynopis). czy to możliwe? Jak uzyskać dostęp do tych argumentów w moim kodzie?

Scenariusz wygląda tak: mam jedną aplikację Angular2 z 2 układami. Każdy układ ma 3 kolory (czerwony, niebieski, zielony). Chcę zbudować wszystkie możliwe kombinacje. Jedna aplikacja na układ i kolor => layout1red, layout1green, layout2blue, ...

Chcę utworzyć 6 plików konfiguracyjnych JSON dla każdej kompilacji, w której zdefiniuję układ i kolor, a może niektóre dodatkowe właściwości.

Answer 1

Możliwe jest tworzenie wielu plików konfiguracyjnych za pomocą @angular/cli.

Jak wspomniano w docs plikach konfiguracyjnych użytkownika można dodać w następujący sposób:

• stworzyć src/environments/environment.NAME.ts
• dodać { "NAME": 'src/environments/environment.NAME.ts' } do obiektu apps[0].environments w .angular-cli.json
• z nich korzystać za pośrednictwem flagi --env=NAME w sprawie buduj/serwuj polecenia.

Prawdopodobnie potrzebujesz 6 plików konfiguracyjnych dla dev i 6 plików konfiguracyjnych dla prod.

A następnie, aby uzyskać dostęp do tych zmiennych, wystarczy zaimportować obiekt środowiska z pliku environment.ts.

Answer 2

nie dostać swoje pytanie pełni, mogę pomyśleć dwa sposoby dokonywania tak się stało:

A- Przekazywanie argumentów podczas generowania nowego projektu:

1- Aby móc przekazać argumenty do kanciastego cli, musisz zrozumieć, gdzie chcesz go użyć.

Jeśli te konfiguracje są używane w twoim układzie, możesz rozwidlić Angular cli i zaktualizować jego plan i łatwo dodać własną konfigurację.

Oto plan Składniki:

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

który wygląda tak:

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

widać selector? to jest nazwa komponentu, z którym możesz grać, a na końcu, gdy tworzysz nowy projekt, możesz tam przekazywać własne flagi i używać go.

Ale to nie jest najlepszy pomysł, ponieważ zawsze masz kłopoty z aktualizacją Angular cli.

2- Innym możliwym rozwiązaniem jest użycie ng eject

To wygeneruje konfigurację webpack w oddzielnym pliku i umieszcza go w folderze głównym projektu można następnie odtwarzać z tego pliku i podaj konfigurację i uczynić dostosowuje się do Twojej aplikacji.

Ale znowu nie jestem pewien, jak chcesz korzystać z tej konfiguracji.

Jest to idealny kandydat do konfiguracji build time.

3- Użyj konfiguracji environments:

jak to już odpowiedzi, jest to również bardzo wygodne dla zapewnienia build time konfigurację:

odpowiedź Obserwuj @mikedanylov „s, a następnie używać go tak jak to w tobie plików:

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

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

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

} 


npm build -e=colorRed 

---

B: Run time:

ten jest lepszym rozwiązaniem, można utworzyć połączenia w swojej index.html tak:

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

a następnie wewnątrz konfiguracji może mieć:

var configuration = { 
     whatEver:"blue" 
    } 

a ponieważ jest to skrypt, będzie dostępny wszędzie i będziesz mieć do niego dostęp w swoich komponentach:

export class MyComponent{ 


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

To da ci większą elastyczność ility na aktualizowanie konfiguracji w przyszłości bez konieczności ponownego budowania aplikacji.

Oczywiście można wykonać to samo połączenie za pośrednictwem połączenia Ajax, ale uważam powyżej za bardziej agnostykę aplikacji.