npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ng-jhipster

v0.16.0

Published

A Jhipster util library for Angular

Downloads

25,517

Readme

Logo

Greetings, Java Hipster!

This is the JHipster Angular 2+ utilities library

NPM version Azure DevOps Build Status Build Status Dependency Status

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