web-dev-qa-db-fra.com

Angular 6 construire une bibliothèque avec des actifs

Lors de la construction et de l’emballage de la bibliothèque Angular 6, il semble impossible de demander au Angular CLI de copier les ressources de la bibliothèque dans le fichier dist/assets Sur chaque construction.

En supposant que la structure de dossiers du projet soit la suivante:

- dist
- e2e
- node_modules
- projects
  - lib1
    - src
      - lib
      - assets
        - icons
- src

Lorsque j'exécute ng build lib1 Ou ng build lib1 --prod, Le dossier assets/icons N'est pas copié dans dist/lib1/assets/icons.

Si je lance ng build, Alors src/assets (Le src racine/assets) est en cours de copie mais pas projects/lib1/assets.

Le fichier angular.json Contient une référence à "assets": ["src/assets"], Mais il ne permet pas d'ajouter la clé assets spécifiquement au projet, uniquement à l'application racine principale. Lors de l'ajout, j'obtiens l'erreur suivante:

La validation du schéma a échoué avec les erreurs suivantes: Le chemin de données "" NE DOIT PAS avoir de propriétés supplémentaires (actifs).

J'ai également essayé d'ajouter la règle de copie personnalisée suivante aux actifs pour copier ceux de dist/lib au lieu de dist/appname:

  "assets": [
     "src/favicon.ico",
     "src/assets",
     { "glob": "**/*", "input": "src/assets/icons", "output": "../lib1/assets/icons" }
        ],

Mais j'obtiens l'erreur suivante:

Un actif ne peut pas être écrit dans un emplacement en dehors du chemin de sortie.

Existe-t-il un moyen intégré de gestion de la copie des ressources de bibliothèque sur chaque build?

UPDATE 06/05/2018

J'ai ouvert un problème avec Angular CLI à ce sujet mais je n'ai pas encore reçu de réponse. Problème n ° 11701

angular-cliangular6ng-packagr
17
dev7

Actuellement, je n'ai toujours pas trouvé de moyen officiel de le faire.

J'ai ouvert un numéro angulaire de la CLI et j'espère obtenir la réponse de l'équipe de la CLI.

Entre-temps, ma solution consiste à utiliser des outils de ligne de commande:

Dans package.json J'ai ajouté:

"scripts": {
    ...
    "build": "ng build lib1 --prod && scss-bundle -c scss-bundle.config.json && cp -R projects/lib1/src/assets/ dist/lib1/assets/",
}

Pour copier les fichiers SASS, j’utilise scss-bundle avec le fichier de configuration scss-bundle.config.json cela contient:

{
  "entry": "./projects/lib1/src/assets/style/main.scss",
  "dest": "./dist/lib1/assets/style/styles.scss"
}

Cela construira les fichiers SASS du projet en un fichier et le copiera dans le dossier dist. La structure de mon fichier SASS ressemble à quelque chose comme:

-- projects/lib1/src/assets/
                  -- style
                     -- main.scss
                     -- partials
                        -- _variables.scss
                        -- _styles.scss
                        __ _rtl.scss

Comme vous pouvez le constater, je ne souhaite pas envoyer tous les documents bruts, mais un fichier final. Bien sûr, vous pouvez aussi le compiler dans un fichier .css fichier à la place.

Pour être sûr que tous les autres éléments sont copiés, j’utilise une simple commande Mac OS/Linux cp -R ou rsync.

Et bien sûr, au lieu de courir ng build Je cours npm run build.

J'espère que cela aide, et si vous avez une meilleure solution, s'il vous plaît faites le moi savoir.

14
dev7

On dirait qu'à l'avenir, tout cela pourra être automatisé avec la CLI, mais pour l'instant, il existe quelques solutions. Certains ont impliqué l'écriture d'un script post-installation, qui est un très bon script si vous avez une tonne de choses à faire. L’une implique de les déplacer manuellement, mais c’est trop ouvert pour l’erreur IMO. J'ai également vu quelques paquets npm que vous pouvez installer qui semblent étendre ce que fait ng-packagr (ng-packagr construit vos bibliothèques et webpack crée vos applications).

Certaines sont bonnes et d'autres sont mauvaises, OMI, je n'entrerai pas dans ce que je pense d'eux individuellement, mais je vais simplement partager ce que je fais.

Je travaille sur une application Angular Application et j'extrais nos fonctionnalités dans des bibliothèques afin que nous puissions commencer le partage de code avec de mini-applications dans un proche avenir. Grâce à nos processus et à la création de protocoles, nous n'utilisons déjà pas ng cli directement pour construire nos projets, nous utilisons plutôt des scripts npm.

Si vous êtes déjà familiarisé avec les scripts NPM, sautez au-dessous, sinon, cette note rapide sera extrêmement utile.

Avec la CLI Angular, vous exécutez quelque chose comme ceci ...

