Question

apps文件中的属性angular-cli.json是数组类型。如果我在这个数组中添加第二个元素，我如何指示ng build构建这两个元素？

Answer 1

目前v1.0.0您只能通过以下命令选择要构建的应用：

ng build -a appName

或

ng build --app appName

您还需要将name属性添加到apps数组中的每个元素，这样您就会有类似的内容：

"apps": [ { "name": "app1", "root": "src/app1root", ... }, { "name": "app2", "root": "src/app2root", ... }, ... ]

您也可以使用ng build -a 0或ng build -a 1等应用指数，因为您不需要指定应用名称。

从angular-cli sorces你可以看到没有可能在一个命令中运行所有应用程序，你应该指定索引或应用程序名称，否则将使用apps[0]，所以你可以＆＃ 39;使用一次ng build电话同时构建所有应用。

Answer 2

我搜索了angular-cli源代码，但找不到任何代码的引用，这些代码会迭代或以其他方式检查apps的内容作为数组。

截至目前（angular-cli版本1.0.0-beta.15），处理apps的每个代码实例都使用硬编码的数组的第一个元素（apps[0]）。似乎没有办法选择应用程序来构建或更改使用数组的第一个元素的默认行为。

apps元素的JSON模式以这种方式描述它：

此项目中不同应用程序的属性。

/**
 * Properties of the different applications in this project.
 */
apps?: {
    root?: string;
    outDir?: string;
    assets?: string;
    index?: string;
    main?: string;
    test?: string;
    tsconfig?: string;
    prefix?: string;
    mobile?: boolean;
    /**
     * Global styles to be included in the build.
     */
    styles?: string[];
    /**
     * Global scripts to be included in the build.
     */
    scripts?: string[];
    /**
     * Name and corresponding file for environment config.
     */
    environments?: {
        [name: string]: any;
    };
}[];

该项目的未来意图似乎是支持使用相同的代码库构建多个应用程序，但它看起来不像现在可行（1.0.0-beta.15版本）。

Answer 3

ng build --app仍然没有用一个命令构建所有应用程序的任何标志，因此解决此问题的最佳方法是在项目的根目录中创建 Makefile 文件： / p>

my-app
  --dist/
  --e2e/
  --src/
  .angular-cli.json
  package.json
  Makefile

Makefile允许根据您提供的说明组织代码编译。因此，我们需要提供指令，将所有应用程序的前端构建到输出目录中。现在Makefile文件如下所示：

help:
    @echo "_______BUILD ANGULAR FRONTEND______\n"
    @echo "To build all apps run make make build-frontend"

build-frontend:
    ng build -a=0 &&\
    ng build -a=1

但是，在复制粘贴上面的代码后，将空格更改为选项卡。否则，您将使用*** missing separator error

获取无效的Makefile

导航到root项目并进行测试，在终端中键入make，您应该会打印出帮助消息。在那之后：

make build-frontend

现在只需一个命令即可构建多个应用程序。

Answer 4

截至2019年10月28日，from the docs建立特定项目的正确方法：

ng build <app name>

有一个open issue in GitHub可以添加一次构建多个项目的功能。

Answer 5

我也在这里回答了类似的问题-> Angular 6 CLI -> how to make ng build build project + libraries

这用于> = ng6。如果您想使用cli的较早版本，可以查看此版本-> https://gist.github.com/bmarti44/f6b8d3d7b331cd79305ca8f45eb8997b/03c3b788551cd43db38d2f48e207a730aaba5b6f

我创建了一个脚本，该脚本与angular.json放在同一文件夹中时，将拉入文件，遍历项目，并异步批量构建它们。

这是一个快速要点，您可以切换输出路径和异步构建的数量。我暂时不包括e2e，但是您可以删除对filteredProjects函数的引用，它也将作为项目运行在e2e上。将其作为npm运行脚本添加到package.json也很容易。到目前为止，它运行良好。

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 6

对于Angular 6 +：

**Dev build**

ng build --project="second-app"

**Prod build**

ng build --prod --project="second-app"

Answer 7

使用您的package.json：

"scripts": {
   "build-projects": "ng build project1 && ng build project2",
}

然后运行：npm run build projects。

如何使用angular-cli构建多个应用程序？

7 个答案: