Wie füge ich benutzerdefinierte Dateien mit Angular-CLI-Build hinzu?

RE: Angular2 2.0.0, Angular-Cli v1.0.0-Beta.11-Webpack.8

Wie kann ich angular-cli anweisen, eine Datei aus "src / assets" beim Erstellen in das Stammverzeichnis von "dist" aufzunehmen?

Wir stellen auf einem Windows-Host bereit und müssen eine "web.config" -Datei einfügen, um IIS anzuweisen, alles an den Index weiterzuleiten. Wir haben dies vor RC4 gemacht, aber bei all den Aktualisierungen ist es durch die Risse gefallen (ich erinnere mich nicht, wie wir es gemacht haben).

Ich habe die GitHub-Repo-Dokumente durchsucht und in Bezug auf dieses Thema keine Verwendung gefunden. Vielleicht bin ich am falschen Ort?

Im Inhaltsverzeichnis gibt es einen Aufzählungspunkt "Hinzufügen zusätzlicher Dateien zum Build", aber es scheint, dass dieser Abschnitt nicht vorhanden ist.

Die Eigenschaft "Assets" von angle-cli.json kann so konfiguriert werden, dass benutzerdefinierte Dateien in den Build des Angular-Cli-Webpacks aufgenommen werden. Konfigurieren Sie daher den Eigenschaftswert "Assets" als Array. Beispielsweise:

"assets": ["assets", "config.json",".htaccess"],

Die obige Konfiguration kopiert config.jsn und .htaccess während des Builds des Angular-Cli-Webpacks in den Ordner dist. Die obige Einstellung funktionierte in Angular-CLI-Version 1.0.0-Beta.18

Aktuelle richtige Antwort:

Das Team hat Unterstützung für das Kopieren bestimmter Dateien in den Ausgabeordner ( diststandardmäßig) in einer späteren Version von Angular CLI hinzugefügt (wäre Beta 17 oder 19 - es ist seit Ewigkeiten in den endgültigen 1.x-Versionen enthalten).

Sie fügen es einfach wie folgt zum Array hinzu angular-cli.json:

{
  ...
  "Apps" [
    {
       "root": "src",
       "Vermögenswerte": [
         "Vermögenswerte",
         "web.config"
       ],
       ...
    }}
  ]]
  ...
}}

(Beachten Sie, dass der Pfad relativ zum srcOrdner ist.)

Ich persönlich benutze es und es funktioniert gut.

Ab Beta 24 habe ich Angular CLI eine Funktion hinzugefügt , die sicherstellt, dass alle assetsDateien und Ordner vom Webpack-Entwicklungsserver bereitgestellt werden, wenn sie ng testnicht nur ausgeführt werden ng serve.

Es unterstützt auch das Bereitstellen der Asset-Dateien auf dem Webpack-Entwicklungsserver, der für Unit-Tests verwendet wird ( ng test).
(Falls Sie einige JSON-Dateien für die Tests benötigen oder es einfach hassen, 404-Warnungen in der Konsole zu sehen).
Sie werden bereits bedient, ng e2eweil es voll läuft ng serve.

Außerdem bietet es erweiterte Funktionen, z. B. das Filtern der gewünschten Dateien aus einem Ordner und das Unterscheiden des Namens des Ausgabeordners vom Quellordner:

{
  ...
  "Apps" [
    {
      "root": "src",
      "Vermögenswerte": [
        "Vermögenswerte",
        "web.config":
        {
          // Inhalt in diesen Ordner kopieren
          "Eingabe": "../",
          // Das passt zu diesem Platzhalter
          "glob": "* .config",
          // Und lege sie in diesen Ordner unter "dist" ("." Bedeutet, dass du sie direkt in "dist" ablegst)
          "Ausgabe": "."
        }}
      ],
      ...
    }}
  ]]
  ...
}}

Sie können sich auch auf die offizielle Dokumentation beziehen: Angular Guide - Workspace-Konfiguration .

.

[NUR FÜR ARCHIVIERUNG] Ursprüngliche Antwort (6. Oktober 2016):

Dies wird derzeit leider nicht unterstützt (ab Beta-16). Ich habe das Team genau über die Bedenken informiert (web.config-Dateien), aber es scheint nicht so bald zu geschehen (es sei denn, Sie geben die CLI usw.).

