web-dev-qa-db-fra.com

Angular 6 CLI -> comment créer ng build build project + librairies

Donc la question est assez basique mais je ne la trouve pas.

J'ai créé une nouvelle application via ng new my-project, suivi d'un ng g library my-library. Ensuite, j'ai exécuté la commande ng build, mais je ne fais que construire mon application, et non ma bibliothèque ou mes projets e2e. Cela est dû au fait que, dans le fichier angular.json, defaultProject est défini sur my-project. Je pourrais le changer en ma bibliothèque, puis ng build construira la lib.

Existe-t-il un moyen de laisser Angular construire tout le projet et les bibliothèques en un seul ng-build?

angularangular-cliangular6
12
dendimiiii

Je viens d'ajouter un script à package.json pour ce faire, impossible de trouver un meilleur moyen.

  "scripts": {
    "build-all": "ng build lib1 && ng build lib2 && ng build",
    "build-all-prod": "ng build lib1 --prod && ng build lib2 --prod && ng build --prod"
  },

et alors

yarn run build-all
10
oklymenk

À l'heure actuelle, il n'existe aucun moyen pris en charge de le faire par défaut . Comme l'a suggéré @oklymenk, vous devriez pour l'instant utiliser un script personnalisé qui enchaînera toutes ces commandes de construction.

En plus du lien partagé par @Eutrepe, vous pouvez voir qu’ils envisagent de se débarrasser de cette opération de reconstruction à chaque fois que vous apportez des modifications à votre bibliothèque.

Lancer ng build my-lib chaque fois que vous modifiez un fichier est fastidieux et prend du temps.

Certaines configurations similaires ajoutent à la place le chemin d'accès au code source directement dans tsconfig. Cela accélère l'affichage des modifications dans votre application.

Mais cela est risqué. Lorsque vous faites cela, le système de construction de votre application construit également la bibliothèque. Mais votre bibliothèque est construite en utilisant un système de construction différent de celui de votre application.

Ces deux systèmes de construction peuvent construire des choses légèrement différentes ou prendre en charge des fonctionnalités complètement différentes.

Cela conduit à des bogues subtils dans lesquels votre bibliothèque publiée se comporte différemment de celle de votre configuration de développement.

Pour cette raison, nous avons décidé de faire preuve de prudence et de rendre l'utilisation recommandée sûre.

À l'avenir, nous souhaitons ajouter un support de surveillance à la création de bibliothèques afin de pouvoir visualiser plus rapidement les modifications.

Nous prévoyons également d’ajouter une prise en charge de la dépendance interne à Angular CLI. Cela signifie que la CLI angulaire sait que votre application dépend de votre bibliothèque et la reconstruit automatiquement lorsque l'application en a besoin.

Pourquoi dois-je construire la bibliothèque chaque fois que je modifie?

3
Ashutosh Singh

Peut-être que cela fonctionne pour vous: 

Construisez la bibliothèque avec ng build --prod --project=your-library, puis dans vos dépendances package.json:

"example-ng6-lib": "file:../example-ng6-lib/dist/example-ng6-lib/example-ng6-lib-0.0.1.tgz",

Puis ng build --prod votre projet racine.

Exemple tiré de cet exemple: https://blog.angularindepth.com/creating-a-library-in-angular-6-part-2-6e2bc1e14121

0
Gus

J'ai créé un script qui, lorsqu'il est placé dans le même dossier que angular.json, permet d'extraire le fichier, de le parcourir en boucle et de le construire par lots de manière asynchrone.

Voici un résumé rapide, vous pouvez changer le chemin de sortie et le nombre de générations asynchrones. J'ai exclu e2e pour le moment, mais vous pouvez supprimer la référence à la fonction filteredProjects, qui sera également exécutée pour e2e. Il serait également facile d’ajouter ceci à package.json en tant que script d’exécution npm. Jusqu'ici, cela a bien fonctionné.

https://Gist.github.com/bmarti44/f6b8d3d7b331cd79305ca8f45eb8997b 

const fs = require('fs'),
  spawn = require('child_process').spawn,
  // Custom output path.
  outputPath = '/nba-angular',
  // Number of projects to build asynchronously.
  batch = 3;

let ngCli;

function buildProject(project) {
  return new Promise((resolve, reject) => {
    let child = spawn('ng', ['build', '--project', project, '--prod', '--extract-licenses', '--build-optimizer', `--output-path=${outputPath}/dist/` + project]);

    child.stdout.on('data', (data) => {
      console.log(data.toString());
    });

    child.stderr.on('data', (data) => {
      process.stdout.write('.');
    });

    child.on('close', (code) => {
      if (code === 0) {
        resolve(code);
      } else {
        reject(code);
      }
    });
  })
}

function filterProjects(projects) {
  return Object.keys(projects).filter(project => project.indexOf('e2e') === -1);
}

function batchProjects(projects) {
  let currentBatch = 0,
    i,
    batches = {};

  for (i = 0; i < projects.length; i += 1) {
    if ((i) % batch === 0) {
      currentBatch += 1;
    }
    if (typeof (batches['batch' + currentBatch]) === 'undefined') {
      batches['batch' + currentBatch] = [];
    }

    batches['batch' + currentBatch].Push(projects[i]);
  }
  return batches;
}

fs.readFile('angular.json', 'utf8', async (err, data) => {
  let batches = {},
    batchesArray = [],
    i;

  if (err) {
    throw err;
  }

  ngCli = JSON.parse(data);

  batches = batchProjects(filterProjects(ngCli.projects));
  batchesArray = Object.keys(batches);

  for (i = 0; i < batchesArray.length; i += 1) {
    let promises = [];

    batches[batchesArray[i]].forEach((project) => {
      promises.Push(buildProject(project));
    });

    console.log('Building projects ' + batches[batchesArray[i]].join(','));

    await Promise.all(promises).then(statusCode => {
      console.log('Projects ' + batches[batchesArray[i]].join(',') + ' built successfully!');
      if (i + 1 === batchesArray.length) {
        process.exit(0);
      }
    }, (reject) => {
      console.log(reject);
      process.exit(1);
    });
  }
});
0
bmarti44

Je trouve et teste ceci: https://github.com/angular/angular-cli/wiki/stories-create-library

Donc, au lieu ng build --prod, vous devriez utiliser ng build my-lib --prod

0
Eutrepe