Angular: [RC5]: Minimierte Bündelbrüche

Gelöst : Das Problem ist die Reihenfolge der Komponenten im Feld declarations , aber es ist seltsam, dass es nur in gebündeltem Code passiert

Habe das gleiche Problem erlebt und bin mit der gleichen Lösung gestartet.

Ich bin momentan kein besonderer Fan dieses neuen Verhaltens :-) und ermutige das Team von Herzen, es im Change Log unter "Breaking Changes" zu dokumentieren.

+1

+1

@antonybudianto Welche Reihenfolge hast du geändert?

@robertoforlani Hoffentlich hat bald jemand Zeit, eine umfassende Erklärung zu schreiben. In der Zwischenzeit kann ich in ein paar Minuten Folgendes tun.

Um einen warnungsfreien und fehlerfreien "Produktions"-Build zu erhalten, müssen Sie die NgModule-App-Moduldefinition für Ihr Programm bearbeiten, insbesondere das Deklarations-Array. Dieses Array sollte eine Liste aller Komponenten und Direktiven in Ihrer Anwendung enthalten.

Nun zum schwierigeren Teil. Sie müssen eine "topologische Sortierung" dieser Liste durchführen, oder für diejenigen, die nicht formell oder kürzlich Informatik studiert haben, müssen Sie die Reihenfolge dieser Liste so ändern, dass die Komponenten in umgekehrter Reihenfolge der Verwendung mit den verwendeten Komponenten verwendet werden am "tiefsten" in Ihrer Komponentenhierarchie, zuerst aufgeführt.

Stellen Sie sich zum Beispiel vor, Sie hätten fünf Komponenten in Ihrem Programm, ABCD E. Wenn beispielsweise Komponente A Komponente B in ihrer Vorlage verwendet und Komponente B Komponente C in ihrer Vorlage verwendet usw., dann sind die Abhängigkeiten zwischen diesen Komponenten A ->B, B->C, C->D, D->E, E->F. In diesem Fall wäre die richtige Reihenfolge, um sie in den Deklarationen aufzulisten, declarations: [E, D, C, B, A] .

Glücklicherweise gibt es in den meisten Anwendungen keinen so tiefen Abhängigkeitsgraphen zwischen allen Komponenten. In vielen Fällen werden Sie diesen Fehler beseitigen, indem Sie einfach diese Deklarationsliste bearbeiten, um (1) alle Ihre Komponenten aufzulisten und (2) Ihre Direktiven und feinkörnigen kleinen Komponenten als Heuristik am Anfang aufzulisten.

Habe fast das gleiche Problem erlebt.

Ich habe 2 Direktiven (A und B) und 1 Komponente (C).
Wenn die Reihenfolge in Deklarationen [A, B, C] ist, erhalte ich den obigen Fehler für @Input in Direktive B.
Wenn die Reihenfolge in Deklarationen [B, A, C] ist, erhalte ich den obigen Fehler für @Input in Direktive A.
A und B teilen keine Abhängigkeiten.
C verwendet sowohl A als auch B.
Dies geschieht nur für gebündelte Builds.
Ich verwende die cli-Version 1.0.0-beta.10

Danke an alle - das scheint ein Bug zu sein. @IgorMinar ermittelt.

Es fällt mir schwer, das Problem zu reproduzieren. Kann jemand eine Repro zur Verfügung stellen?

Ich habe das Repo von $(npm bin)/gulp serve-build schlägt bei einem http 404 aus einem Test fehl. Sobald ich die

Zur Klarstellung: Die Reihenfolge der Deklarationen sollte keine Rolle spielen. Wenn das Ändern der Reihenfolge das Verhalten ändert, ist dies ein Fehler, den wir beheben werden.

Ich habe https://github.com/IgorMinar/declarations-bug-repro mit cli erstellt, aber selbst dieses Repo reproduziert das Problem nicht.

Könnte es jemand klonen und ändern, um das Problem zu reproduzieren? Danke

Ich habe eine Repro von @kylecordes bekommen :

https://github.com/OasisDigital/rc5-declaration-order

Siehe Kommentare in dieser Datei zur Reihenfolge der Deklarationen. https://github.com/OasisDigital/rc5-declaration-order/blob/master/src/app/app.module.ts

Ich habe es geschafft, meine Bewerbung zu reparieren.
Das Problem war, dass die beiden Komponenten moduleId nicht verwendeten: module.id in der @Component- Deklaration.
Sobald ich moduleId hinzugefügt habe: module.id prod build ist in Ordnung.

@IgorMinar , Entschuldigung, dass ich gestern einige Commits in den Branch
Es stellte sich heraus, dass meine AppComponent und NavbarComponent auf demselben Modul (AppModule) deklariert sind, dann verwendet app.html die Navbar-Komponente, wenn sie gebündelt wird, bricht sie. und ich habe versucht, Navbar selbst zu einem Modul zu machen, das AppModule importiert, und es wurde gelöst.

Wenn jemand eine beliebig große Anwendung generieren möchte, um Tools zu testen (und Probleme wie dieses aufzudecken), habe ich gerade meinen "angular2-stress-test" für rc.5 und NgModule aktualisiert:

https://www.npmjs.com/package/angular2-stress-test

npm install -g angular2-stress-test
cd directory-with-your-components-in-it
angular2-stress-test 500

Ich hatte ein ähnliches Problem in der gebündelten Version für https://sirajc.github.io/angular2-labs/
Ich musste NavbarComponent zum Bootstrap-Array hinzufügen
bootstrap: [ AppComponent, NavbarComponent ] während der Bereitstellung, während ich lokal während der Entwicklung nur
bootstrap: [ AppComponent]
Ich bin vor einigen Tagen auf dieses Problem gestoßen, als ich am Master-Zweig gearbeitet habe. Ich dachte, dies sei das beabsichtigte Verhalten

Dieses Problem habe ich auch. Das Ändern der Deklarationsreihenfolge hat es für mich nicht behoben.

@oocx versuche moduleId:module.id in jede Komponente

Behoben - Ich hatte diesen Fehler in meinen Komponententests, also musste ich die Deklarationen in meinem TestBed.configureTestingModule-Aufruf anstelle meines App-Moduls korrigieren.

Das gleiche Problem hier, gelöst mit der Option mangle auf false gesetzt.

Das gleiche Problem hier, der Fix von @gnujeremie hat es für mich gelöst!

return builder.buildStatic('build/src/js/main.js', 'build/app.js', {minify: true, mangle: false});

Das gleiche Problem tritt auch auf, wenn Angular 2 mit JavaScript ES5 verwendet wird (auch mit der normalen Version, nicht gebündelt).

Ich aktualisiere das Repro-Repository:

https://github.com/OasisDigital/rc5-declaration-order

auf das neueste CLI webpack.2, um zu überprüfen, ob das Problem immer noch auftritt ... da mir nicht klar ist, ob dies wirklich ein Kernproblem ist oder irgendwie ein von Webpack oder CLI hinzugefügtes Problem. Ja, Problem tritt weiterhin auf.

