web-dev-qa-db-de.com

WARNUNG: Es wurde versucht, den Winkel mehr als einmal zu laden. wenn ich JQuery einbeziehe

Ich baue eine Yeoman-App mit einem Winkelgenerator.

Die in meiner index.html-Datei enthaltenen js-Bibliotheken sind:

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/modernizr/modernizr.js"></script>
<script src="bower_components/angular/angular.js"></script>   
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/d3/d3.js"></script>
<script src="bower_components/select2/select2.js"></script>
<script src="bower_components/angular-ui-select2/src/select2.js"></script>

Das Problem tritt nur auf, wenn Jquery before angle enthalten ist, und es tritt nicht auf, wenn es danach ist.

Das Problem, wie der Titel besagt, ist, dass ich "WARNUNG: Versuch, den Winkel mehr als einmal zu laden" in der Konsole und die App kann nicht initialisiert werden.

Hat jemand irgendwelche Hinweise, warum dies passieren kann?

Ich habe eine einzige NG-App, ich bin nur einmal eckig ... und alles. Es sieht nicht so aus, als ob es etwas mit der Konfiguration zu tun hat, weil das Ändern der Position des Skripts es korrigiert.

Hast du eine Ahnung?

Weiß jemand, ob ich die Reihenfolge der Skripts festlegen kann? Da ich den Winkelgenerator verwende, habe ich dies mit usemin so eingerichtet, dass es die Bower-Skripte enthält. Ich frage mich, ob es eine Möglichkeit gibt, festzulegen, in welcher Reihenfolge die Skripte eingeschlossen werden sollen.

Dies ist die Datei bower.json für mein Projekt:

{
  "name": "<name>",
  "version": "0.0.0",
  "dependencies": {
    "angular": "1.2.15",
    "json3": "~3.2.6",
    "es5-shim": "~2.1.0",
    "angular-ui-router": "~0.2.10",
    "modernizr": "~2.8.1",
    "d3": "~3.4.6",
    "angular-ui-select2": "~0.0.5"
  },
  "devDependencies": {
    "angular-mocks": "1.2.15",
    "angular-scenario": "1.2.15"
  }
}

Ich habe versucht, in Google ohne Glück zu suchen. Vielen Dank im Voraus!

Update 1:

Ich habe gerade herausgefunden, dass, wenn ich die Skripte auf diese Weise einfüge, Winkel nicht zweimal einbezieht und immer zuerst geladen wird.

  <!-- build:js scripts/vendor.js -->
  <script src="bower_components/angular/angular.js"></script>
  <!-- bower:js -->
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/modernizr/modernizr.js"></script>
  <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
  <script src="bower_components/d3/d3.js"></script>
  <script src="bower_components/select2/select2.js"></script>
  <script src="bower_components/angular-ui-select2/src/select2.js"></script>
  <!-- endbower -->

Nicht die beste Lösung, aber zumindest für jetzt ... Wie auch immer, ich hätte gerne alles in Bower: js-Tags.

10
Agustin Lopez

Nach langen Teststunden ... endete es, dass ich auf meiner index.html-Datei eine 

<ui-view />

von winkel-ui-fräser verwendet zu werden und ihn zu ersetzen, hat den trick erledigt.

<ui-view></ui-view>
25
Agustin Lopez

Dies geschah für mich, als ich meine Sicht in meinen Routen falsch referenzierte.

Ich hatte:

.when('/route', {
      templateUrl: 'views/myPage.html',
      controller : 'myCtrl'
})

aber meine Ansicht hieß views/mypage.html

Die Fehlermeldung ist nicht das, was ich erwarten würde. Ich hätte einen fehlenden Ansichtsfehler erwartet.

12
Jim Clouse

Das passierte auch mir mit .NET und MVC 5 und nach einiger Zeit wurde mir klar, dass innerhalb des Labels: Ngview

wieder enthalten, da Abschnittsskripte Ihnen passieren. Um das Problem auf der Serverseite zu lösen, gebe ich die Teilansicht zurück. So etwas wie:

public ActionResult Index()
{
    return View();
}

public ActionResult Login()
{
    return PartialView();
}

public ActionResult About()
{
    return PartialView();
}
3
Leon

