Могу ли я передавать аргументы в angular -cli во время сборки

Я хотел бы передать пользовательские аргументы angular-cli при создании приложения Angular2 (typescript). Это возможно? Как я могу получить доступ к этим аргументам в своем коде?

Сценарий выглядит следующим образом: у меня есть одно приложение Angular2 с двумя макетами. Каждый макет имеет 3 цвета (красный, синий, зеленый). Я хочу построить все возможные комбинации. Одно приложение для макета и цвет = > layout1red, layout1green, layout2blue,...

Я хочу создать 6 конфигурационных файлов JSON для каждой сборки, где я определяю макет и цвет, а также некоторые дополнительные свойства.

Ответ 1

Можно создать несколько файлов конфигурации с помощью @angular/cli.

Как уже упоминалось в документации, пользовательские файлы конфигурации могут быть добавлены следующим образом:

создать src/environments/environment.NAME.ts
добавьте { "NAME": 'src/environments/environment.NAME.ts' } к объекту apps[0].environments в .angular-cli.json
используйте их с помощью --env=NAME в командах build/serve.

Итак, вам, вероятно, понадобится 6 конфигурационных файлов для dev и 6 конфигурационных файлов для prod.

А затем для доступа к этим переменным просто импортируйте объект environment.ts из файла environment.ts.

Ответ 2

Я не получил ваш вопрос полностью, я могу придумать два способа сделать это:

A- Передача аргументов при создании нового проекта:

1- Чтобы иметь возможность передавать аргументы в угловую точку, вам нужно понять, где вы хотите, чтобы это использовалось.

Если эти конфигурации используются в вашем макете, вы можете раскошелиться на Angular cli и обновить его план и легко добавить свою собственную конфигурацию.

Вот план компонентов:

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

Который выглядит так:

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

Вы видите selector? что имя компонента, с которым вы можете играть, и в конце, когда вы создаете новый проект, вы можете передать свои собственные флаги и использовать его.

Но это не лучшая идея, потому что вы всегда в беде, когда Angular Cli обновляется.

2- Другое возможное решение - использовать ng eject

Это создаст конфигурацию webpack в отдельном файле и webpack ее в корневую папку вашего проекта, после чего вы сможете поиграть с этим файлом и предоставить свою конфигурацию и настроить ее для своего приложения.

Но опять же, я не уверен, как вы хотите использовать эту конфигурацию.

Это идеальный кандидат для вашей конфигурации во build time.

3- Используйте конфигурацию environments:

Как уже было сказано, это также очень удобно для настройки build time:

Следуйте ответу @mikedanylov а затем используйте его в своих файлах:

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

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

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

}


 npm build -e=colorRed

B: Run time:

Это лучший вариант, вы можете создать вызов в вашем index.html следующим образом:

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

а затем внутри конфигурации вы можете иметь:

  var configuration = {
      whatEver:"blue"
  }

и поскольку это скрипт, он будет доступен везде, и вы можете получить к нему доступ в своих компонентах:

export class MyComponent{


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

Это даст вам больше гибкости при обновлении конфигурации в будущем без необходимости повторной сборки приложения.

Очевидно, что вы можете сделать такой же вызов с помощью вызова Ajax, но я считаю, что выше более независимым от приложений.