Ich habe genau das gleiche Problem seit dem Update auf Angular2 RC.5. In RC4 hat alles sehr gut funktioniert. Nicht hässliches Bündel funktioniert gut. Auch hässliches Bündel, aber ohne --mangle funktioniert gut, aber es wiegt etwas mehr als mit mangle

Es gibt zwei Workarounds, die auch hier erwähnt wurden:

1. Dinge in Deklarationen neu anordnen - was wirklich nicht immer funktioniert, weil einige Komponenten sich gegenseitig auf beide Arten verwenden könnten, in diesem Fall würde dieser Ansatz nicht helfen. Da dies jedoch in einigen Fällen hilft, würde ich vermuten, dass das uglified-Paket Definitionen in Deklarationen der Reihenfolge nach anordnet.
2. uglify ohne --mangle, was ein verkleinertes Paket erzeugt, aber etwas größer als es mit mangle wäre, wie ich es beobachtet habe.

Ich hoffe es wird gelöst. In RC.4 funktionierte in meinem Fall alles gut mit denselben Komponenten und derselben Version von uglifyJS.

Winkel 2.0.0-rc.5
Browser-alle
Typoskript: 1.8.10
uglifyJS: 2.4.10

Auch ich erlebe dieses Problem. Meine vorübergehende Lösung bestand darin, die Minimierung zu deaktivieren. Warten auf rc.6.

Hinweis: Ich habe moduleId: module.id hinzugefügt und es hat alles noch schlimmer gemacht.
Das minimierte Javascript lädt nichts außer einem nutzlosen Fehler ' home.js:260 Uncaught TypeError: e.match is not a function '

Möchten Sie versuchen, die moduleId wieder hinzuzufügen, aber NgModule zu verwenden?

Versuchen Sie dann, mit der Reihenfolge der Deklarationen zu spielen?

Gibt es eine tatsächliche Lösung oder versuchen Sie es einfach weiter, bis es für mich funktioniert?

Aktualisieren:

"LÖSUNG": Die Lösung für mich bestand darin, moduleId: module.id zu entfernen und die Reihenfolge der Komponenten in den Deklarationen mit NgModule neu zu ordnen.

Um herauszufinden, warum es mit moduleId: module.id nicht funktioniert?

Aktualisierung II:
Ja, meine Zeit ist um für diesen Tag...webpack -p mag moduleId überhaupt nicht! :( Außerdem sieht es so aus, als hätte es das nie getan? bleh

Habe einen reproduzierbaren Punkr http://plnkr.co/edit/xrFVK1K0OHkKXj1ERYgj?p=preview

Code

import {NgModule, Component, Input} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

var ComponentA = function() {
    @Component({
        selector: 'component-a',
        template: `component-a <component-b [property]="1"></component-b>`
    })
    class Foo {} // <- this class is named Foo
    return Foo;
}();

var ComponentB = function() {
    @Component({
        selector: 'component-b',
        template: 'component-b property: {{ property }}'
    })
    class Foo { // <- And this class is named Foo, rename it to Foo2 and it works
        @Input() property: string;
    }
    return Foo;
}();

@NgModule({
    imports: [
        BrowserModule,
    ],
    declarations: [
        ComponentA,
        ComponentB,
    ],
    bootstrap: [
        ComponentA,
    ],
})
export class TestModule {}

Fehler:

Das Umbenennen eines der class Foo in etwas anderes behebt den Fehler.
Ich schätze, etwas entlang der Pipeline-Caches von .name . Und Klassennamen können kollidieren, wenn sie verstümmelt werden.

Hier gilt das gleiche. Ich verwende Webpack (https://github.com/AngularClass/angular2-webpack-starter) und die hier vorgeschlagenen Lösungen erscheinen auf den ersten Blick sehr übertrieben. Egal wie ich meine Erklärungen bestelle, ich erhalte am Ende den gleichen Fehler. Auch wenn ich diese Vorschläge nicht als hackig bezeichnen würde, scheinen sie in einer geschäftskritischen Anwendung alles andere als brauchbar zu sein.

Unabhängig davon, bei allem Respekt vor dem Angular2-Team, ist es mir schleierhaft, wie das in RC5 hätte kommen können. Außerdem scheint die Einführung von NgModulen zu diesem Zeitpunkt IMHO ein sehr umstrittener Schritt zu sein.

@thecritic die Verwendung eines RCx für eine geschäftskritische Anwendung ist grenzwertig... Aber das geht mich nichts an... ;)

@ediri @thecritic Ich stimme @ediri zu , das ist nicht die Art von Änderungen, die in einem RC erscheinen sollen.

Hier gilt das gleiche. Verwenden von systemjs und systemjsBuilder.
Vorübergehende Lösung: Ich habe gulp-uglify verwendet, um meine Dateien am Ende des Build-Prozesses zu bündeln. Dieses Rohr entfernt und es funktioniert.
Die Verwendung von SystemJs ohne systemjsBuilder (für dev: direkt dem Ordner node_modules zugeordnet) war kein Problem.

Für mich sieht es also eher nach einem Bündelungs- / Minimierungs- / Hässlichkeitsproblem aus als nach einer impliziten Bestellung ... aber wir werden sehen

Viele sagen, dass "die Bestellung von Deklarationen in der richtigen Reihenfolge das Problem löst".
Aber was ist mit Modulen?? Schau dir das einfach an:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';

/** FOO MODULE **/

@Component({ selector: 'foo', template: 'I am foo!' })
export class FooComponent { }

@NgModule({ declarations: [FooComponent], exports: [FooComponent] })
export class FooModule { }

/** BAR MODULE **/

@Component({ selector: 'bar', template: 'I am bar!' })
export class BarComponent { }

@NgModule({ declarations: [BarComponent], exports: [BarComponent] })
export class BarModule { }

/** ROOT MODULE **/

@Component({ selector: 'app-root', template: '<foo></foo> <bar></bar>' })
export class AppComponent { }

@NgModule({
  imports: [
    BrowserModule,
    FooModule, // <--- Switching these
    BarModule, // <--- Switching these
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule { }

Im gegebenen Beispiel wird nur I am foo! gedruckt.
Wenn ich FooModule mit BarModule in imports ändere, dann wird nur I am bar! angezeigt.
Was zum .....? Wie soll ich bestellen, um beide zu drucken? :Schluchzen:

Übrigens verwende ich angular-cli .

Die in #1644 vorgeschlagene Lösung hat für mich funktioniert:

...
mangle: { screw_ie8 : true, keep_fnames: true }, //prod

@ediri Die Verwendung eines RC in der Produktion ist schlecht, keine Frage (wir machen das übrigens nicht). Der Punkt, den ich ansprechen wollte, ist, dass die meisten Leute zu diesem Zeitpunkt eigentlich nicht mit so bedeutenden Änderungen rechnen und die Migration zu den neuen Modulen offensichtlich unvermeidlich war. Es warf für uns im Grunde alles auseinander (die App ist zu diesem Zeitpunkt ziemlich groß), Refactoring braucht Zeit und manchmal - wie in diesem Fall - scheint Refactoring fast unmöglich.

Stellen Sie sich all dies vor, aber fügen Sie in der Mitte ngUpgrade :P

Wir mögen Rock'n'Roll! :)

Der (vorläufige) Fix von @hansl funktioniert übrigens, ich bin begeistert!

[Bearbeiten] Eigentlich bin ich mir nicht ganz sicher, ob das funktioniert...

Ich habe vollen Erfolg mit dem Ansatz von @sirajc , alle Ihre Deklarationen auch in den Bootstrap-Abschnitt aufzunehmen, solange die Komponente, die Sie tatsächlich

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent, HomeComponent, FooterComponent],
    bootstrap: [AppComponent, HomeComponent, FooterComponent]
})

