Teamcity 上的 Angular-cli 构建（ng build）答案

【问题标题】：Angular-cli build (ng build) on TeamcityTeamcity 上的 Angular-cli 构建（ng build）
【发布时间】：2016-12-01 21:12:48
【问题描述】：

我希望有人已经这样做了。我正在尝试为我的一个 angular 2 项目在 teamcity 中建立一个连续的构建。做了一些研究后，我按照以下步骤操作：

Build Step1：为 teamcity 安装 jonnyzzz.node 插件。（现在我可以从 Runner 类型中选择 Node.js NPM）
npm 命令：我添加了安装命令
构建步骤 2：另一个 Node.js NPM 和 npm 命令：安装 -g angular-cli
到目前为止一切顺利
现在我想构建 ng build 作为第三步，但我真的被困住了，因为我无法做到这一点。

任何帮助将不胜感激。

谢谢。

【问题讨论】：

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

标签： javascript angularjs node.js teamcity

【解决方案1】：

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

run build

构建它不是 NPM 的默认命令，因此您需要在默认 ng-cli package.json 中映射到 ng build 的“运行构建”

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

See image

【讨论】：

要明确一点，如果你安装了node并且路径中有node和npm，你可以运行npm run build，它的长格式实际上是npm run-script build。 run 或 run-script 是必需的，因为 npm 本身并不真正了解“构建”或其他目标。如果您在 Windows 上使用 nvm 而不是 TeamCity.node 插件，则可以从 cmd 或 PowerShell 调用 npm run-script build。
更好的解决方案 IMO，无需更改源代码来应对构建代理。 +1

【解决方案2】：

为了从 Team city 的 nodejs 插件中获取 ng build 工作，我修改了 package.json 文件。在开始时将值替换为“ng build”。并且在团队城市中，npm build 命令会触发 ng build 命令。

【讨论】：

也解决了我在 TFS 上的问题，谢谢。
太棒了。我很高兴能够提供帮助。
@Ravimaran 我们可以在不安装 jonnyzzz.node 插件的情况下构建 angular-cli 应用程序
您好 Indra257，我相信您需要团队城市中的节点插件来进行 npm 构建。这个插件实际上效果很好。
@Ravimaran 我正在尝试一点不同。我实际上正在使用由 ng build 创建的包并尝试将它们部署到章鱼。所以我遵循的步骤，i) 使用 NugetPack 并提供 nuspec 文件，该文件将创建 .nupkg。之后我是否必须运行 Nuget Publish 才能将其推送到我的章鱼

【解决方案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 类型的新构建步骤并将脚本设置为源代码。您现在可以在 Script Source 中输入：

安装 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 路径中，以便在您想要创建单独的部署类型构建配置时可以访问它

此处需要考虑的一些注意事项：

您可以在但是构建代理可能会使用不同的路径，这会导致你的构建
确保您有适当的清理规则，因为 node_modules 文件夹可以很快变大

希望它对某人有所帮助！

【讨论】：