web-dev-qa-db-ja.com

Angular 6 CLI-> ng build buildプロジェクト+ライブラリの作成方法

質問はかなり基本的ですが、私はそれを見つけることができません。

ng new my-projectを使用して新しいアプリを作成し、その後にng g library my-libraryを追加しました。次に、コマンドng buildを実行しましたが、アプリをビルドするだけで、ライブラリやe2eプロジェクトはビルドしていません。これは、angular.jsonでdefaultProjectがmy-projectに設定されているためです。これをmy-libraryに変更すると、ng buildがlibをビルドします。

angularにすべてのプロジェクトとライブラリを1つのng-buildでビルドさせる方法はありますか？

angularangular-cliangular6
14
dendimiiii

そのために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
12
oklymenk

現在、これをすぐに実行できるサポートされた方法はありません。 @oklymenkで提案されているように、今のところ、これらすべてのビルドコマンドをチェーン化するカスタムスクリプトを使用する必要があります。

また、@ Eutrepeが共有しているリンクを見ると、ライブラリを変更するたびに、この再構築物を削除することを計画していることがわかります。

ファイルを変更するたびにng build my-libを実行するのは面倒で時間がかかります。

代わりに、いくつかの同様のセットアップでは、tsconfig内でソースコードへのパスを直接追加します。これにより、アプリの変更がより速く表示されます。

しかし、それを行うのは危険です。これを行うと、アプリのビルドシステムもライブラリをビルドします。ただし、ライブラリはアプリとは異なるビルドシステムを使用してビルドされます。

これらの2つのビルドシステムは、ビルドをわずかに異なるものにするか、完全に異なる機能をサポートします。

これにより、公開されたライブラリの動作が開発セットアップのライブラリとは異なる微妙なバグが発生します。

このため、注意を怠って、推奨される使用法を安全なものにすることにしました。

将来的には、ライブラリの構築に監視サポートを追加して、変更をより迅速に見たいと考えています。

また、Angular CLIに内部依存関係サポートを追加する予定です。つまり、Angular CLIは、アプリがライブラリに依存していることを認識し、アプリが必要とするときにライブラリを自動的に再構築します。

変更するたびにライブラリをビルドする必要があるのはなぜですか？

3
Ashutosh Singh

たぶんこれはあなたのために働く：

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

1
Gus

ng-buildにはすでにmain.jsバンドルにライブラリが含まれています。各ライブラリを個別にビルドする必要はありません。

0
Milind Sharma

私が知っている限り、現在のバージョン（Angular 8）ではこれを行うための組み込みの方法はありません。
新しいbuildersを使用することは可能かもしれませんが、それらについてはまだよく知りません。
したがって、代わりにスクリプトを作成し、angular.jsonファイルを読み取り、すべてのapplicationプロジェクトとすべてのconfigurationsを決定しました。
次に、すべてのプロジェクトと構成に対してng buildを実行します。
また、失敗したすべてのビルドを収集し、最後にコンソールに記録します。
このスクリプトは次のようになります。

import { ProjectType, WorkspaceSchema } from "@schematics/angular/utility/workspace-models";
import { execSync } from "child_process";
import { readFileSync } from "fs";

interface ExecParams {
  project: string;
  config: string;
}

interface ExecError extends ExecParams {
  message: string;
}

function buildAll() {
  const json: WorkspaceSchema = JSON.parse(readFileSync("./angular.json").toString());
  const errors: ExecError[] = Object.keys(json.projects)
    // Filter application-projects
    .filter(name => json.projects[name].projectType === ProjectType.Application)
    // Determine parameters needed for the build command
    .reduce<ExecParams[]>((arr, project) => {
      const proj = json.projects[project];
      let build = proj.architect && proj.architect.build;
      if (build) {
        arr = arr.concat(...Object.keys(build.configurations || {})
          .map(config => ({ project, config }))
        );
      }
      return arr;
    }, [])
    // Execute `ng build` and collect errors.
    .reduce<ExecError[]>((err, exec) => {
      try {
        console.log(`Building ${exec.project} (${exec.config}):`);
        execSync(`ng build --prod --project ${exec.project} --configuration ${exec.config}`, {stdio: "inherit"});
      }
      catch (error) {
        err.Push({
          project: exec.project,
          config: exec.config,
          message: error.message
        });
      }
      console.log("\n");
      return err;
    }, []);

  // Conditionally log errors
  if (errors.length === 0)
    console.log("Completed");
  else {
    console.log("\n");
    errors.forEach(error => {
      console.error(`Building ${error.project} (${error.config}) failed:\n\t${error.message}`);
    });
  }
}

buildAll();

tscを使用してコンパイルし、NodeJsで実行できます。

0
Springrbua

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

私はこれを見つけてテストします： https://github.com/angular/angular-cli/wiki/stories-create-library

したがって、代わりにng build --prodを使用する必要がありますng build my-lib --prod

0
Eutrepe