Vega Angular

Angular specific wrapper for @heartlandone/vega

How to use

For installation guidance, please refer to https://vega.hlprd.com/guides/getting-started-developers#angular

For development

This library was generated with Angular CLI version 13.2.0.

This is the Angular specific wrapper for @heartlandone/vega with the following file structure (we only list some important file path):

...
├── src
│   ├── lib
│   │   ├── components-module.ts
│   │   └── stencil-generated
│   │       ├── angular-component-lib
│   │       │   └── utils.ts
│   │       └── components.ts => 
│   ...
...

• ./src/lib/components-module.ts: angular module used to export auto-generated angular directive proxies
• ./src/lib/stencil-generated/components.ts: stencil auto-generated angular directive proxies which can be used as angular components after import
• ./src/lib/stencil-generated/angular-component-lib/utils.ts: utility class including proxy related functions used by components.ts

Pre-requisite

Make sure all the dependencies has been installed by running

> npm run install

Consuming change in vega-stencil

Once you build vega-stencil with command npm run build, stencil will auto populate corresponding component classes into ./src/lib/stencil-generated/components.ts

keeping in mind, if there is a new component created, you need to modify ./src/lib/components-module.ts to import the new component

Get started

To generate the compiled lib version for vega-angular please run

> ng build vega-angular

And the built lib can be found in ./dist/vega-angular

In order to use the unpublished lib vega-angular directly for your angular app package, you can choose one of the following options:

1. Directly install the local package into your angular app package by running:

   > npm install file:<relative path to "./dist/vega-angular">

2. Use npm symlink by running

   > npm link

   Note: you might also want to setup the symlink for vega-stencil as it is a direct dependency of vega-angular, so you can consume the local change in both package for your angular app

Troubleshoot

If you encounter the following error

✖ Compiling with Angular sources in Ivy partial compilation mode.
../../projects/vega-angular/src/lib/stencil-generated/value-accessor.ts:4:1 - error NG2004: Directive ValueAccessor has no selector, please add it!

  4 @Directive({})
    ~~~~~~~~~~~~~~
  5 export class ValueAccessor implements ControlValueAccessor {
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
...
 38   }
    ~~~
 39 }
    ~

this is a known issue in stencil https://github.com/ionic-team/stencil-ds-output-targets/issues/174, please add the selector vega-value-accessor like below to fix this issue:

@Directive({ selector: 'vega-value-accessor' })
export class ValueAccessor implements ControlValueAccessor {
    ...
}

Publish the package

Please check our general wiki