'ng build' move Skripte Unterordner

Question

ng bauen Dateien exportiert Ordner dist als

folgen

index.html 
main.bundle.js 
styles.bundle.js 
... 

I-Skripte in Unterordner sein wollen

*index.html 
scripts/main.bundle.js 
scripts/styles.bundle.js 
...* 

Wie kann ich es tun?

Answer 1

1. run ng eject -ec (Add '-prod' für die Produktion zu bauen, oder -aot false für JIT-Build). Dieser Befehl wird webpack.config.js Datei in Ihrem Stammverzeichnis verfügbar machen. -ec Flag wird CSS-Dateien extrahieren (anstatt sie aus der JS-Datei zu liefern). (Zu 'uneject' Ihre App wieder sehen, mein another answer)

2. Run npm install um webpack Lader

3. In webpack.config.js Datei bearbeiten Ausgabe Eintrag und fügen Sie Ihren gewünschten Verzeichnisnamen zu installieren für JS-Dateien:

   "output": { "path": path.join(process.cwd(), "dist"), "filename": "scripts/[name].[chunkhash:20].bundle.js", "chunkFilename": "scripts/[id].[chunkhash:20].chunk.js" }

4. weil wir -ec Flagge zu ng eject Befehl hinzugefügt, wir ha auch CSS-Datei (en). Wir können auch sie zu dist bewegen/styles durch Modifizieren ExtractTextPlugin Plugin unter Plugins Eintrag in webpack.config.js Datei:

   new ExtractTextPlugin({ "filename": "styles/[name].[contenthash:20].bundle.css", "disable": false }),

5. laufen npm run build seit ng build funktioniert nicht mehr auf ausgeworfene Apps. Sie sollten dist Verzeichnis mit Skripte und Arten Verzeichnisse im Inneren erhalten zusammen mit ihren JS/CSS-Dateien, index.html sollte direkt unter dist befinden und haben richtig enthält wie:

   <link href="styles/styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet"/> <script type="text/javascript" src="scripts/inline.3d27fc24e48981450c35.bundle.js"></script>

Answer 2

Sie können das dist Verzeichnis ändern, indem Sie die outDir in angular-cli.json ändern, aber Sie können kein separates Verzeichnis für js Dateien festlegen.

Wenn Sie dies tun möchten, müssen Sie ein kleines Node-Skript schreiben, das nach dem Build ausgeführt wird und die gewünschten Dateien in dist/scripts kopiert. Sie müssen auch die <script> Tags in index.html ändern, um auf den neuen Speicherort zu zeigen.