web-dev-qa-db-ja.com

ビルド時に引数をangular-cliに渡すことはできますか

angular-cli（TypeScript）アプリをビルドするときにAngular2にカスタム引数を渡したいのですが。これは可能ですか？コードでこの引数にアクセスするにはどうすればよいですか？

シナリオは次のとおりです。2つのレイアウトを持つAngular2アプリが1つあります。各レイアウトには3色（赤、青、緑）があります。考えられるすべての組み合わせを構築したい。レイアウトと色ごとに1つのアプリ=> layout1red、layout1green、layout2blue、...

レイアウトと色を定義するビルドごとに6つのJSON構成ファイルを作成し、さらにいくつかの追加のプロパティを作成します。

typescriptangularbuild-toolsangular-cli
29
Arthur Helmel

@angular/cliを使用すると、複数の構成ファイルを作成できます。

docs で述べたように、カスタム構成ファイルは次の方法で追加できます。

  • src/environments/environment.NAME.tsを作成する
  • { "NAME": 'src/environments/environment.NAME.ts' }をapps[0].environmentsの.angular-cli.jsonオブジェクトに追加
  • build/serveコマンドの--env=NAMEフラグを介してそれらを使用します。

したがって、おそらく開発用に6つの構成ファイルと製品用に6つの構成ファイルが必要になります。

次に、これらの変数にアクセスするには、environment.tsファイルから環境オブジェクトをインポートします。

17
mikedanylov

私はあなたの質問を完全に理解できませんでした。これを実現する2つの方法が考えられます。

A-新しいプロジェクトを生成するときに引数を渡す：

1- angular cliに引数を渡すことができるようにするには、それをどこに使用するかを理解する必要があります。

これらの構成がレイアウトで使用されている場合、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構成が別のファイルに生成され、プロジェクトのルートフォルダーに配置されます。その後、そのファイルで遊んで構成を提供し、アプリごとにカスタマイズできます。

しかし、繰り返しますが、その構成をどのように使用したいのかわかりません。

これは、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呼び出しを介して同じ呼び出しを行うことができますが、上記ではアプリケーションにとらわれないことがわかりました。

3
Milad