Child pages
  • Developing packages for NGClient2

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

"Copy the NGClient2 sources" menu entry in the Solex will overwrite the sources in that target dir and trigger a npm install again for all the packages and will run once a npm build
This is then a clean source install (you copy the sources of Servoy itself right over that to start clean). There is also an question to also use the "npm ci" (clean install) command, this can be used if there are problems installing or compiling to also flush and recreate the node_modules folder.

To develop a Component or Service package they must be on the same version of angular then the core.
that Component or Service pacakage can package can be added to the current solution as a project (instead of a zip).

For a Service the spec file must have a section:
This one describes a service:

"ng2Config": {
"packageName": "@servoy/ngdesktopfile",
"serviceName": "NGDesktopFileService",
"entryPoint": "dist/servoy/ngdesktopfile"
},

The PackageName is the npm name.
The ServiceName is how the Service is exported like:

@Injectable()
export class NGDesktopFileService {

...

If it is installed as a source project then that folder is used to install that npm package (as a folder install)

To debug then you first need to run the the package folder in watch mode:

npm run build_debug

and after that the same command must be run in the [workspace]/.metadata/.plugins/com.servoy.eclipse.ngclient.ui/target folder to also run that one in watch mode

For Such a package needs to have '.sourcepath' file in the root that has 2 properties:

"srcDir": "projects/servoyextracomponents", "apiFile": "src/public-api"

srcDir is pointing to the angular main src dir (where the package.json is in of the package)

apiFile is pointing to the public-api.ts file inside that dir (without the ts)

Besides that pure build file a Component package the configuration are in the META-INF/manifest.mf

Code Block
NG2-CSS-ClientLibs: ~@servoy/bootstrapcomponents/svy_bootstrapcomponents.css,
 ~@danielmoncada/angular-datetime-picker/assets/style/picker.min.css
NPM-PackageName: @servoy/bootstrapcomponents
NG2-Module: ServoyBootstrapComponentsModule
Entry-Point: dist/servoy/bootstrapcomponents

To use a component package you can use the zip that we now create for that, for example in bootstrapcomponents package use: npm install, npm run build, npm make_release commands, this will generate a bootstrapcomponents.zip with the NG2 resources inside (It could be that you first need to install the servoy/public module first, see below)

If you want to use the bootstrapcomponents as a project, then after checkout you first must make sure that the project is fully build.

For now to use it like this it is easier to use then also the source of our public module, make sure that is first build run once in com.servoy.eclipse.ngclient.ui\node "npm run build_lib" to build only the module

then in the boostrapcomponents root folder run "npm install path_to/com.servoy.eclipse.ngclient.ui/node/dist/servoy/public"

to install the public servoy package into the bootstrapcomponents.

This command should also have installed all other stuff that it needs (a bootstrapcomponents/node_modules folder should be now fully created)

Then build this package. If you want to just use it and don't really want to code/change the component inside it you can just run "npm run build" 

If you want to watch this package because you are going to change stuff you can run "npm run build_debug" to start a watch mode build.

After that you can start the developer and add the boostrapcomponents  project to servoy and add it as a project reference.

after that this folder: For a Service the spec file must have a section:
This one describes a service:

Code Block
"ng2Config": {
"packageName": "@servoy/ngdesktopfile",
"serviceName": "NGDesktopFileService",
"entryPoint": "dist/servoy/ngdesktopfile"
},

The PackageName is the npm name.
The ServiceName is how the Service is exported like:

@Injectable()
export class NGDesktopFileService {


The entry point is the distribution folder what is the root of the npm package.

To debug you only need to run this:

npm run build_debug

in the [workspace]/.metadata/.plugins/com.servoy.eclipse.ngclient.ui/target should be adjusted and the package.json in that folder should have something like ""@servoy/bootstrapcomponents": "file:C:/Users/jcomp/git/bootstrapcomponents/dist/servoy/bootstrapcomponents","

Servoy will have compiled it now once (you can see that in the eclipse console) But if you then want to be in debug/watch mode

run "npm run build_debug" in this [workspace]/.metadata/.plugins/com.servoy.eclipse.ngclient.ui/target directory. (in another command window besides the bootstrap watch mode npm build)

If for some reason you need to restart the builds, always first run the component package then the one of the main target.folder.

this will then run in watch mode and will compile the NGClient2 together with all the binary (zip) a source (source projects) in 1 go.

For component packages and services we have a servoy public npm package @servoy/public - npm (npmjs.com)

That gives you the various api to talk to servoy or use helper functions/types: servoy-eclipse/public-api.ts at master · Servoy/servoy-eclipse (github.com)