Ich hatte etwas Erfolg beim Spielen mit der Reihenfolge der Komponenten im Deklarationsabschnitt (das Rendern der übergeordneten Komponente), aber in meinem Fall hatte ich zwei gleichrangige untergeordnete Komponenten in einer übergeordneten Komponente und beim Neuordnen habe ich nur eine untergeordnete Komponente oder die andere Darstellung erhalten .

Hinweis: Dieses Problem tritt nur beim Verkleinern und/oder Verstümmeln/Verhässeln auf.

Dank @hansl sind wir dem gegangen .

Die Codegenerierung verwendet an mehreren Stellen Function#name, was bei der Ahead-of-Time-Kompilierung (AOT) kein Problem darstellt, aber wenn wir uns im JIT-Modus befinden und die Eingabe minimierter Code ist, treten Namenskollisionen auf.

Das Neuordnen von Deklarationen kann das Problem verschwinden lassen, aber es können immer noch versteckte Überraschungen bei diesem Ansatz auftreten, da er das Problem nicht wirklich löst.

Die einzige sichere Lösung besteht derzeit darin, uglify mit mangle: { screw_ie8 : true, keep_fnames: true} zu konfigurieren oder die AOT-Vorlagenkompilierung zu verwenden.

Wir suchen nach einer tatsächlichen Lösung für JIT.

https://github.com/angular/angular-cli/pull/1662

Binden relevanter Winkel-Cli-Workarounds für das Tracking.

Update: JIT-Fix erfordert größere Änderungen im Kern, da es nicht wirklich ein Problem mit dem Kerncode/Design ist, sondern mit der Übertragung der Klassen auf Funktionen in verschiedenen Tools. Wir werden erwägen, einen Workaround im Kern zu implementieren, sobald weitere dringende Probleme gelöst sind. In der Zwischenzeit verwenden Sie bitte die Option keep_fnames in uglify oder verwenden Sie die AOT-Kompilierung von Angular mit ngc.

@IgorMinar Wird es derzeit nicht ein Problem geben, das bei der Verwendung von ngUpgrade auf die AOT-Kompilierung angewiesen ist?
ngUpgrade verwendet den aot-Code nicht, selbst wenn er existiert.

Abgesehen von diesem Problem mit ngUpgrade vermute ich, dass dies in naher Zukunft meistens ein "egal" sein wird. Sobald CLI NGC verwendet, wird das "die Messlatte höher legen". Sobald eine beliebige Person außerhalb des Internets ein neues Projekt in ein paar Minuten mit CLI starten und die Vorlagen-Vorkompilierung laufen lassen kann, wird niemand Angular ernsthaft verwenden, bis zu dem Punkt, an dem er sich für den Produktionsmodus interessiert, kann rechtfertigen, NGC nicht zu verwenden . Andere Werkzeuge müssen sehr schnell aufholen oder aufgegeben werden.

Bitte verzeihen Sie ngUpgrade-Benutzern nicht, das Angular-Team fördert ngUpgrade als eine Möglichkeit, offiziell auf das Angular 2-Boot zu springen, ohne eine vollständige Neufassung vorzunehmen. Und ich verstehe auch, in der Produktion verwendet zu werden.

Es gibt derzeit nicht genug funktionsfertige UI-Projekte (Material Design, ng2-bootstrap, ui-bootstrap), um Angular 2 vollständig zu nutzen. Es ist die letzte Voraussetzung, um mich vollständig in Richtung Angular 2 zu bewegen. In der Zwischenzeit muss ich mich mit ngUpgrade befassen.

Es wäre fantastisch, wenn wir NGC mit ngUpgrade verwenden könnten.

Wenn Sie sich zum Beispiel dafür entscheiden, ngUpgrade als Schritt zur Migrationsunterstützung zu verwenden, es jedoch nicht in der Produktion zu verwenden, teilen Sie uns dies bitte jetzt mit.

Danke vielmals.

Ich stehe vor dem gleichen Problem und wurde auf dieses Problem verwiesen. Aber ich befinde mich in Beta 8. Ist dieses Problem in Beta 8 noch vorhanden?

@Ibrahim-Islam Sie befinden sich in einer der Betas, die von einem Minimierungsproblem betroffen sind, das etwa 10 Betas dauerte (beta.1 bis ~beta.15 oder so). Es hat jedoch nichts mit diesem Problem zu tun.

+1
Die Verwendung eines Webpack-Builds (nicht CLI) als @IgorMinar schlug vor, das Erstellen ohne Minimierung von Arbeiten ... genau wie die Beta-Releases vor einigen Monaten ... Ich bin froh, dass ich unsere App letzten Freitag bei der Arbeit nicht aktualisiert habe .....

Wo schreibst du mangle: { screw_ie8 : true, keep_fnames: true} ? Ich habe Probleme herauszufinden, wie ich uglify neu konfigurieren kann, wenn ich angle-cli verwende.

Diesen Masterwechsel haben wir bereits für die CLI zusammengeführt.

@TheLarkInn Ich denke, @ofuangka hat gefragt: Wo sollte das _heute_ abgelegt werden, damit es funktioniert, anstatt zu einem unbekannten zukünftigen Datum, wenn eine neue CLI-Version ausgeliefert wird?

(Die beste Antwort ist wahrscheinlich: nirgendwo - verwenden Sie stattdessen "npm link", um mit der aktuellen Master-CLI anstelle der veröffentlichten Version zu laufen.)

@kylecordes Danke! Ich hatte den Eindruck, dass die Lösung über die Projektkonfiguration angewendet werden kann. Die Verwendung des npm-Links hat bei mir funktioniert.

Was meinst du mit "NGC" @kylecordes ?

"ngc" ist der Befehlszeilen-Precompiler für Angular 2-Vorlagen. Es befindet sich im Paket "npm i @angular/compiler-cli".

@kylecordes danke

@ofuangka setze nur mangle:false ist in Ordnung

Fwiw, es funktioniert perfekt in Webpack2 mit den Mangle-Optionen wie in diesem Thread beschrieben.

Als Lösung für dieses Problem wurde vorgeschlagen, mangle=false wie folgt zu setzen:

return builder.buildStatic('build/src/js/main.js', 'build/app.js', {minify: true, mangle: false});

Ich sehe nicht, wo oder wie ich diese Änderung vornehmen kann. Kann jemand raten?

@nukuuk Ich habe ein Beispiel mit dem systemjs-Builder. Ich habe nicht bestätigt, dass dies das Problem behebt, aber Sie können es hier versuchen: https://github.com/thelgevold/angular-2-samples/blob/master/gulpfile.js