Befolgen Sie diese Ausgabe, um ausführliche Informationen und mögliche zukünftige Details zu erhalten.

Für die JSON-Datei können Sie sie einfügen ./src/assets/. Dieser Ordner wird unverändert kopiert ./dist/assets/. Dies ist das aktuelle Verhalten.

Früher in systemJS-Tagen gab es einen anderen ./public/Ordner, in den ./dist/direkt kopiert wurde , aber dieser ist in Webpack-Versionen nicht mehr vorhanden, auf die in dem oben genannten Problem eingegangen wird.

Eine Lösung (obwohl es meiner Meinung nach ein bisschen hackig ist) besteht darin, eine Variable in Ihrer main.tsDatei zu deklarieren , die die zusätzliche Datei erfordert, die Sie in die Webpack-Build-Ausgabe aufnehmen möchten.

EX:

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';

/* HACK: Include standalone web.config file manually in webpack build
 *
 * Due to the way the beta angular-cli abstracts the webpack config files into
 * angular-cli.json and lacks current documentation we were unable to find
 * a way to include additional files manually in the webpack build output.
 *
 * For hosting on IIS we need to include a web.config file for
 * specifying rewrite rules to make IIS compatible with the Angular Router.
 * The one liner following this comment is a hack to accomplish this
 * and should be reviewed and corrected as soon as adequete documentation
 * is available for the angular-cli configuration file.
 */
const webConfig = require('file?name=[name].[ext]!./web.config');

if (environment.production) {
    enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

Wenn Webpack auf diese Variablendeklarationsanweisung stößt, gibt main.tses die Rohdatei web.configals Teil der Build-Ausgabe aus:

                            Asset       Size  Chunks             Chunk Names
                       inline.map    5.59 kB       2  [emitted]  inline
                       web.config  684 bytes          [emitted]
                 styles.bundle.js    16.7 kB    1, 2  [emitted]  styles
                        inline.js    5.53 kB       2  [emitted]  inline
                         main.map    5.36 MB    0, 2  [emitted]  main
                       styles.map    22.6 kB    1, 2  [emitted]  styles
                   main.bundle.js    4.85 MB    0, 2  [emitted]  main
                       index.html    1.98 kB          [emitted]
                assets/.npmignore    0 bytes          [emitted]
         assets/styles/global.css    2.74 kB          [emitted]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  4.45 kB       0
webpack: bundle is now VALID.

Eine ideale Lösung wäre die Webpack-Konfiguration, aber ich kann mir noch keine Gedanken darüber machen, wie die angular-cli.jsonAngular-Cli dies bis jetzt schafft (Beta.16).

Wenn also jemand eine bessere Antwort hat, die die Webpack-Konfiguration für ein von Angular Cli generiertes Projekt erweitert, würde ich sie gerne hören.

Für Angular 8 Leser ,

.htaccessmuss sein src/.htaccess. Siehe unten,

 "assets": [
    "src/favicon.ico",
     "src/assets",
     "src/.htaccess"
  ],

Stellen Sie sicher, dass Sie die .htaccessDatei im srcVerzeichnis Ihres Projekts abgelegt haben .

und die Datei, in die das eingefügt werden soll, ist angular.jsonnicht dieangular-cli.json

(Wenn Sie eine gültige htaccessDatei benötigen , finden Sie eine hier - https://stackoverflow.com/a/57126352/767625 )

Das ist es. Dies sollte jetzt kopiert werden, wenn Sie drücken ng build --prod=true.

Hoffe das hilft jemandem.

Prost,

In der Datei angle-cli.json befindet sich ein Abschnitt "Skripte". Dort können Sie alle Javascript-Dateien von Drittanbietern hinzufügen.

In meinem Fall habe ich Angular Version 5 verwendet . Daher habe ich versucht, eine Datei mit dem Namen Staticfile.txt zu erstellen, wenn ich den Befehl ng build --prod ausgeführt habe. Stellen Sie sicher, dass Sie die Dateierweiterung angeben, da sonst die Datei nicht erstellt wird.

Ändern Sie angle.json.
Eintrag zum Assets-Array hinzufügen:

{
  "glob": "**/web.config",
  "input": "src/",
  "output": "./"
}