ng build myProject --configuration=production pour lancer une génération de prod de votre projet.

ng build myLibrary pour lancer une compilation de votre bibliothèque et vous exécutez probablement ng build myLibrary --watch=true pour exécuter une version de développement de votre bibliothèque et surveiller les modifications apportées pendant que vous travaillez sur la bibliothèque.

Pour moi, pendant que je travaille sur le projet, j'utilise la CLI de ng, tout comme vous et lancez ng build myLibrary --watch=true

Cela fonctionne parfaitement. J'ai un dossier d'actifs pour mes bibliothèques qui contient des actifs et je les stocke dans myProject/src/lib/assets. Tout est bien. Mes ressources ne sont cependant pas dans ma bibliothèque dist/my ... mais bon, c'est cool, car lors du développement, lorsque j'utilise un chemin relatif dans mes balises d'image <img> webpack est extrait de mon projet de bibliothèque, de toute façon pas de mon dossier dist. Alors, comment puis-je résoudre ce problème avec un script NPM? Eh bien, quand vous lisez la ligne suivante, vous allez vous cogner le front et crier "merde, je savais que" ... voilà qui va ...

SI PASSANT, COMMENCE ICI ...

"myLibrary:prod": "ng build myLibrary && mkdir dist/myLibrary/lib/assets && cp -R projects/myLibrary/src/lib/assets/ dist/myLibrary/lib/assets/ && npm run msgAssetsCopied",

Yup, c'est ça, juste quelques bash basiques :)

Je vais le décomposer pour ceux qui sont nouveaux à la ligne de commande cependant.

myLibrary:prod Ceci est le nom du script npm appelé npm run script. Vous l'appelez en ligne de commande avec npm run myLibrary:prod et laissez votre terminal faire le reste. Les "repos" sont simplement des commandes que votre terminal informatique peut lire, interpréter et exécuter en conséquence.

ng build myLibrary ceci déclenche la commande standard de construction de la CLI ng, construisant ainsi votre bibliothèque

&& ceci dit "hé après avoir fait la chose à gauche de moi [&&], fais la chose à droite de moi"

mkdir dist/myLibrary/lib/assets _ this est une commande bash de base qui crée un répertoire dans lequel vous allez copier vos actifs. mkdir crée un répertoire et le chemin indique où et ce que je veux que ce répertoire soit. Si j'étais dans le dossier pour lequel je voulais un répertoire, dites "foo", je ferais mkdir bar qui me donnerait foo/bar, si j'étais dans "foo" et que je voulais que le répertoire "tacos" soit dans le répertoire "bar", je le ferais mkdir bar/tacos et il créerait des "tacos" dans le répertoire "bar" comme foo/bar/tacos.

Je préfère créer un dossier et déplacer des éléments de a -> b, plutôt que d’essayer de créer un dossier et ses éléments.

cp -R projects/myLibrary/src/lib/assets/ dist/myLibrary/lib/assets/ celle-ci est divisée en 4 parties pour les débutants.

  1. cp est "copie"
  2. -R signifie "récursif", signifie que vous devez conserver tous les fichiers et dossiers et les conserver une fois copiés.
  3. projects/myLibrary/src/lib/assets/ c'est là que se trouvent mes actifs et que je souhaite passer au nouveau répertoire que j'ai créé avec la commande précédente mkdir.
  4. dist/myLibrary/lib/assets/ est la destination de la commande de copie.

Donc avec celui-ci vous avez ...

  1. Commande cp -R
  2. Cible path/to/assets/in/library/project/
  3. Destination path/to/desired/directory/in/build

La dernière étape est npm run msgAssetsCopied qui n'est qu'un autre script npm dans mon package.json qui indique à la personne qui frappe au clavier que les ressources ont été copiées. Dans mes scripts, les messages contenant des émojis permettent généralement aux développeurs de voir plus facilement à quel moment se trouve un script, en identifiant les émojis à l'écran. Par exemple...

"msgAssetsCopied": "echo '???? Assets Copied to Library Dist Folder ????'",

Alors ???? Assets Copied to Library Dist Folder ???? est imprimé dans le terminal lorsque nous avons terminé.

Encore neuf? Ne vous inquiétez pas, je vais maintenant vous montrer où ils se trouvent dans votre package.json.

{
  "name": "YourWorkspace",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    }
}

Comme vous pouvez le constater, il s’agit du sommet de votre fichier package.json. Vous pouvez ajouter autant de scripts que vous le souhaitez. Ci-dessous, nous ajouterons celui que je viens de partager ...

{
  "name": "YourWorkspace",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "myLibrary:prod": "ng build myLibrary && mkdir dist/myLibrary/lib/assets && cp 
    -R projects/myLibrary/src/lib/assets/ dist/myLibrary/lib/assets/ && npm run 
    msgAssetsCopied",
    }
}

Boom va la dynamite!

2
anothercoder