Es funktioniert, alle Eigenschaften auf false zu setzen, aber ich habe minify = true und mangle = false nicht ausprobiert

@thelgevold Ich sehe, Sie beziehen sich auf die Verwendung des systemjs-Builders mit gulp, um Bündeln / Minimieren usw. Ich musste mangle = false setzen, damit die Builds funktionieren. Aber was ist der Sinn von angle-cli mit RC5, wenn wir zum Bündeln auf den gulp/systemjs-Builder zurückgreifen müssen?

@nukuuk kannst du genau beschreiben was du gemacht hast? wo genau hast du mangle = false ? Ich verwende Winkelclient 1.0.0-beta.10

@cdarken Derzeit verwende ich ng build -prod beschädigt, da (vermutlich)
a) die cli verstümmelt das Javascript-Bundle und angle oder webpack mag das nicht, und/oder
b) es gibt ein Problem mit der Reihenfolge der Komponenten in der Hauptmoduldeklaration.

Es gibt noch keinen Bugfix dafür, hoffentlich wird es bald passieren.

In der Zwischenzeit beinhaltet meine Problemumgehung das Ausführen von ng build, das die App bündelt, aber die Javascript-Bundles nicht verkleinert / zerstückelt. Dann verwende ich gulp-uglify mit {mangle: false}, um zu einem endgültigen Produktionspaket zu verketten und zu minimieren. Es klappt. Aber es wäre mir viel lieber, wenn der eckige Cli die Arbeit erledigt hätte.

Hmm, ich habe versucht, meine kleineren Komponenten etc. als erste Elemente in meinen Deklarationen nachzubestellen, keine Zigarre es fängt jetzt an, sich über kantige Materialkomponenten zu beschweren, die in einem separaten Modul sind.

Ich habe mein Uglify-Plugin vorerst deaktiviert, ich verwende einen Build, der auf dem Angularclass-Webpack-Starter basiert, falls es jemanden interessiert.

@msegers im

mangle: { screw_ie8 : true, **keep_fnames: true ** }, //prod

@ofuangka Dieser Code ist eine Einstellung für das UglifyJsPlugin in Ihrer Produktionsdatei webpack.config.js. Es sollte in Ihrem Plugin-Array platziert werden.

plugins: [ new UglifyJsPlugin({ mangle: { screw_ie8 : true, keep_fnames: true } }) ]

:+1:

@mikeeus Lösung hat bei mir https://github.com/mishoo/UglifyJS2 wechseln (ich habe die erste Version verwendet).

Vielen Dank!

@mikeeus Ich habe die gleiche Verwirrung wie @nukuuk, wo die "mangle" -Einstellung platziert werden soll - weil es keine "webpack.config.js" -Datei gibt (ich habe ein frisches "ng new" mit angle-cli 1.0.0-beta gemacht .11-webpack.2 - RC5).

Wo erstelle ich also die Datei webpack.config.js und muss ich angle-cli.json ändern, um sie zu verwenden?

Im Anhang ist ein Screenshot der Dateien, die ich mit den Standardeinstellungen angle-cli.json habe.

Leute korrigiert mich, wenn ich falsch liege, aber ich denke, dass Sie die Mangle-Option verwenden, wenn Sie das Projekt hässlich machen.

@ricklove , ich denke, dass Sie mangle nicht verwenden müssen, wenn Ihr Projekt nicht minifeed / hässlich wird

Lösung zum Beheben von "ng serve --prod" mit "angular-cli 1.0.0-beta.11-webpack.2 - RC5"

Ok, ich habe endlich einen Weg gefunden, indem ich die Datei direkt im Ordner node_modules geändert habe, aber ich stelle mir vor, dass es in meinem Projekt einen besseren Ort dafür gibt. Danke @mikeeus für die Einstellung.

@herlon214 - Es funktioniert gut mit dem normalen Build, ich versuche, einen --prod-Build zu erstellen, bei dem ich ein Problem habe.

@rickove Im Moment verwende ich nicht

Zur Zeit verwende ich angle-cli NUR im Entwicklungsmodus (und das hat auch Probleme, da Webpack keine guten Quellkarten zu produzieren scheint, was beim Setzen von Breakpoints verheerende Auswirkungen hat). Für den Fall, dass ich einen Produktions-Build benötige, bin ich
1) dann einen Entwicklungs-Build (ng Build) machen
2) Verkleinern und Verketten der Ergebnisse mit gulp-uglify, wobei die mangle-Option auf false gesetzt ist
return gulp.src(files) .pipe(concat("main.bundle.min.js")) .pipe(uglify({ mangle: false })) .pipe(gulp.dest("./some/location/js"));

Freue mich auf den nächsten Build, bei dem dies behoben ist.

UPDATE: Ich habe nicht gesehen , @ricklove ‚s Lösung , um die webpack Config über die Bearbeitung , wenn dieses Posting. Sein Workaround funktioniert, ignorieren Sie dies.

@nukuuk , siehe meinen letzten Beitrag, es scheint für mich für den Prod-Build zu funktionieren, zumindest reduziert es die Dateigröße stark

Gibt es keine Lösung, um "keep_fnames" deaktiviert zu halten? :( es hat meine Build-Datei um fast 400 kb vergrößert

Das ng-Team arbeitet daran, dies zu beheben. Dies ist eine Problemumgehung, damit Ihre Builds weiterhin funktionieren.

@herlon214 Dies ist höchstwahrscheinlich in erster Linie eine vorübergehende Problemumgehung. Ich hatte zu Beginn des Threads den Eindruck, dass es eine tiefere Lösung gibt, die es nicht mehr nötig macht. Außerdem ist es anscheinend schon nicht notwendig, wenn Sie den Template-Precompiler verwenden... aber das ist im Moment ziemlich knifflig, es gibt noch sehr wenig an funktionierenden Beispielen, Unterstützung durch CLI ist auf dem Weg, aber nicht hier , etc.

Im Moment ist es also naheliegend, einfach mit den Händen zu winken und so zu tun, als wären die zusätzlichen 400 KB nicht da, weil sie vorübergehend sind. :-)

@ricklove du bist ein Genie! Es funktioniert, meine Produktions-Builds sind jetzt schlank und getrimmt. Vielen Dank!

Danke für die Erklärung @TheLarkInn , @kylecordes :smile:

@nukuuk Wenn 1

Leute, hatte jemand von euch ein Problem mit gzip? Ich habe ein bisschen Angst, gzip zu verwenden und
Einige meiner Kunden verwenden einen Browser, der nicht akzeptiert

2016-08-19 12:25 GMT-04:00 Rick Love [email protected] :

@nukuuk https://github.com/nukuuk Wenn 1MB als schlank und schlank gilt :) To
Seien Sie fair mit gzip, es reduziert meine auf etwa 250kb, was eigentlich nicht der Fall ist
schlecht für ein SPA. Es übertrifft auf jeden Fall 3 MB und damit kann ich leben
Ergebnisse vorerst.

—
Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie direkt auf diese E-Mail und zeigen Sie sie auf GitHub an
https://github.com/angular/angular/issues/10618#issuecomment -241064821,
oder den Thread stumm schalten
https://github.com/notifications/unsubscribe-auth/ADQtMWZkEuTQR3dzArWU2oMOKVASRu7Yks5qhdjegaJpZM4JgpvN
.

