jhipster/ng-jhipster

JHipster Angular library

Greetings, Java Hipster!

This is the JHipster Angular 2+ utilities library

This library is used by the code generated by the generator-jhipster: https://github.com/jhipster/generator-jhipster/. When releasing a new version of the generator-jhipster then this is tested with the specific version of the ng-jhipster referenced in the generated package.json file. If your application is generated by the older version of the generator-jhipster and you manually update ng-jhipster version in the package.json then this may and may not work. To use a newer version of the ng-jhipster, regenerate application with a newer version of the generator-jhipster which generates a right ng-jhipster version into package.json file.

Full documentation and information is available on our website at https://jhipster.tech/

Please read our guidelines before submitting an issue. If your issue is a bug, please use the bug template pre populated here. For feature requests and queries you can use this template.

Development setup

You need NodeJS and NPM.

Fork the ng-jhipster project

Go to the ng-jhipster project and click on the "fork" button. You can then clone your own fork of the project, and start working on it.

Please read the Github forking documentation for more information

Build

Run npm install to install all dependencies.

Make some changes, run npm run test to run both eslint/tslint and unit tests.

Build the library with npm run build.

Package the library by running npm pack in the dist directory. This will create an archive ng-jhipster-vX.Y.Z.tgz.

For testing, you will want to integrate this archive into an application generated by JHipster.

Go to your generated JHipster application and run...

npm install path/to/ng-jhipster/dist/ng-jhipster-vX.Y.Z.tgz

...so that your JHipster application uses the content of this archive as ng-jhipster dependency which is located in node_modules/ng-jhipster.

Quick development

You can quickly test library changes in Angular application generated by JHipster in the following manner.

1. Generate Angular application using JHipster generator.

2. Actions in the ng-jhipster project.

   • In the ng-package.dev.json change the value of the dest to some subfolder inside generated project, for example if using Gradle or skipping server then you can use GeneratedAppRootFolder/build/dist/ng-jhipster and if using Maven then use target subfolder instead of build.
     For example, if the generated app and the ng-jhipster are siblings in the disk then you can use:

     "dest": "../generated-app-root-folder-name/build/dist/ng-jhipster",
     

     One note about this change. As Angular framework architecture excpects that in building app all blocks of the application are inside app root folder then you can't skip this step. If you don't do this change and in the generated app tsconfig.json file refer to ng-jhipster default destination folder like this "ng-jhipster": ["../ng-jhipster/dist"] then runtime errors will occur on running app.

   • Run npm run build:dev

3. Actions in the generated application.

   • In the tsconfig.json file, add the following entry into compilerOptions.paths:

     "ng-jhipster": ["build/dist/ng-jhipster"]
     

   • Optional step. If you are using some other subfolder than build or target for ng-jhipster build destination and this folder is not in .eslintignore then add this folder there (this suppresses ESLint errors for compiled ng-jhipster bundle)

   • Run npm start

Now on every change in ng-jhipster the following will happen automatically:

• ng-jhipster rebuilds
• generated app rebuilds using freshly built local ng-jhipster
• generated app is reloaded in the browser and you can see and test changes made in the ng-jhipster