Building Angular in Jenkins Pipelines

Here are some things that need to be done, for a Jenkins build server to build/pack/publish Angular libraries, and apps.

NOTE: This page assumes the library or app source code is being built in a monorepo workspace.

When using the same Jenkins build server to build Angular apps that target differing versions of Angular, it is necessary to swap in the required Node.js version, compatible with that version of Angular.

See this article for setting up NVM: Jenkins: Add Angular Build Support

With NVM installed on the build server, we need to make sure that the build job configuration and pipeline steps are setup.

Build Job Config

These differ slightly, depending if we are building an app or a library.

Libraries get published to an NPM repository, whereas apps get published to Artifactory.

Library Job Config

When compiling an Angular library, the job's Properties need to include these:

ENV_SolutionName=oga.webui.runtimesecurity
ENV_WorkspaceName=workspace
ENV_projectName=lib-oga-webui-runtimesecurity
ENV_gitrepo=git@github.com:ogauto/OGA.WebUI.RuntimeSecurity.Lib.git
ENV_angularVersion=15

Here's a description of each property:

• ENV_Solution - folder name inside the same folder where the jenkinsfile sits.
• ENV_WorkspaceName - folder name insides the solution folder, that is the monorepo workspace root.
• ENV_projectName - name of the library, as listed in npm.
  This is also the folder name, inside the workspace's projects folder.
• ENV_gitrepo - full path to the git repository.
• ENV_angularVersion - version of Angular being targeted.
  Will be: 14, 15, 17.0.7, 17.3.0.

App Job Config

When compiling an Angular application, the job's Properties need to include these:

ENV_artifactoryUploadRepo=oga-built-dev
ENV_artifactoryRepoFolder=OGA.Backups.WebUI
ENV_SolutionName=OGA.Backups.WebUI
ENV_WorkspaceName=backupsui-workspace
ENV_projectName=mgmtui
ENV_globalProjectName=oga.backups.webui
ENV_artifactZipFileName=OGA.Backups.WebUI
ENV_gitrepo=git@github.com:LeeWhite187/OGA.Backups.WebUI.git
ENV_angularVersion=17.0.7

Here's a description of each property:

• ENV_artifactoryUploadRepo - repository name on the Artifactory server.
• ENV_artifactoryRepoFolder - folder name, inside the Artifactory repository.
• ENV_Solution - folder name inside the same folder where the jenkinsfile sits.
• ENV_WorkspaceName - folder name insides the solution folder, that is the monorepo workspace root.
• ENV_projectName - folder name, under the projects folder, where the app's source is located.
  
• ENV_globalProjectName - application full name, used by the post-action notification step, when publishing job status.
• ENV_artifactZipFileName - Name of the published zip file, containing the built application.
• ENV_gitrepo - full path to the git repository.
• ENV_angularVersion - version of Angular being targeted.
  Will be: 14, 15, 17.

Pipeline Steps

Here's a description of necessary details in the pipeline job for an Angular app or library.

Common Pipeline Steps

Here are common elements for both Angular app and library pipelines.

Environment Block

Both pipeline types lead off with an environment step, to populate the jenkins user session with necessary variables.

pipeline
{
    agent any
    environment
	{
		// Define where NVM is located (in the user's home), so we can call its scripts...
        NVM_DIR = "${HOME}/.nvm"
    }

    ...
}    

Place the environment block before all scripts blocks and after the agent block, like above.

Angular Version Step

This step figures out what specific version of Node.js and Angular will be needed.

It accepts 

Place this step above others that run NVM.

		// Determine the actual version of Angular and Node.js that we need to compile with...
        stage('Angular Version')
		{
            steps
			{
                script
				{
					echo "angularVersion: ${angularVersion}"
                    if (angularVersion == '14')
					{
                        env.NODE_VERSION = "16"
                        env.NG_CLI_VERSION = "14.2.0"
                    }
					else if (angularVersion == '15.2.10')
					{
                        env.NODE_VERSION = "18"
                        env.NG_CLI_VERSION = "15.2.10"
                    }
					else if (angularVersion == '17.0.7')
					{
                        env.NODE_VERSION = "20"
                        env.NG_CLI_VERSION = "17.0.7"
                    }
					else if (angularVersion == '17.3.0')
					{
                        env.NODE_VERSION = "20"
                        env.NG_CLI_VERSION = "17.3.0"
                    }
					else
					{
                        error "Unsupported Angular version: ${angularVersion}"
                    }
					echo "env.NG_CLI_VERSION is: $env.NG_CLI_VERSION"
					echo "env.NODE_VERSION is: $env.NODE_VERSION"
                }
            }
        }

App Pipeline

Library Pipeline