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 🙏

© 2026 – Pkg Stats / Ryan Hefner

psud-site-plugin

v0.0.3

Published

Pour lancer la génération de la librarie :

Downloads

11

Readme

Pour lancer la génération de la librarie :

Se placer dans le dossier : site-plugin/src/angular/siteweb/projects/psud-site-plugin

Deux commandes possibles : ng build => Build normal de la librarie. Cependant les assets ne seront pas dans la librairie. npm run build => Cette commande appelle le script 'build' présent dans le package.json et qui lui va copier les assets dans la librairie de destination. Une autre solution aurait été d'utiliser la version 9 du ng-packagr (voir : https://angular.io/guide/creating-libraries#managing-assets-in-a-library)

##Localement utiliser la librairie dans un autre projet Procédure inspirée par ce lien : https://dev.to/angular/pro-tip-npm-link-explained-57be

1 - Builder la librairie de préférence avec les assets.

2 - La librairie sera placée sous

site-plugin/src/angular/siteweb/dist/psud-site-plugin

Il faut se placer dans ce répertoire et lancer la commande

'npm link'

Cela va créer un lien symbolique dans npm.

3 - On va maintenant se positionner dans l'application Angular qui va consommer notre librairie. Dans le fichier angular.json ajouter une entrée dans les options de build :

{
    "projects": {
        <nom-application> : {
            "architect": {
                "build": {
                    "options" :{
                    
                    <!> Ajouter ici l'entrée     "preserveSymlinks": true
                    
                    }
                }
            }
        }
    }
}

4 - Dans le package.json, on va rajouter notre dépendance à la librairie et celle de ngx-lightbox nécessaire pour la librairie.

4-a : Dans un premier temps rajouter la dépendance à ngx-lightbox :

    "dependencies": {
         ...
        "ngx-lightbox": "^2.2.2"
    }

Puis faites un 'npm install' pour récupérer cette dépendance.

4-b : Dans un second temps rajouter la dépendance de la librairie :

    "dependencies": {
         ...
        "ngx-lightbox": "^2.2.2",
        "psud-site-plugin": "^0.0.1"
    }

Cette fois inutile de faire 'npm install' car notre librairie n'est pas connue dans le registry npm.

5 - Ici nous allons nous servir du lien symbolyque créé dans l'étape 2. Dans l'application consommatrice, se positionner à la racine du projet angular, au même niveau que son package.json Lancer la commande

npm link <nom-de-la-librairie>

Exemple dans notre cas on mettra

npm link psud-site-plugin     

Un lien sera créé avec la librairie et elle apparaîtra dans le node_modules.

<!> Attention dans le cadre de développement, si une application consommatrice tourne et que vous rebuilder la librairie, npm va recréer un lien symbolique, et l'application consommatrice ne retrouvera pas la dépendance. Il faudra donc arrêter votre application consommatrice et rejouer l'étape 5.