Publishing your Angular Library to your organisation DevOps npm feed

Recently I have started playing around with Angular Library. Pretty sweet stuff if you ask me. So you create your own submodule (AKA liberty) to be reused in another project, similar to how we use 3rd party components/ modules in our projects.

I am not going to publish to public npm repository, I will just publish to my own (or my organisation) DevOps npm feed.

make sure you have set up your client’s npmrc. if you haven’t already.

so let’s say you created a module/library called “global-header”, this will be the name on library’s package.json.

now in the root package.json, under scripts tag add this script

"publish:global-header": "ng build global-header --prod && cd dist/global-header && npm publish"

then once you are happy with your library just run below command

npm run publish:global-header

this will publish to your DevOps npm feed. make sure you update the library “version” each time you do this.

If you want to automate your builds using CI/CD

Your package.json need to have the simplified steps for DevOps

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "coverage": "ng test -- --watch=false --code-coverage --no-progress --browsers=ChromeHeadlessCI --reporters progress,kjhtml,junit",
    "lint": "ng lint",
    "e2e": "ng e2e",   
    "build:ui-shared": "ng build global-header --prod",   
    "publish:ui-shared": "cd dist/global-header && npm publish"   
  },

below is the YAML (.yml). Please note this has code coverage too in steps which you can remove if not required.

trigger:
  branches:
    include:
      - master
pool:
  name: Hosted Windows 2019 with VS2019
  demands: npm

steps:
- task: Npm@1
  inputs:
    command: 'install'
    verbose: true

- task: Npm@1
  displayName: Test packages
  inputs:
    command: custom
    customCommand: 'run coverage'
    workingDir: '$(Build.SourcesDirectory)'

- task: PublishTestResults@2
  displayName: 'Publish unit test results'
  condition: succeededOrFailed()
  inputs:
    testResultsFormat: 'JUnit'
    testResultsFiles: '$(Build.SourcesDirectory)/projects/**/TESTS-Chrome*.xml'
    testRunTitle: 'Angular'

- task: Palmmedia.reportgenerator.reportgenerator-build-release-task.reportgenerator@4
  displayName: ReportGenerator
  inputs:
    reports: '$(Build.SourcesDirectory)/coverage/**/cobertura-coverage.xml'
    targetdir: '$(Build.SourcesDirectory)/coverage'
    reporttypes: 'Cobertura'

- task: PublishCodeCoverageResults@1
  displayName: 'Publish code coverage results'
  condition: succeededOrFailed()
  inputs:
    codeCoverageTool: 'Cobertura'
    summaryFileLocation: '$(Build.SourcesDirectory)/coverage/*.xml'
    failIfCoverageEmpty: true

- task: Npm@1
  displayName: 'Building libraries'
  inputs:
    command: 'custom'
    verbose: false
    customCommand: 'run build:global-header'
    customRegistry: 'useFeed'
    customFeed: 'xxxxx-xxx-xxx-xxx-xxxxx'

- task: Npm@1
  displayName: 'Publishing libraries'
  inputs:
    command: 'custom'
    verbose: false
    customCommand: 'run publish:global-header'
    customRegistry: 'useFeed'
    customFeed: 'xxxxx-xxx-xxx-xxx-xxxxx'
  condition: and(succeeded(), eq(variables['Build.SourceBranch'], 'refs/heads/master'))