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

Posted 2023-01-08

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

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

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

答案

可以使用@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文件导入环境对象。

另一答案

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

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