angle-cli wo ist die Datei webpack.config.js - new angle6 unterstützt ng eject nicht

131

UPDATE: Dezember 2018 (siehe 'Aniket'-Antwort)

Mit Angular CLI 6 müssen Sie Builder verwenden, da ng eject veraltet ist und in 8.0 bald entfernt wird

UPDATE: Juni 2018: Angular 6 unterstützt ng eject ** nicht

UPDATE: Februar 2017: Verwenden Sie ng eject

UPDATE: November 2016: angle-cli verwendet jetzt nur noch das Webpack. Sie müssen nur normal mit npm install -g angle-cli installieren. "Wir haben das Build-System zwischen Beta.10 und Beta.14 von SystemJS auf Webpack geändert."

Ich habe Angular Cli damit installiert:

npm install -g angular-cli@webpack

Als ich mit angle1 und web pack gearbeitet habe, habe ich die Datei "webpack.config.js" geändert, um alle Aufgaben und Plugins auszuführen, aber ich sehe bei diesem mit angle-cli erstellten Projekt nicht, wer es macht. es ist Magie?

Ich sehe, dass Webpack funktioniert, wenn ich es tue:

ng serve 

"Version: webpack 2.1.0-beta.18"

aber ich verstehe nicht, wie angular-cli config funktioniert ...

Stackdave
quelle
Es ist in Angular2 Cli eingebaut. Keine Magie nur vereinfacht.
Jorawar Singh
3
danke @MrJSingh, aber gibt es schon eine Konfigurationsdatei? oder funktioniert einfach mit angular-cli.json? Ich brauche keine weiteren Konfigurations-Plugins?
Stackdave
Es ist AT: node_modules \ @ngtools
bharatpatel
1
Angular 6.0.8 unterstützt derzeit nichtng eject
Robert Love
4
Mir gefällt, wie OP fast ein Jahr nach der Veröffentlichung die richtige Antwort aktualisiert.
Leuchtend

Antworten:

34

Mit Angular CLI 6 müssen Sie Builder verwenden, da ng eject veraltet ist und in 8.0 bald entfernt wird. Das steht, wenn ich versuche, einen ng-Auswurf durchzuführen

Geben Sie hier die Bildbeschreibung ein

