web-dev-qa-db-fra.com

Pack / Importer un module développé local dans un projet

J'essaie d'importer un projet/module Angular Angular $ angular angular $ === [angular $ ===) sans le publier dans le référentiel npm.

Tout d'abord, j'ai suivi ce tutoriel pour construire mon module au format UMD (j'ai sauté la partie publication):

https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464

Ensuite, j'ai essayé d'installer mon module dans l'application finale en exécutant cette ligne de commande:

npm install ../path-to-my-module --save

Cela a ajouté avec succès mon module en tant que @myscope/myModule dans le package.json de mon application, mais le problème est que l'importation du module dans l'application n'est pas reconnue. J'ai fini par obtenir l'erreur suivante:

Cannot find module @myscope/myModule

Dans mon node_modules, le dossier @myscope est créé, et à l'intérieur, il y a un raccourci vers ../path-to-my-module avec le nom myModule

Le fait qu'il existe un raccourci pourrait-il être à l'origine du problème? et si oui, comment y remédier?

angularnpmangular-cliangular-moduleng-packagr
8
Strider

J'ai trouvé cet article qui m'a aidé à résoudre mon problème:

https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e

Pour résumer brièvement, voici comment j'ai procédé:

  1. Installer ng-packagr :
    • Installez-le globalement:
      npm install -g ng-packagr
    • Installez-le dans le module projet:
      npm install ng-packagr --save-dev
  2. créer ng-package.json dans le dossier racine du projet et ajoutez ce qui suit: 
    {
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "public_api.ts"   
    "externals": {
      "@angular/cdk": "ng.cdk",
      "@angular/cdk/accordion": "ng.cdk.accordion",
       //...
    }
  }
}

Dans mon cas, j'ai dû ajouter des dépendances externes afin d'éviter les erreurs de packaging/build:

  1. créer public_api.ts dans le dossier racine du projet et ajoutez ce qui suit:

    export * from './src/app/modules/myFeature/my-feature.module'

  2. Éditer package.json, et ajoutez la ligne packagr à la balise scripts:

"scripts": {
  //...
  "packagr": "ng-packagr -p ng-package.json"
}

  1. Créez le package en exécutant la commande suivante à partir du dossier racine:

    npm run packagr

  2. Installez-le pour le développement local:

    • Emballez le module en exécutant la commande suivante à partir du dossier dist:
      npm pack
    • Installez le module compressé à partir du projet final:
      npm install ../some-relative-path/dist/my-component-library-0.0.0.tgz

Ensuite, je pourrais importer mon module à partir de tout autre module ou composant de mon projet final

9
Strider