webentwicklung-frage-antwort-db.com.de

Angular 6 CLI -> Erstellen eines Build-Projekts + Bibliotheken

Die Frage ist also ziemlich einfach, aber ich kann sie nicht finden.

Ich habe eine neue App mit ng new my-project erstellt, gefolgt von einem ng g library my-library. Dann habe ich den Befehl ng build ausgeführt, erstellt aber nur meine App und nicht meine Bibliothek oder meine e2e-Projekte. Dies liegt daran, dass in der Datei angle.json defaultProject auf mein Projekt gesetzt ist. Ich könnte es in meine-Bibliothek ändern, und dann wird ng build die lib erstellen.

Gibt es eine Möglichkeit, das Projekt und die Bibliotheken in einem einzigen NG-Build in eckiger Form erstellen zu lassen?

12
dendimiiii

Ich habe gerade ein Script zu package.json hinzugefügt, um einen besseren Weg zu finden.

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

und dann

yarn run build-all
10
oklymenk

Derzeit gibt es keine unterstützte Methode, um dies aus der Box heraus zu erledigen. Wie von @oklymenk vorgeschlagen, sollten Sie jetzt ein benutzerdefiniertes Skript verwenden, das alle diese Build-Befehle verkettet.

Auch der Link, der von @Eutrepe geteilt wird, können Sie sehen, dass sie vorhaben, diese Neuerscheinung jedes Mal zu löschen, wenn Sie Änderungen an Ihrer Bibliothek vornehmen.

Wenn Sie ng build my-lib jedes Mal ausführen, wenn Sie eine Datei ändern, ist dies lästig und braucht Zeit.

Einige ähnliche Setups fügen stattdessen den Pfad direkt in tsconfig zum Quellcode hinzu. Dadurch werden Änderungen in Ihrer App schneller angezeigt.

Aber das ist riskant. Wenn Sie dies tun, erstellt das Build-System für Ihre App auch die Bibliothek. Ihre Bibliothek basiert jedoch auf einem anderen Build-System als Ihre App.

Diese beiden Build-Systeme können etwas anders bauen oder ganz andere Funktionen unterstützen.

Dies führt zu subtilen Fehlern, bei denen sich Ihre veröffentlichte Bibliothek anders als in Ihrer Entwicklungsumgebung verhält.

Aus diesem Grund haben wir uns entschieden, auf Nummer sicher zu gehen und die empfohlene Verwendung zur sicheren zu machen.

In Zukunft möchten wir beim Erstellen von Bibliotheken Überwachungsunterstützung hinzufügen, damit Änderungen schneller sichtbar werden.

Wir planen auch, Angular CLI um Unterstützung für interne Abhängigkeiten zu erweitern. Dies bedeutet, dass Angular CLI weiß, dass Ihre App von Ihrer Bibliothek abhängt, und erstellt die Bibliothek automatisch neu, wenn die App sie benötigt.

Warum muss ich die Bibliothek jedes Mal erstellen, wenn ich Änderungen vornehme?

3
Ashutosh Singh

Vielleicht funktioniert das für Sie: 

Erstellen Sie die Bibliothek mit ng build --prod --project=your-library und dann in Ihren package.json-Abhängigkeiten:

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

Dann ng build --prod Ihr Stammprojekt.

Beispiel von hier: https://blog.angularindepth.com/creating-a-library-in-angular-6-part-2-6e2bc1e14121

0
Gus

ng-build enthält Ihre Bibliotheken bereits im main.js-Bundle. Es muss nicht jede Bibliothek separat erstellt werden.

0
Milind Sharma

Soviel ich weiß, gibt es in der aktuellen Version (Angular 8) keine eingebaute Möglichkeit, dies zu tun.
Es könnte möglich sein, das neue builders zu verwenden, aber ich weiß noch nicht viel über sie.
Also habe ich stattdessen ein Skript erstellt, das im angular.json Datei und bestimmt alle application Projekte und alle configurations.
Dann führt es ng build für jedes Projekt und jede Konfiguration.
Außerdem werden alle fehlgeschlagenen Builds gesammelt und am Ende in der Konsole protokolliert.
Dieses Skript sieht folgendermaßen aus:

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

Sie können es mit tsc kompilieren und dann mit NodeJs ausführen.

0
Springrbua

Ich habe ein Skript erstellt, das, wenn es sich in demselben Ordner befindet wie angular.json, die Datei in die Schleife zieht, die Projekte durchläuft und sie asynchron in Batches erstellt.

Hier ist eine kurze Übersicht, Sie können den Ausgabepfad und die Anzahl der asynchronen Builds umschalten. Ich habe e2e im Moment ausgeschlossen, aber Sie können den Verweis auf die filteredProjects-Funktion entfernen, und er wird auch für e2e als Projekte ausgeführt. Es wäre auch einfach, dies als npm run-Skript zu package.json hinzuzufügen. Bisher hat es gut funktioniert.

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

Ich finde und teste dies: https://github.com/angular/angular-cli/wiki/stories-create-library

Statt ng build --prod sollten Sie ng build my-lib --prod verwenden.

0
Eutrepe