Skip to content

Angular Libraries

Creating and using a shared Angular Library for CompSci

  1. Create Angular workspace
  2. Create a Bitbucket repository
  3. Install libraries
  4. Create library
  5. Configure project
  6. Configure CI/CD pipeline
  7. Local development setup

Create Nx Workspace

npx create-nx-workspace {workspace-name} - choose integrated workspace - choose angular app - provide an application name (this can be used as a test application for your library) - SASS stylesheet format - no distributed caching

Create a repository in Bitbucket

Go to Bitbucket and create a new repository under the UI/UX project

Do not add any files to the project so make sure to select 'no' to adding the README and .gitignore files. Keep the default branch as 'main'.

Go to the root folder of your new workspace and connect to remote repository

git remote add origin git@bitbucket.org:jacksonlaboratory/{workspace-name}.git
git push --all origin

Install packages

Add appropriate packages to your project and install them:

npx npm add primeng --legacy-peer-deps
npx npm add primeicons --legacy-peer-deps
npx npm add primeflex --legacy-peer-deps
npx npm add ng-mocks --legacy-peer-deps
npx npm install --legacy-peer-deps

Create library

Create a new library in the workspace and include the namespace @jax-compsci in the import path and the publishable flag

npx nx generate @nrwl/angular:library {library-name} --importPath=@jax-compsci/{library-name} --publishable

Configure project

Add the following scripts to package.json 

"publish:local": "npm run build:prod && npm publish ./dist/libs/{library-name} --registry http://localhost:4873",
"publish:ci": "npm publish ./dist/libs/{library-name} --registry https://us-east1-npm.pkg.dev/jax-cs-registry/npm",
"republish": "npm run unpublish && npm run publish:local",
"unpublish": "npm unpublish --registry http://localhost:4873 --force @jax-compsci/{library-name}@$npm_package_version",
"build:prod": "nx build {library-name} --configuration=prod"

Configure CI/CD pipeline

Create a bitbucket.pipelines.yml file and copy the contents of this sample file. Replace the three instances of [library-folder-name] in the sample file with the name of the library you created.

Local development setup

To work with the library locally you will want to run a local npm registry with a package such as verdaccio. Run the following to install and use verdaccio:

npm install verdaccio
verdaccio
npm adduser --registry http://localhost:4873

In order to publish to the local registry you will need to update your .npmrc file. We created the library with the @jax-compsci namespace so it is simple to redirect all requests for that namespace to the local registry. This is configured by adding the following line to your .npmrc file

@jax-compsci:registry=http://localhost:4873/

With verdaccio running and your local npm configured you can now publish/republish the library. The first time you publish a new version locally run the publish:local script.

npx npm run publish:local

Once a version has been added to the local registry it needs to be unpublished first before it can be published again. The republish script runs both the unpublish and publish commands:

npx npm run republish

New components

To create a new component in the library run the following command.

npx nx generate @nrwl/angular:component {component-name} --project={library-name}

Verify that the file /libs/{library-name}/src/lib/index.ts is configured to export the component.

export * from './lib/{component-name}/{component-name}.component';