Angular 6 CLI -> как сделать ng build build build + библиотеки

Question

Так что вопрос довольно простой, но я не могу его найти.

Я создал новое приложение через ng new my-project, затем ng g library my-library. Затем я выполнил команду ng build, но она только создает мое приложение, а не мою библиотеку или мои проекты e2e. Это потому, что в angular.json defaultProject установлено значение my-project. Я мог бы изменить его на my-library, и тогда ng build соберет lib.

Есть ли способ позволить angular собрать весь проект и библиотеки в одной ng-сборке?

Answer 1

ng-build уже включает ваши библиотеки в пакет main.js. Не нужно отдельно строить каждую библиотеку.

Answer 2

Может быть, это работает для вас:

Создайте библиотеку с ng build --prod --project=your-library, затем в ваших зависимостях package.json:

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

Тогда ng build --prod ваш корневой проект.

Пример взят здесь: https://blog.angularindepth.com/creating-a-library-in-angular-6-part-2-6e2bc1e14121

Answer 3

Я создал скрипт, который, будучи помещенным в ту же папку, что и angular.json, будет извлекать файл, циклически перебирать проекты и асинхронно собирать их в пакеты.

Вот краткий обзор, вы можете переключать выходной путь и количество асинхронных сборок. На данный момент я исключил e2e, но вы можете удалить ссылку на функцию filteredProjects, и она будет работать и для e2e в качестве проектов. Также было бы легко добавить это к package.json как скрипт запуска npm. Пока что это работает хорошо.

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);
    });
  }
});

Answer 4

В настоящее время нет поддерживаемых способов сделать это из коробки. В соответствии с предложением @oklymenk вы должны использовать собственный скрипт, который объединит все эти команды сборки.

Кроме того, по ссылке, которой поделились @Eutrepe, вы можете видеть, что они планируют избавиться от этой функции перестройки каждый раз, когда вы вносите изменения в свою библиотеку.

Запуск ng build my-lib каждый раз, когда вы меняете файл, утомителен и занимает много времени.

Некоторые подобные настройки вместо этого добавляют путь к исходному коду непосредственно внутри tsconfig. Это ускоряет просмотр изменений в вашем приложении.

Но делать это рискованно. Когда вы делаете это, система сборки для вашего приложения также собирает библиотеку. Но ваша библиотека построена с использованием другой системы сборки, чем ваше приложение.

Эти две системы сборки могут создавать разные вещи или поддерживать совершенно разные функции.

Это приводит к незначительным ошибкам, когда ваша опубликованная библиотека ведет себя не так, как в настройках разработки.

По этой причине мы решили ошибиться с осторожностью и сделать рекомендованное использование безопасным.

В будущем мы хотим добавить поддержку наблюдения для создания библиотек, чтобы быстрее было видеть изменения.

Мы также планируем добавить поддержку внутренних зависимостей в Angular CLI. Это означает, что Angular CLI будет знать, что ваше приложение зависит от вашей библиотеки, и автоматически перестраивает библиотеку, когда приложению это необходимо.

Зачем мне создавать библиотеку каждый раз, когда я делаю изменения?

Answer 5

Я только что добавил сценарий в package.json, не мог найти лучшего способа.

  "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"
  },

, а затем

yarn run build-all

Answer 6

Я нахожу и проверяю это: https://github.com/angular/angular-cli/wiki/stories-create-library

Так что вместо ng build --prod вы должны использовать ng build my-lib --prod