portal-core-ui

Shared portal UI components written in Angular 18. This project is a workspace for creating a portal-core-ui library that can be deployed and imported into portal projects.

Requires npm >= v10.50 & node >= v18.20.2

Development

Install dependencies

npm install

or

yarn install

Build the library

npm run build portal-core-ui

Once the library has been built, automatic recompilation can be initiated with

ng build --watch

Create a link to the library

cd dist/portal-core-ui
npm link

In the project that uses the library (e.g. AuScope-Portal-UI or ngvl):

npm link @auscope/portal-core-ui

This creates a symbolic link for node_modules/portal-core-ui that links to the distribution folder of the library project.

If you get an obscure 'Unhandled Promise rejection' error you may have to add:

"preserveSymlinks": true

to the 'projects'.$name.'architect'.'build'.'options' section in your 'angular.json' file in the project that uses the library.

Don't forget to unlink when you're no longer interested in using the development version of the library:

npm unlink @auscope/portal-core-ui

Adding a new Component (or Service, Model etc.)

Add the component to the relevant directory under portal-core-ui/src/lib. Add the Component to the library export file ./portal-core-ui/public-api.ts, e.g:

export { MyComponent } from './lib/mycompdir/my.component';

Note that project imports will need to be modified to remove the path components from the import, e.g:

import { UtilitiesService } from 'portal-core-ui/utility/utilities.service';

Will become...

import { UtilitiesService } from '@auscope/portal-core-ui';

With some modifications to the public-api.ts we can re-include the paths if necessary.

Packaging asset files

Add the files to the "assets" list in the file portal-core-ui/ng-package.json, e.g:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/portal-core-ui",
  "assets": [
    "./src/lib/widget/chart/rickshaw/rickshaw.service.scss",
  "./src/lib/mycompdir/my.component.scss"
  ],
  "lib": {
    "entryFile": "src/public-api.ts"
  }
}

Note that for development that this will place the asset under:

./node_modules/@auscope/portal-core-ui/src/lib/<directory>

Project paths that reference this asset will need to be updated to match.

Note: I've yet to test where a deployed package puts these files, will update this file once we have a deployed version.

Deploying the package

After each push, Github Actions will automatically publish the new version into npmjs.

If you have to publish manually:

First make sure you have incremented both the version number in both the project's package.json file as well as the library's package.json file. Use 'npm version' command to increment package versions

Then, e.g. for version 1.2.3 on master branch

git commit
git tag -a v1.2.3 - m "Version 1.2.3"
git push --tags origin master
ng build portal-core-ui --configuration production
cd dist/portal-core-ui
npm publish