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

113

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.

Kizmar
quelle
2
Grundsätzlich können Sie Dateien mit npm kopieren. Fügen Sie einfach den Befehl copy in Skripten in package.json hinzu. Überprüfen Sie auch diese lucasmreis.github.io/blog/npm-is-an-amazing-build-tool
Vadim Sentiaev
Was ich letztendlich getan habe (was auch hackig erscheint): Installierte ein Dateikopie-npm-Paket und fügte dann einen Wert im Abschnitt "scripts" von "package.json" hinzu "copy:webConfig": "node node_modules/copy/bin/cli.js web.config dist". Ich habe auch ein Post-Build-Skript hinzugefügt : "postbuild": "npm run copy:webConfig". Es gab andere Probleme beim Versuch, die Kopie zum Laufen zu bringen, aber dies hat den Trick getan.
Kizmar
Hmm hat genau die gleichen Anforderungen mit Azure IIS Rules und Angular CLI - wollte auch keine weiteren Build-Schritte hinzufügen, wenn möglich
Rodney
Die Antworten hier sind richtig, aber wenn Sie verschiedene Dateien pro Umgebung kopieren müssen, empfehle ich zu lesen: stackoverflow.com/a/59162533/3306960
Manuel Lopera

Antworten:

147

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

Md Ayub Ali Sarker
quelle
6
Muss unter "Apps" sein, Beispiel: "Apps": [{"Assets": ["config / appConfig.json"]}]
Manny
Sieht aus wie eine wahre, aber nicht für mich arbeiten. "Assets": "Assets" und "Assets": ["Assets"] - funktionieren, aber "Assets": ".htaccess", "Assets": ["Assets", ".htaccess"] - funktionieren nicht. Irgendwelche Vorschläge?
Gleb
@gleb, füge wie "Assets" hinzu: ["Assets", ".htaccess"], ich denke, dies wird deinen Zweck erfüllen.
Md Ayub Ali Sarker
@MdAyubAliSarker, danke, das Problem war, dass ich Angular-Cli Version 1.0.0-Beta.17 verwendet habe. 1.0.0-beta.19 funktioniert gut für mich
Gleb
1
Ok, ignoriere das, war ein Typ - es funktioniert. Die Web.config muss also in das Stammverzeichnis des Src-Ordners verschoben werden, und dann sieht die JSON-Datei wie folgt aus: "Assets": ["Assets", "Web.config"]
Rodney,
66

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.

PS

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.

Meligy
quelle
2
Diese Konfiguration funktionierte für mich: {"glob": " * / ", "input": "src / assets", "output": "/ assets"},
patrickbadley
7

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.

Joe Purdy
quelle
5

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,

Anjana Silva
quelle
1
und die Datei, in die das eingefügt werden soll, ist angular.jsonnicht die angular-cli.jsonin früheren Antworten erwähnte.
mMerlin
1

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

Alex Lin
quelle
1
Ja, aber web.config ist keine JavaScript-Datei. Wird es das auch kopieren, ohne zu erwarten, dass es JS ist, und es mit dem Rest des JS zu bündeln?
Kizmar
@ Kizmar, Ja, das wird nicht funktionieren. Es wird versuchen (und fehlschlagen), es als js zu laden.
Nathan Cooper
0

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.

Nadee
quelle
0

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

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