_Att, Herlon Aguiar_

Hey Leute.

    builder: {
        normalize: true,
        minify: true,
       // mangle: true, 
        mangle:false,
        runtime: false,
        globalDefs: { DEBUG: false, ENV: 'production' }
    }
};

Ich sehe dies auch mit Webpack und dem Plugin 'new webpack.optimize.UglifyJsPlugin()'. Wie @antonybudianto vorgeschlagen hat, ist die topologische Anordnung meiner Moduldeklarationen

Aufgeregt zu sehen, dass dieses Problem behoben ist!

Ich habe versucht, die Deklarationen neu anzuordnen, aber das hat bei mir nicht funktioniert. Das Hinzufügen von moduleId: module.id in den meisten meiner Komponenten funktioniert jedoch wie von Zauberhand. ein dickes Lob an Sie, Herr.

Freue mich auf die Korrektur.

Wie kann so etwas kaputt gehen und trotzdem in RC5 veröffentlicht werden?

Bündelung und Minimierung sind keine neuen Dinge, sie sind ein wesentlicher und grundlegender Bestandteil des JavaScript-Ökosystems. Bei der Bündelung und Verkleinerung in Angular 2 gab es schon viele Probleme - entschuldigender, als es Alpha oder Beta war und vielleicht das erste Mal, dass es passierte.

Das Test- und Freigabesystem sollte doch einige Tests beinhalten, die eine gewisse Bündelung und Minimierung beinhalten?

Um @CaptainCodeman zu besorgniserregend , dass dieser Fehler es bis hierher geschafft hat. Ich verstehe natürlich, dass Rückschritte unvermeidlich sind, insbesondere wenn man an massiven Projekten arbeitet, von denen erwartet wird, dass sie mit einer Vielzahl unbekannter Plugins und Addons aus der Open-Source-Welt funktionieren. Ein großes Lob an das Angular-Team rundum.

Aber davon abgesehen, wird es irgendwelche _offiziell_ unterstützten Compiler, Bundler und Minifier (usw.) wie SystemJS und Webpack geben, auf die sich eine große Suite von Tests und Entwicklungsarbeiten konzentrieren wird? Wäre jemand im Angular-Team in der Lage, seiner Dokumentation eine Liste mit stark unterstützten, kompatiblen Tools hinzuzufügen? Die Idee ist, dass, wenn ein Tool in den Dokumenten aufgeführt ist, es funktioniert, andernfalls auf eigenes Risiko (wie Open Source).

Vielen Dank,
Adam

Hallo Leute,

Nur um hier eine kleine Anmerkung hinzuzufügen, ich habe die mangle-Option und das gesamte UglifyJsPlugin() deaktiviert. Aber es bricht immer noch die Router.

Wenn ich beispielsweise zu localhost:3000/company navigieren möchte und eine Standardumleitung wie {path: '', redirectTo: '/company', pathMatch:'full'} dann funktioniert dies, aber wenn ich versuche, direkt zu localhost:3000/company- URL zu navigieren, dann eine komplett leere Seite sehen ( "Get /company" Error (404): "Not found" ). Es kann auch keine andere Route geladen werden (die untergeordneten Routen von /company funktionieren, aber Routen auf derselben Ebene). Ich werde es mit der AOT-Lösung versuchen und später meinen Kommentar hier posten.

@ShankarSumanth Ich denke, Sie benötigen möglicherweise die HashLocationStrategy im Anbieter Ihres Moduls

Ich habe die Vorschläge im Thread ausprobiert. immer noch bekommen:

`Kann nicht an 'icon' gebunden werden, da es keine bekannte Eigenschaft von 'button' ist. ("ver':hovered,'ui-state-focus':focused,'ui-state-disabled':disabled}"

][icon]="icon" pButton *ngIf="showIcon" (click)="onButtonClick($event,in)"[ngClass]="): Kalender @7 :31; Zone:; Wert: BaseException {message: "Template Parserfehler:↵Can't bind to 'icon' since …in)" ↵ [ngClass]="): Calendar @7 :31", stack: "Fehler: Templateparsefehler:↵ Kann nicht an 'icon' binden…odules/zone.js/dist/zone.js?1472035648186:365:38)"} Fehler: Vorlagenanalysefehler:Kann nicht an 'icon' gebunden werden, da es keine bekannte Eigenschaft von 'button' ist.
][icon]="icon" pButton *ngIf="showIcon" (click)="onButtonClick($event,in)"[ngClass]="): Kalender@7 :31
bei neuer BaseException (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:5116:27)
bei TemplateParser.parse (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:8318:23)
bei RuntimeCompiler._compileTemplate (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:15941:55)
bei eval (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:15869:87)
bei Set.forEach (nativ)
beim Kompilieren (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:15869:51)
bei ZoneDelegate.invoke (http://localhost:5555/node_modules/zone.js/dist/zone.js?1472035648186:332:29)
bei Zone.run (http://localhost:5555/node_modules/zone.js/dist/zone.js?1472035648186:225:44)
unter http://localhost :5555/node_modules/zone.js/dist/zone.js?1472035648186:591:58
at ZoneDelegate.invokeTask (http://localhost:5555/node_modules/zone.js/dist/zone.js?1472035648186:365:38)consoleError @ zone.js?1472035648186:484_loop_1 @ zone.js?1472035648186:511drain @ zone .TaskQueue .js?1472035648186:515ZoneTask.invoke @ zone.js?1472035648186:437`

@ahuvafischer Ich hatte das gleiche Problem, und die einzige Lösung, die für mich funktionierte, war, dass ich alle Komponenten in @NgModule in app.module auflisten musste. Immer wenn ich weitere Module B und C hinzufüge und dann B und C in mein app.module importiere, bricht es ab.

@bahodirk wie wäre es mit Modulen von Drittanbietern?

@ahuvafischer Ich
<script src="../node_modules/moment/min/moment-with-locales.min.js"></script>

Bei ES5 werden bei Deklarationen in der "falschen" Reihenfolge einige Komponenten einfach nicht fehlerfrei angezeigt. Plunk: plnkr.co/edit/7qi6Um1UzTXBDrV5q1Js

Wenn dies für 2.0.0 nicht behoben ist, wäre es besser zu sagen, dass Angular 2 ES5 nicht unterstützt, Punkt.

Ich glaube nicht, dass ich das Bundle verkleinere, aber ich habe gerade ein kleines Projekt auf RC5 aktualisiert und erhalte die gleichen Fehler. Ich habe node_modules/@angular/compiler/src/url_resolver.js so aktualisiert und es behebt den sofortigen Fehler für mich.

 function _split(uri) {
+    uri += '';
     return uri.match(_splitRe);
 }

Der Fehler war, dass an einer Stelle uri == 114 und kein String war. Als ich den obigen Code hinzugefügt habe, wurde es soweit behoben.

OK, jetzt, wo ich uglify mit mangle: {screw_ie8 : true, keep_fnames: true } setze, bin ich mir nicht sicher, ob ich node_modules/@angular/compiler/src/url_resolver.js mehr patchen muss.

AKTUALISIEREN:

Nein, ich brauche es immer noch, weil das, was als moduleId übergeben wird, immer noch eine ganze Zahl 114 und kein String ist.
var scheme = url_resolver_1.getUrlScheme(moduleId);

Das Problem mit der Verkleinerung von Function#name wurde von 51877ef4ed5016bd0c57f35e7bbb1ee26511ab5d behoben. Sobald rc.6 veröffentlicht ist, sollte es nicht mehr erforderlich sein, Uglify anzuweisen, Funktionsnamen nicht zu zerlegen.

Ich habe immer noch das gleiche Problem mit angle-2.rc6 mit webpack2,
wenn ich mangle benutzt habe: false; in meiner Webpack-Konfiguration
der Fehler hat sich geändert von
t.match is not a function
zu
uri.match is not a function
Ich habe ein Problem in angle2-webpack-starter geöffnet
https://github.com/AngularClass/angular2-webpack-starter/issues/958

@eslammostafa Das ist kein Minify-Problem, das hängt damit zusammen: https://github.com/angular/angular/issues/10626. Grundsätzlich können Sie entweder alle module.id-Referenzen aus den Core- oder Drittanbieterbibliotheken entfernen oder einen String-Replace-Loader-Preloader in Webpack verwenden, der es entfernt, oder das NamedModulesPlugin verwenden, wenn Sie die neueste Version von Webpack 2 oder manuell verwenden Setzen Sie .toString() in den Teil, der den Fehler im Ordner node_modules verursacht.

@ricklove Danke für den Vorschlag, das hat bei mir perfekt

Für andere:

nano node_modules/angular-cli/addon/ng2/models/webpack-build-production.ts 

Bearbeiten von mangle: { screw_ie8 : true }, //prod zu mangle: { screw_ie8 : true, keep_fnames:true }, //prod

ng build -prod

Genießen!

@ricklove Ich habe auf die neuesten Versionen Angular 2.0.0 und Angular CLI 1.0.0-beta.14 aktualisiert, aber der Ansatz zum Bearbeiten von Mangel funktioniert nicht.

Die Datei webpack-build-production.ts befindet sich an einem anderen Speicherort. Es scheint jetzt drin zu sein;

node_modules/angular-cli/models/webpack-build-production.js

Wenn ich diese Datei bearbeite und sie so ändere, dass sie keep_ fnames:true enthält,

`Kann nicht an 'customerNumber' gebunden werden, da es keine bekannte Eigenschaft von 'channel-detail-panel' ist.

1. Wenn 'channel-detail-panel' eine Angular-Komponente ist und sie die Eingabe 'customerNumber' hat, überprüfen Sie, ob sie Teil dieses Moduls ist.
2. Wenn 'channel-detail-panel' eine Webkomponente ist, fügen Sie "CUSTOM_ELEMENTS_SCHEMA" zum '@NgModule.schema' dieser Komponente hinzu, um diese Meldung zu unterdrücken.
   ("nnel-detail-panel *ngFor="let channel of channelList.results"
   [FEHLER ->][Kundennummer]="Kundennummer"
   [channelModel]="channel">
   "): ChannelManagementComponent@10 :38`

Ich habe die beiden main.xxxx.bundle.js-Dateien mit und ohne diese Problemumgehung verglichen und sie sind unterschiedlich. Die mit der Problemumgehung ist etwa 1,47 MB ​​groß und die andere ohne die Änderung etwa 1,32 MB.

Ich sehe, dass dieses Problem geschlossen und in Version 2.0.1 von Angular "eingeschlossen" wurde, aber ich kann nicht sagen, was tatsächlich geändert wurde.

Ich habe auch eine Reihe verschiedener Kombinationen mit der Deklarationsreihenfolge ausprobiert, aber ich bekomme das Problem immer noch.

Welche Versionen von Angular und Angular CLI verwenden die Leute, in denen der Edit-Mangle-Ansatz funktioniert?

Jede Hilfe wäre sehr dankbar :-)

[Update] - Ich habe gerade einen Kommentar von @IgorMinar über 51877ef gesehen, der dieses Problem in rc.6 behebt, aber ich verwende Version 2.0.0 und es scheint immer noch ein Problem zu sein.

[GELÖST] - Ack, meine Schuld. Ich glaube, mein eigentliches Problem war, dass meine Selektordeklaration in der Unterkomponente "channel-detail-panel" nicht richtig war, sondern auf "app-channel-detail-panel" gesetzt war, obwohl es nur "channel-detail-panel" hätte sein sollen. panel" - also war der Fehler richtig, aber die Dinge nicht sehr gut erklärt.

Ich denke, dieses Problem funktioniert jetzt in Angular 2.0.0 + Angular CLI 1.0.0-beta.14 ohne die Umgehungslösung für die Bearbeitung von Mangle richtig. Stellen Sie einfach sicher, dass Ihre Selektor-Deklarationen korrekt sind.

Sehe das gleiche Problem. Ich verwende das Webpack-Intro, das sich auf der angle.io befindet. Es funktioniert gut, wenn es im Dev-Modus gebaut wird, aber wenn es im Prod-Modus gebaut wird, scheint der Uglify-Prozess es zu unterbrechen. Ich habe versucht, die Reihenfolge der Deklarationen in meinem App-Modul wie oben vorgeschlagen zu ändern, und jetzt sehe ich Fehler im Zusammenhang mit den erstellten Angular-Komponenten (siehe unten), sodass die Reihenfolge der Deklarationen dies nicht behebt.

Ich bin verblüfft über diese Art von Fehlern und hoffe, dass das Angular-Team sich dieser Art von Änderungen bewusst ist, da man mit solchen Fehlern leicht mehrere Stunden verschwenden kann. Alle Vorschläge werden geschätzt. Vielen Dank!

Kann nicht an 'routerlink' gebunden werden, da es keine bekannte Eigenschaft von 'a' ist. ("ab of item.Tabs" style="background-color:#d3d3d3;border:1px solid #fff;padding:5px 5px 5px 5px"> ][routerlink]=tab.Link *ngif="tab.IsRoute== =true">{{tab.Text}} AppNav@0 :193
Kann nicht an 'ngif' gebunden werden, da es keine bekannte Eigenschaft von 'a' ist.

@mchamo Ist Ihr *ngIf nicht falsch geschrieben? Es ist nicht *ngif - es ist *ngIf mit einem großen I.

Hallo @rperfect , wie ich in meinem obigen Beitrag beschrieben habe, funktioniert alles

@mchamo Sie haben wahrscheinlich htmlLoader, stellen Sie sicher, dass Sie es so einstellen:

      {
        test: /\.html$/,
        loader: 'html',
        options: {
          minimize: true,
          removeAttributeQuotes: false,
          caseSensitive: true, // <- this
          customAttrSurround: [
            [/#/, /(?:)/],
            [/\*/, /(?:)/],
            [/\[?\(?/, /(?:)/]
          ],
          customAttrAssign: [/\)?\]?=/]
        }
      },

@princemaple danke für den Vorschlag, immer noch die ursprüngliche Fehlermeldung (siehe unten) beim Ausführen nach dem

zone.js?fad3:355Unhandled Promise Reject: Fehler beim Parsen von Vorlagen:
Kann nicht an 'appname' gebunden werden, da es keine bekannte Eigenschaft von 'app-nav' ist.

1. Wenn 'app-nav' eine Angular-Komponente ist und sie die Eingabe 'appname' hat, überprüfen Sie, ob sie Teil dieses Moduls ist.
2. Wenn 'app-nav' eine Webkomponente ist, fügen Sie "CUSTOM_ELEMENTS_SCHEMA" zum '@NgModule.schema' dieser Komponente hinzu, um diese Meldung zu unterdrücken.

@mchamo das einzige was du brauchst ist:

new webpack.optimize.UglifyJsPlugin({
  mangle: {
    keep_fnames: true
  },
})

@Martin-Wegner Sie haben Recht, das ist alles, was benötigt wird, und es war in den Angular.io-Webpack-Einführungsdokumenten enthalten. Ich habe mein Problem gestern Abend gelöst.

Bei allen anderen bin ich auf dieses Problem gestoßen, weil ich auf die kompilierten / minimierten js-Dateien verwiesen habe, die Webpack in den dist-Ordner für Pollyfills, Vendor und App von meiner ursprünglichen index.html (außerhalb des dist-Ordners) ablegt. Ich tat dies, weil ich meine Site bereits in IIS, Routing und IIS URL Rewrite konfiguriert hatte, um meine ursprüngliche index.html zu verwenden. Dies funktionierte gut für den Dev-Webpack-Build, aber nicht für den Prod-Build.

Damit dies funktioniert, musste ich mich stattdessen auf die index.html verlassen, die das Webpack im Ordner dist erstellt. Daher musste ich meine IIS-Einstellungen, URL-Rewrite-Einstellungen und Routing aktualisieren, um die Datei dist/index.html zu verwenden. Sobald dies erledigt ist, funktioniert alles einwandfrei und es werden keine Fehler beim Webpack-Prod-Build ausgegeben.

Ich hatte das gleiche Problem im neuesten Angular2 v2.0.2 in DEV. Der Grund dafür war, dass meine Komponente nicht in app.module deklariert war, sondern die Abhängigkeiten von app.module verwenden wollte. Das Verschieben in das Modul der obersten Ebene hat das Problem behoben.

Ich verwende Angular 2 in einer Aspnet-Core-App in "webpack -p" als Befehl für prod builds ... was bedeutet, dass UglifyJsPlugin mit den Standardeinstellungen läuft und ich nicht den Luxus habe, Parameter wie keep_fnames: true zu übergeben.
Gibt es einen anderen Weg, dies zu umgehen?

@jrood Sie sollten diese Einstellung in Ihrer Konfigurationsdatei webpack.prod konfigurieren können.

@machmo leider, selbst wenn ich "new webpack.optimize.UglifyJsPlugin({ mangle: {keep_fnames: true}})" explizit zur Plugin-Liste hinzufüge, wird es von dem ohne Parameter überschrieben, die vom -p-Flag generiert wurden.

Es stellt sich heraus, dass mein Problem tatsächlich durch webpack.optimize.OccurrenceOrderPlugin verursacht wurde (webpack -h sagt, dass -p nur --optimize-minimize tut, aber die Online-Dokumentation bestätigt, dass es auch --optimize-occurrence-order tut);

Ich habe das gleiche Problem, obwohl ich den folgenden Code bereits in die webpack.config eingefügt habe, wie auf angle.io beschrieben

new webpack.optimize.UglifyJsPlugin({
  mangle: {
    keep_fnames: true
  },
})

Mein Projekt mit ASP.NET MVC 4 und Angular 2 wird für eine der vielen Single-Page-Apps verwendet, die wir derzeit haben.

Der Fehler, mit dem ich jetzt konfrontiert bin, tritt während des Uglify-Prozesses auf, das ngModel wird zu ngmodel (Kleinbuchstaben)

zone.js:388Unhandled Promise Reject: Fehler beim Parsen von Vorlagen:
Kann nicht an 'ngmodel' gebunden werden, da es keine bekannte Eigenschaft von 'input' ist. ("olumn-main-map>

@0 :313
Kann nicht an 'ngif' gebunden werden, da es keine bekannte Eigenschaft von 'div' ist. ("$event) /> Verkehr anzeigen

@trungk18 Ich denke, Sie müssen auch Ihren HTML-Loader konfigurieren. Versuche dies:

htmlLoader: {
        minimize: false // workaround for ng2
}

Diese Problemumgehung stammt aus der Webpack-Produktionskonfiguration in Angular-Dokumenten .

@tasos-ale nach htmlmin oder einem anderen Loader suchen. Scheint es Kleinbuchstaben-Attribute in HTML-Dateien

           {
                test: /\.html/,
                loader: 'html-loader',
                options: {
                    minimize: true,
                    removeAttributeQuotes: false,
                    caseSensitive: true,
                    customAttrSurround: [
                        [/#/, /(?:)/],
                        [/\*/, /(?:)/],
                        [/\[?\(?/, /(?:)/]
                    ],
                    customAttrAssign: [/\)?\]?=/]
                }
            }

Dies scheint für mich der Trick zu sein.

Scheint html-loader einige Optionen vorzuverarbeiten caseSensitive: true wird benötigte Option
https://github.com/webpack/html-loader/blob/master/index.js#L99

Dies liegt daran, dass ich keine Plugins verwende, die Benutzeroptionen verarbeiten, wenn keine, die ich selbst geschrieben habe.)

Dieses Problem scheint bei mir wieder da zu sein. Beachten Sie, dass ich auf Typescript 2.0.10 und Angular 2.4.0 aktualisiert habe. Der Web-Pack-Dev-Build funktioniert einwandfrei, aber der Web-Pack-Prod-Build führt zu dem Fehler. Auch hier scheint es mit der Groß-/Kleinschreibung zu tun zu haben. Wenn ich also eine Eigenschaft namens appName in meiner Komponente habe, sucht Angular nach dem prod-Build nach appname, der nicht existiert, und führt daher zu dem Fehler. Alle Vorschläge werden geschätzt.

Hier ist meine webpack.prod.js.

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');

const ENV = process.env.NODE_ENV = process.env.ENV = 'Produktion';

module.exports = webpackMerge(commonConfig, {
devtool: 'source-map',

output: {
    path: helpers.root('dist'),
    publicPath: '/Applications/MyApp/dist',
    filename: '[name].[hash].js',
    chunkFilename: '[id].[hash].chunk.js'
},

plugins: [
  new webpack.LoaderOptionsPlugin({
      htmlLoader: {
          minimize: false // workaround for ng2
      }
  }),

  new webpack.NoEmitOnErrorsPlugin(),
  new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
      mangle: {
          keep_fnames: true
          //,
          //minimize: true
      }
  }),
  new ExtractTextPlugin('[name].[hash].css'),
  new webpack.DefinePlugin({
      'process.env': {
          'ENV': JSON.stringify(ENV)
      }
  })      
]

});

@miladchamo welche wbepack-version verwendest du?

@Martin-Wegner Ich verwende das folgende für Webpack. Dies basiert auf den angle.io Webpack-Dokumenten

"webpack": "2.2.1",
"webpack-dev-server": "2.4.1",
"webpack-merge": "^3.0.0"

Ich hatte keine Probleme mit dieser Version...

Aber ich muss verwenden:

    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }),

    new webpack.LoaderOptionsPlugin({
      test: /\.html$/,
      options: {
        htmlLoader: {
          minimize: false // workaround for ng2
        }
      }
    }),

    new webpack.NoEmitOnErrorsPlugin(),

    new webpack.optimize.UglifyJsPlugin({
      // https://github.com/angular/angular/issues/10618
      mangle: {
        keep_fnames: true
      },
      sourceMap: true
    })

