Use Angular library repository as dependency via Bitbucket

user_18985787 0
Viewed 122

I got a problem regarding the use of an Angular library repository. Hopefully find an answer here :)

I have an Angular repository which holds one single Angular library. This library is stored in a bitbucket repository - including the compiled files in the "dist" folder.

Now I want to consume this library by an application.

Currently, when I install the library repository as an dependency to my application (via npm install git+ssh://git@bitbucket.org/NAME/my-library.git) the whole repository is added to the node_modules folder of the application.

But with this configuration the library can not be found by the application. Because of the fact, that the compiled library files are located in the "dist" folder of the repository.

Now how can I tell the application to look in the "dist" folder of the library folder, to find the needed library files?

A current workaround is to place the following in the tsconfig.json of my application

"compilerOptions": {
    "paths": {
      "my-library": [ "node_modules/my-library/dist" ]
    }
}

But I'm almost sure, that there must be somethign more generic. Something which must be placed in the package.json/angular.json of the library repository to point consuming applications to the dist-folder?

Thank you in advance.

angular bitbucket repository
1 Answers

I am pretty sorry to tell you that there is a little more to do than adding a line to a configuration file.

Aside your repository my-library you need a second repository in bitbucket holding only the transcoded dist files. Lets name it my-library-dist. Note: If you have multipe projects in your my-library repository you like to distribute, you need one dist repository for each project.

To push the dist files in your dist repo, you can build them locally and push them afterwards, or a more automated way is to use a bitbucket-pipeline.yml file. But this is also the hardest way.

To save you a lot of trail and error, I will copy my own file here. Place this file in root folder of your my-library repository.

# /bitbucket-pipeline.yml

image: node:16

pipelines:
  branches:
    main:
      - parallel:
        - step:
            name: Security Scan
            script:
              # Run a security scan for sensitive data.
              # See more security tools at https://bitbucket.org/product/features/pipelines/integrations?&category=security
              - pipe: atlassian/git-secrets-scan:0.5.1
      - step:
          name: Build and bump version
          deployment: Production
          script:

            # NOTE: for this to work at least one active user has to add the
            # public repository SSH key ( -> repository settings -> ssh key)
            # to his own SSH keys ( -> avatar -> personal settings
            # -> ssh keys -> add key ). now the repository has the same
            # access rights as the user holing the public key.

            # Build and bump version

            - git remote set-url origin ${BITBUCKET_GIT_SSH_ORIGIN}
            # create directory for the distribution repo
            - mkdir ${BITBUCKET_CLONE_DIR}/dist-repo
            # clone the distribution repo
            - git clone git@bitbucket.org:my-organisation/my-library-dist.git ${BITBUCKET_CLONE_DIR}/dist-repo
            # install angular cli to build the app
            - npm install --location=global @angular/cli
            - npm install
            # in order to have the correct (next) minor version in the
            # components project, we need to change the version number in that
            # project and NOT in the root library. so lets jump into it
            - cd ${BITBUCKET_CLONE_DIR}/projects/my-project-within-my-library
            # change the version only of this project
            - npm version minor --no-git-tag-version
            - echo "components version is now at `node -p "require('./package.json').version"`"
            # go back into the library root
            - cd ${BITBUCKET_CLONE_DIR}
            # build the library
            - ng build --configuration=production
            # empty the dist folder to git-remove files that aren't
            # included in the build anymore.
            - rm ${BITBUCKET_CLONE_DIR}/dist-repo/* -R
            # copy the resuling build into the dist-repo folder where the
            # dist-repo was checkout in an earlier step.
            # this way we can easily update only the build result in the
            # dist-repo
            - cp ${BITBUCKET_CLONE_DIR}/dist/my-project-within-my-library/* ${BITBUCKET_CLONE_DIR}/dist-repo/ -r
            - cd ${BITBUCKET_CLONE_DIR}/dist-repo
            # we need to specify a user to git to allow uploads
            - git config --global user.email "bitbucket-pipelines@my-company.com"
            - git config --global user.name "bitbucket-pipelines"
            - echo "dist version is now at `node -p "require('./package.json').version"`"
            # commit all build files to dist-repo with the new package version
            # number, including a new TAG with the same version number.
            - git add --all
            - git commit -a -m "Bump build to `node -p "require('./package.json').version"`"
            - git tag `node -p "require('./package.json').version"`
            - git push && git push --tags
            # go back in the root directory
            - cd ${BITBUCKET_CLONE_DIR}
            # add only the package.json and package-lock.json to git and
            # commit it to the library repo.
            # skip ci to prevent infinite loop
            - git add ${BITBUCKET_CLONE_DIR}/projects/my-project-within-my-library/package*.json
            - git commit -m "Bump build to `node -p "require('${BITBUCKET_CLONE_DIR}/projects/my-project-within-my-library/package.json').version"` [skip ci]"
            - git tag `node -p "require('${BITBUCKET_CLONE_DIR}/projects/my-project-within-my-library/package.json').version"`
            - git push && git push --tags

Note:

  • you need to adjust some paths for project names in the given bitbucket-pipeline.yml file.
  • you need to have a version number in your project my-library/projects/my-project-within-my-library/package.json file. (gets updated for any pipeline run)
  • this pipeline gets triggert for commits and merges to the main branch (line 7)
  • for this to work at least one active user has to add the public repository SSH key of my-library repository ( -> repository settings -> ssh key) to his own SSH keys ( -> avatar -> personal settings -> ssh keys -> add key ). now the repository has the same access rights as the user holing the public key.
  • the user holding the repository SSH key needs to have read/write access permissions to all relevant repositories.

Once the build is done, you can find a new minor version tag in your my-library-dist repository. Use the following NPM command to install/update: npm i bitbucket:my-company/my-library-dist#X.Y.Z

This is the suggested way by the bitbucket support by june 2022, tested with angular v14

user_19843960
Related