Sie können das Angular -Builder-Paket ( https://github.com/meltedspark/angular-builders ) verwenden, um Ihre benutzerdefinierte Webpack-Konfiguration bereitzustellen.

Ich habe versucht, alles in einem einzigen Blog-Beitrag in meinem Blog zusammenzufassen - So passen Sie die Build-Konfiguration mit der benutzerdefinierten Webpack-Konfiguration in Angular CLI 6 an

Im Wesentlichen fügen Sie jedoch folgende Abhängigkeiten hinzu:

  "devDependencies": {
    "@angular-builders/custom-webpack": "^7.0.0",
    "@angular-builders/dev-server": "^7.0.0",
    "@angular-devkit/build-angular": "~0.11.0",

Nehmen Sie in angle.json folgende Änderungen vor:

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {"path": "./custom-webpack.config.js"},

Beachten Sie die Änderung im Builder und die neue Option customWebpackConfig. Auch ändern

    "serve": {
      "builder": "@angular-builders/dev-server:generic",

Beachten Sie die Änderung im Builder erneut für das Serve-Ziel. Nach diesen Änderungen können Sie eine Datei mit dem Namen custom-webpack.config.js in demselben Stammverzeichnis erstellen und dort Ihre Webpack-Konfiguration hinzufügen.

Im Gegensatz zur hier bereitgestellten ng-Auswurfkonfiguration wird sie jedoch mit der Standardkonfiguration zusammengeführt. Fügen Sie also einfach Dinge hinzu, die Sie bearbeiten / hinzufügen möchten.

Aniket Thakur
quelle
4
Nett. Eine Methode zum Ändern der Webpack-Konfiguration sollte in den eckigen Dokumenten erwähnt werden. Es hilft Neulingen wie mir.
Wajahath
Dieses Angular-Builder-Setup funktioniert bei mir nicht, wird ng servenur nach 5 Sekunden ohne Ausgabe beendet. Mein Projekt verwendet Winkel Cli 7 und Winkel Kern 5.
Tedw
Muss ich Änderungen an der scriptsEigenschaft von package.json vornehmen ?
Krishna Prashatt
Beachten Sie, dass in der Version von Angular Buildern für Angular 8 " @angular-builders/dev-server:genericveraltet ist. Verwenden Sie @angular-builders/custom-webpack:dev-serverstattdessen". Könnten Sie diese Antwort aktualisieren, um dies widerzuspiegeln?
Brian McCutchon
1
github.com/just-jeb/angular-builders/tree/master/packages/… - sehr einfache Anleitung dafür ... - funktioniert in Angular 9 Universal Ivy
Jonathan
153

Es gibt eine gute Möglichkeit, webpack.config.js aus angle -cli auszuwerfen . Renn einfach:

$ ng eject

Dadurch wird webpack.config.js im Stammordner Ihres Projekts generiert, und Sie können es nach Ihren Wünschen konfigurieren. Der Nachteil dabei ist, dass Build / Start-Skripte in Ihrer package.json durch die neuen Befehle ersetzt werden und stattdessen

$ ng serve

du müsstest so etwas tun

$ npm run build & npm run start

Diese Methode sollte in allen neueren Versionen von Angular-Cli funktionieren (ich persönlich habe einige ausprobiert, wobei die älteste 1.0.0-beta.21 und die neueste 1.0.0-beta.32.3 ist ).

Anton Nikiforov
quelle
1
Die einzige Frustration ist, dass nur die Konfiguration der Entwicklungsumgebung ausgeworfen wird. Es ist ein Argument , das man in den ng Auswurf hinzufügen kann die Produktion Config stattdessen zu verwenden , aber dies zur Zeit nicht funktioniert github.com/angular/angular-cli/issues/5433
jtsnr
@bebebe github.com/angular/angular-cli/issues/4907 Ich habe darum gebeten, sicher zu sein.
Kunepro
@bebebe siehe hier stackoverflow.com/questions/42984558/…
Anton Nikiforov
@AntonNikiforov Wie konfiguriere ich das Webpack nach dem Auswerfen? Ich finde, die Webpack-Konfigurationsdatei sieht so kompliziert aus. Der Grund, warum ich es auswerfe, ist, dass ich postcss in meinem Projekt verwenden möchte, aber cli es derzeit nicht unterstützt.
Ng2-Fun
Wie führe ich ng build -w aus? npm run build -w funktioniert nicht, das gleiche gilt für ng build --prod und ng build -d "etwas"
Victor Bredihin
49

Gemäß diesem Problem war es eine Entwurfsentscheidung, Benutzern nicht zu erlauben, die Webpack-Konfiguration zu ändern, um die Lernkurve zu verkürzen.

Angesichts der Anzahl nützlicher Konfigurationen in Webpack ist dies ein großer Nachteil.

Ich würde nicht empfehlen, angular-clifür Produktionsanwendungen zu verwenden, da es eine hohe Meinung hat.

Ignatius Andrew
quelle
8
Es wird nicht empfohlen, eine Blackbox einzugeben, bis Sie jeden Ablauf der Architektur verstanden haben. Es kann sehr kostspielig sein, wenn einige nicht unterstützt werden oder während einer Projektentwicklung nicht angepasst werden können.
Ignatius Andrew
11

Die Webpack-Konfiguration der CLI kann jetzt ausgeworfen werden. Überprüfen Sie die Antwort von Anton Nikiforov .


veraltet:

Sie können die Konfigurationsvorlage in hacken angular-cli/addon/ng2/models. Es gibt derzeit keine offizielle Möglichkeit, die Webpack-Konfiguration zu ändern.

Es gibt ein geschlossenes "Wont-Fix" -Problem bei Github: https://github.com/angular/angular-cli/issues/1656

j2L4e
quelle
1
endlich benutze ich dieses skelett, angular-cli ist nicht bereit für echte arbeit mit webpack, habe viele probleme. Ich empfehle
Folgendes
5
Ich bin traurig, das Problem ist geschlossen, da "nicht implementiert wird". :-(
Monnef
1
Es gibt auch npmjs.com/~ngtools, wo Sie das Webpack erhalten können, auf dem die CLI eigenständig ausgeführt wird. Siehe youtu.be/uBRK6cTr4Vk?t=7m57s
Mikeumus
-1

Nach dem Vorschlag von ng ejectIhnen können verwendenngx-build-plus

Es gibt mehrere Projekte, die in Verbindung mit dem neuen Konfigurationsformat verwendet werden können und die Vorteile des Auswerfens ohne Wartungsaufwand bieten. Ein solches Projekt ist ngx-build-plus, das hier zu finden ist: https://github.com/manfredsteyer/ngx-build-plus

Ravi Sevta
quelle