@Martin-Wegner das scheint nicht zu funktionieren. Gleicher Fehler wie zuvor erwähnt.

@miladchamo hast du ein kleines GitHub-Projekt, das das Problem zeigt?

@Martin-Wegner Ich habe das zum Laufen gebracht. Ich musste package.json aktualisieren, um sicherzustellen, dass ich aktualisierte Versionen für alle Dev-Abhängigkeiten hatte. Außerdem musste ich diese Abhängigkeit auf 2.5.41 ändern, damit der clientseitige Build funktioniert, wie in https://github.com/angular/angular.io/issues/3198 . erwähnt

• "@types/jasmine": "^2.5.35",
• "@types/jasmine": "2.5.41",

Danke für deine Hilfe auf dem Weg. Trotzdem bin ich immer noch besorgt darüber, wie Nebenversionen in diesen Abhängigkeiten einen so großen Einfluss haben, und es scheint, dass die angle.io-Dokumente für Webpack und Angle https://angular.io/docs/ts/latest/guide /webpack.html werden nicht vollständig

Mein Code funktioniert perfekt in der Entwicklungsumgebung, wenn ich npm run build versuche, erhalte ich die folgende Fehlermeldung:

FEHLER in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/extract-text-webpack-plugin/dist/loader.js?
{"omit":0,"remove":true}!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/app/communication-center/comm-center
.komponente.scss
Modulaufbau fehlgeschlagen:
.all-common-grid {
^
Ungültiges CSS nach "e": 1 Selektor oder at-Regel erwartet, war "exports = module.ex"
in D:devGreater_GivingCommunicationCentersrcappcommunication-centercomm-center.component.scss (Zeile 1, Spalte 1)
@ ./src/app/communication-center/comm-center.component.scss 2:21-317
@ ./src/app/communication-center/comm-center.component.ts
@ ./src/app/communication-center/comm-center.module.ts
@ ./src/app/app-routing.module.ts
@ ./src/app/app.module.ts
@ ./src/app/main.ts

FEHLER in ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/extract-text-webpack-plugin/dist/loader.js?
{"omit":0,"remove":true}!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/assets/style.scss
Modulaufbau fehlgeschlagen:
/* Importiertes Stylesheet */
^
Ungültiges CSS nach "e": 1 Selektor oder at-Regel erwartet, war "exports = module.ex"
in D:devGreater_GivingCommunicationCentersrcassetsstyle.scss (Zeile 1, Spalte 1)
@ ./src/assets/style.scss 2:21-286

Nachfolgend mein Code

webpack.config.common.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var helpers = require('./helpers');
var webpack = require('webpack');

module.exports = {
Eintrag: {
'app': './src/app/main.ts',
'polyfills': './src/polyfills.ts',
'styles' : './src/assets/style.scss'
},
beschließen: {
Erweiterungen: ['.ts', '.js']
},
Modul: {
Regeln: [
{
test: /.ts$/,
verwenden: [
{
loader: 'awesome-typescript-loader',
Optionen: {
Nur transpile: wahr
}
},
{ loader: 'angular2-template-loader' },
{ loader: 'angular-router-loader' }
]
},
{
testen: /.html$/,
Lader: ['html-loader']
},
{
testen: /.scss$/,
ausschließen: [ /node_modules/, helpers.root('src', 'style.scss') ],
verwenden: [ 'to-string-loader', 'css-loader', 'sass-loader' ]
},
{
testen: /.scss$/ ,
verwenden: ExtractTextPlugin.extract({
Verwenden Sie: 'css-loader!sass-loader'
})
},
{
test: /.(png|jpe?g|gif|svg|woff|woff2|otf|ttf|eot|ico)$/,
verwenden: 'file-loader?name=assets/[name].[hash].[ext]'
}
],
exprContextCritical: false
},
Plugins: [
new ExtractTextPlugin({ // Definiere wo die Datei gespeichert werden soll
Dateiname: 'styles/[name].bundle.css',
allChunks: wahr,
}),
neues HtmlWebpackPlugin({
Vorlage: 'src/index.html'
}),
neues CopyWebpackPlugin([
{
aus: 'node_modules/froala-editor/css/',
zu: 'assets/froala-editor/css/',
},
{
von: 'node_modules/font-awesome/css/font-awesome.min.css',
zu: 'assets/font-awesome/css/font-awesome.min.css',
},
{
von: 'node_modules/font-awesome/fonts',
zu: 'assets/font-awesome/fonts'
}
]),
neues webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
})
]
};

webpack.config.prod.js
var-Pfad = require('Pfad');
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var commonConfig = require('./webpack.config.common');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');

const ENV = process.env.NODE_ENV = process.env.ENV = 'Produktion';

module.exports = webpackMerge(commonConfig, {
Ausgang: {
Pfad: path.resolve(__dirname, 'dist'),
öffentlicher Pfad: '/',
Dateiname: '[name].[hash].js',
chunkDateiname: '[id].[hash].chunk.js'
},
Plugins: [
neues webpack.NoEmitOnErrorsPlugin(),
neues webpack.optimize.UglifyJsPlugin({
zerfleischen: {
keep_fnames: wahr
}
}),
neues ExtractTextPlugin('styles.[hash].css'),
neues webpack.DefinePlugin({
'process.env': {
'ENV': JSON.stringify(ENV)
}
}),
neues webpack.LoaderOptionsPlugin({
Optionen: {
htmlLoader: {
minimieren: false // Workaround für ng2
}
}
}),
neues UglifyJSPlugin()
]
});

@Maseeharazzack

Ich habe das gleiche Problem in 7.0.2

Ok, ich hatte das gleiche Problem, wenn ich zum Beispiel 'import { TooltipModule } from 'ngx-bootstrap/tooltip';' auf meinem app.module. Mein Problem war also, dass ich dieses Modul nicht in die ts.spec-Datei für die Komponente aufgenommen habe, von der der Fehler sprach. Nachdem es als Import zur Datei ts.spec hinzugefügt wurde, begann Phantom zu verstehen, was das Tooltip-Modul ist. Hoffe das hilft.

Dieses Problem wurde aufgrund von Inaktivität automatisch gesperrt.
Bitte reichen Sie ein neues Problem ein, wenn Sie auf ein ähnliches oder verwandtes Problem stoßen.

Lesen Sie mehr über unsere Richtlinie zum automatischen Sperren von Konversationen .

_{_Diese Aktion wurde automatisch von einem Bot ausgeführt._}