在Teamcity上进行Angular-cli构建（ng build）

Question

我希望有人已经做过这个。

我正在尝试为我的Angular 2项目在TeamCity中设置持续构建。

经过一些研究，我按照以下步骤进行：

1. 构建步骤1：安装了TeamCity的jonnyzzz.node插件。(现在我可以从Runner类型中选择Node.js NPM)
   npm命令：我添加了install命令
2. 构建步骤2：另一个Node.js NPM和npm命令：install -g angular-cli
   到目前为止都很好
3. 现在我想把ng build作为第三个步骤进行构建，但我真的卡在这里了，因为我无法找到方法来完成它。

任何帮助将不胜感激。

谢谢。

- Ravimaran

---

我已经解决了自己的问题。我修改了npm的package.json并添加了ng build。 - Ravimaran

Answer 1

不需要更改您的package.json文件，您可以使用node.js NPM插件和运行命令：

NPM run [your-command-here]

run build

在NPM中，build不是默认命令，所以您需要运行'mpm run build'，它会映射到ng-cli的默认package.json文件中的ng build命令。

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
},

查看图片

- tlaughlin

---

要明确的是，如果您安装了Node并将其添加到环境变量中，那么您可以运行npm run build命令，完整形式实际上是npm run-script build。之所以需要使用run或run-script是因为npm本身并不知道“build”或其他目标。如果您在Windows上使用nvm而不是TeamCity.node插件，则可以从cmd或PowerShell中调用npm run-script build命令。 - dragon788

我认为更好的解决方案是不需要更改源代码来适应构建代理。加一！ - Ropstah

Answer 2

为了让 Node.js 插件在 Team City 中正常运行 ng build，我修改了 package.json 文件。 在 start 中将值替换为 "ng build"。 然后从 Team City，npm build 命令将触发 ng build 命令。

- Ravimaran

---

解决了我在TFS上的问题，谢谢。 - Samir Chakour

太棒了。我很高兴能够帮助到你。 - Ravimaran

@Ravimaran，我们能否在不安装jonnyzzz.node插件的情况下构建angular-cli应用程序？ - indra257

嗨Indra257， 我相信你需要在团队城市中使用节点插件来进行npm构建。这个插件实际上运行得非常好。 - Ravimaran

@Ravimaran 我正在尝试一些不同的方法。我实际上正在获取由ng build创建的bundles，并尝试将它们部署到octopus上。所以我遵循的步骤是：i）使用NugetPack并提供nuspec文件，这将创建.nupkg。之后，我是否需要运行Nuget Publish将其推送到我的octopus？ - indra257

@Ravimaran 你是指 Node 插件还是 jonnyzzz 的 Node 插件？ - indra257

Answer 3

首先从构建代理开始，您可以编辑buildAgent.properties文件并定义3个环境变量。您应该在此处或稍后在构建定义中使用单引号：

env.exec.node='C\:\\Program Files\\nodejs\\node.exe'
env.exec.npm='C\:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js'
env.exec.ng='%env.APPDATA%\\npm\\node_modules\\@angular\\cli\\bin\\ng'

这里使用了%env.APPDATA%，但有些安装可能会在Program Files中安装，在大多数情况下，AppData将被使用。

接下来，您可以为项目定义构建步骤。创建这些新的Powershell类型的构建步骤，并将脚本设置为源代码。在脚本源中，您现在可以输入以下内容：

安装Angular CLI

& %env.exec.node% %env.exec.npm% install -g @angular/cli

安装 node_modules 文件夹。

& %env.exec.node% %env.exec.npm% install

构建和发布解决方案。

& %env.exec.node% %env.exec.ng% build --environment '%env.build.environment%' --scripts-prepend-node-path

在此步骤之后，生产构建将创建您的dist文件夹，您可以将其包含在Artifacts路径中，以便在需要创建单独的部署类型构建配置时可以访问它。

这里需要考虑一些问题：

• 您可以在您的<script>中定义变量，但是构建代理可能使用不同的路径，这可能会破坏您的构建
• 请确保有适当的清理规则，因为node_modules文件夹可能会非常大

希望对某人有所帮助！

- Anapsidae