Question

我想在构建angular-cli（打字稿）应用程序时将自定义参数传递给Angular2。这可能吗？如何在我的代码中访问此参数？

场景是这样的：我有一个Angular2应用，有2个布局。每种布局都有3种颜色（红色，蓝色，绿色）。我想建立所有可能的组合。每个布局一个应用程序和颜色=＆gt; layout1red，layout1green，layout2blue，...

我想为每个构建创建6个JSON配置文件，我在其中定义布局和颜色，也许还有一些其他属性。

Answer 1

可以使用@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个配置文件用于dev和6个配置文件用于prod。

然后访问这些变量只需从environment.ts文件中导入环境对象。

Answer 2

我没有完全回答你的问题，我可以想到两种方法来实现这个目标：

A-在生成新项目时传递参数：

1-为了能够将参数传递给角度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调用进行相同的调用，但我发现上面的内容与应用程序无关。

Answer 3

只是对答案的更新。您有多种选择：

要运行多个配置，只需在 angular.json 中创建一个新的配置对象，在 projects.[your project].architect.build.configurations 中查找，您可以创建一个新的配置对象并对 fileReplacements 进行更改。要运行这个新配置，只需使用 ng build --c=my_new_env_name
如果您选择替换的不仅仅是配置文件，或者完全使用不同的 css 文件，那么您可以在 angular.json 中添加一个新项目，只需在 {{1} 中添加一个新项目对象}} 并修改 projects.[my new project name] 部分。对新项目配置感到满意后，只需运行 styles 或 ng build my-new-project-name

选择权在您手中，您可以使用 ng serve my-new-project-name 查看文档 https://angular.io/cli/build

我可以在构建时将参数传递给angular-cli

3 个答案: