Angular 6 CLI -> how to make ng build build project + libraries

Question

So the question is pretty basic but I can't find it.

I created a new app through ng new my-project, followed by a ng g library my-library. Then I executed the command ng build, but is is only building my app, and not my library or my e2e projects. This is because in the angular.json defaultProject is set to my-project. I could change it to my-library, and then ng build will build the lib.

Is there a way to let angular build all the project and the libraries in one ng-build?

Solution 1

I just added a script to package.json to do that, could not find a better way.

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

and then

yarn run build-all

Solution 2

Currently there is no supported way to do this out of the box. As suggested by @oklymenk you should for now go with a custom script which will chain all these build commands.

Also the link shared by @Eutrepe, you can see that they are planning to get rid of this re build thing everytime you make changes to your library.

Running ng build my-lib every time you change a file is bothersome and takes time.

Some similar setups instead add the path to the source code directly inside tsconfig. This makes seeing changes in your app faster.

But doing that is risky. When you do that, the build system for your app is building the library as well. But your library is built using a different build system than your app.

Those two build systems can build things slightly different, or support completely different features.

This leads to subtle bugs where your published library behaves differently from the one in your development setup.

For this reason we decided to err on the side of caution, and make the recommended usage the safe one.

In the future we want to add watch support to building libraries so it is faster to see changes.

We are also planning to add internal dependency support to Angular CLI. This means that Angular CLI would know your app depends on your library, and automatically rebuilds the library when the app needs it.

Why do I need to build the library everytime I make changes?

Solution 3

I created a script that, when placed in the same folder as angular.json, will pull in the file, loop over the projects, and build them in batches asynchronously.

Here's a quick gist, you can toggle the output path and the number of asynchronous builds. I've excluded e2e for the moment, but you can remove the reference to the filteredProjects function, and it will run for e2e as projects as well. It would also be easy to add this to package.json as an npm run script. So far, it has been working well.

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

Solution 4

Maybe this works for you:

Build the library with ng build --prod --project=your-library, then in your package.json dependencies:

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

Then ng build --prod your root project.

Example taken from here: https://blog.angularindepth.com/creating-a-library-in-angular-6-part-2-6e2bc1e14121

Solution 5

I find and test this: https://github.com/angular/angular-cli/wiki/stories-create-library

So instead ng build --prod you should use ng build my-lib --prod

View more solutions

Comments

[dendimiiii]

I know. But I need a command to build the main app, AND all my libraries in the projects folder.

[Chris Tarasovs]

but that creates them in seperate builds and each build deployed seperate

[J.P.]

I don't understand why this is the accepted answer. As @ChrisTarasovs said, this creates separate deployments. I've actually also tried to simply edit the built index.html to include the separate library, but it's one error after another. Still looking for a solution.

[Luminous]

If you come across an error calling spawn then specify {shell: true} for the third parameter.

[Luminous]

I added the ability to specify the --prod flag or not. const prod = process.argv[2] === "prod" ? "--prod" : ""; const outputPath = prod === "" ? "--output-path=dist/unminified/" + project : ""; return new Promise((resolve, reject) => { let child = spawn('ng', ['build', '--project', project, prod, outputPath], {shell: true});`