Ich habe dieselbe Warnung erhalten, und zwar aufgrund der Reihenfolge der enthaltenen Dateien sowie der verwendeten Version.

Um die obige Warnung zu beheben, habe ich die Dateien in der folgenden Reihenfolge wieder eingefügt:

jquery.js
jqueryui.js
angular.js

Hinweis: Sie müssen vor jqueryangularjs script-Tag hinzufügen, damit anglejs jqLite durch jQuery ersetzen kann.

Außerdem arbeitete mein Code mit AngularJS v1.2.0, jedoch nicht mit einer höheren Winkelversion. Überprüfen Sie auch die Kompatibilität Ihrer Jquery- und Angularjs-Version.

2
div

Bei der Arbeit mit der Elektron-App stand ich vor einem ähnlichen Problem: Ich hatte angle.min.js in die index.html-Seite aufgenommen und jedes Mal, wenn ich auf diese Seite komme, wurde die Warnung immer angezeigt double..like 1,2,4,8,16 usw. Nach einer Aktualisierung von 4/5 wurde die App also extrem langsam .. Die Lösung, die ich gefunden habe, ist ...__ Anstelle von angle.min.js Verwenden Sie mit dem Script-Tag "use" ('./pfad/angle.min.js');

dadurch wird die Datei nur einmal geladen.

Laut Knotendokumentation

Caching #

Module werden nach dem ersten Laden zwischengespeichert. Dies bedeutet (unter anderem), dass bei jedem Aufruf ('foo') genau das gleiche Objekt zurückgegeben wird, wenn es in dieselbe Datei aufgelöst würde.

Mehrere Aufrufe ("foo") erfordern möglicherweise nicht, dass der Modulcode mehrmals ausgeführt wird. Dies ist eine wichtige Funktion. Mit ihm können "teilweise erledigte" Objekte zurückgegeben werden, sodass transitive Abhängigkeiten auch dann geladen werden können, wenn sie Zyklen verursachen würden.

0
ishwar rimal

Hier ist ein anderes Szenario, das von niemandem abgedeckt wurde, aber dasselbe Problem verursacht, und es könnte zunächst nicht offensichtlich sein:

Wenn Sie Gulp oder ein ähnliches Tool mit dem Winkel-Template-Cache-Plugin verwenden und den gesamten Code in einer einzigen Datei zusammenführen, müssen Sie sicherstellen, dass die Generierung des Template-Caches ausgeführt wird, bevor die eigentliche Verkettung erfolgt. js wird den templatecache-Teil nicht haben.

Das Gulpfile sieht so aus:

var paths = {
  styles: 'assets/less/style.less',
  scripts: 'assets/js/**/*.js',
  templates: 'views/**/*.html'
}

function styles() {
  return gulp.src(paths.styles)
    .pipe(less())
    .pipe(cleanCSS())
    .pipe(gulp.dest('./assets/css/'));
}

function scripts() {
  return gulp.src(paths.scripts, { sourcemaps: true })
    .pipe(babel())
    .pipe(uglify())
    .pipe(concat('app.min.js'))
    .pipe(gulp.dest('./assets/js'));
}

function templatecache() {
  return gulp.src(paths.templates)
    .pipe(templateCache({ module: 'ams', root: '/views/'}))
    .pipe(gulp.dest('./assets/js'));
}

function clean() {
  return del(['assets/js/app.min.js', 'assets/js/templates.js', 'assets/css/style.css']);
};

var build = gulp.series(clean, templatecache, gulp.parallel(styles, scripts));

Schlüsselteil ist die letzte Zeile, clean und templatecache werden zuerst ausgeführt, dann die Skripts und Stile parallel. Ich habe auch templatecache parallel ausgeführt und bin in die doppelten eckigen js-Warnungen eingestiegen ... Ich hoffe es hilft jemandem.

0
Radu Ciobanu

Ja, ich habe meine Probleme durch das Sortieren der JS-Skriptreihenfolge in der HTML-Seite gelöst.

Wenn Sie das ewige js-Skript in die erste Reihenfolge bringen, wird dies nicht mehr passieren.

Das ist sehr seltsam.

Vielen Dank.

0
kevin_song