34

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

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

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

4

3 回答 3

20

可以使用@angular/cli.

如文档中所述，可以通过以下方式添加自定义配置文件：

  • 创建一个src/environments/environment.NAME.ts
  • 添加{ "NAME": 'src/environments/environment.NAME.ts' }到apps[0].environments对象中.angular-cli.json
  • --env=NAME通过构建/服务命令上的标志使用它们。

因此，您可能需要 6 个用于 dev 的配置文件和 6 个用于 prod 的配置文件。

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

于 2017-08-25T21:27:24.183 回答
4

我没有完全理解你的问题，我可以想到两种方法来实现这一点：

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

乙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 调用进行相同的调用，但我发现上面的应用程序与应用程序无关。

于 2017-08-27T04:07:47.987 回答
0

只是对答案的更新。你有几个选择：

  1. 要运行多个配置，只需在其中创建一个新的配置对象，angular.json您projects.[your project].architect.build.configurations就可以创建一个新的配置对象并对fileReplacements. 要运行这个新配置，只需使用 ng build--c=my_new_env_name

  2. 如果您选择替换的不仅仅是配置文件，也许要完全使用不同的 css 文件，那么您可以添加一个新项目，angular.json只需在其中添加一个新项目对象projects.[my new project name]并修改该styles部分。一旦您对新的项目配置感到满意，简单运行ng build my-new-project-name或ng serve my-new-project-name

选择是您的，您可以angular.json查看文档https://angular.io/cli/build

于 2021-04-17T07:03:29.543 回答