web-dev-qa-db-fra.com

AVERTISSEMENT: J'ai essayé de charger angulaire plusieurs fois. quand j'inclus JQuery

Je construis une application yeoman avec un générateur angulaire.

Les bibliothèques js incluses dans mon fichier index.html sont les suivantes:

<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>

Le problème ne se produit que si jquery est inclus before angular et ne se produit pas s’il est après.

Le problème, comme l'indique le titre, est que "AVERTISSEMENT: je tente de charger angular plusieurs fois" dans la console et l'application ne peut pas s'initialiser.

Quelqu'un at-il des indices sur le fait que cela peut arriver?

J'ai un seul ng-app, je l'inclue angulaire juste une fois ... et tout. Il ne semble pas que cela soit lié à la configuration, car la modification de la position du script le corrige.

Avez-vous la moindre idée?

Est-ce que quelqu'un sait si je peux configurer pour inclure l'ordre des scripts? Comme je l’utilise avec angular-générateur, j’ai mis cela en place avec usemin pour inclure les scripts Bower. Je me demande s'il existe un moyen de pouvoir spécifier dans quel ordre inclure les scripts.

Voici le fichier bower.json de mon projet:

{
  "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"
  }
}

J'ai essayé de chercher sur Google sans succès ... Merci d'avance!

Mise à jour 1:

Je viens de découvrir que si j'inclus les scripts de cette façon, angular ne sera pas inclus deux fois et sera toujours chargé en premier.

  <!-- 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 -->

Pas la meilleure solution, mais au moins pour le moment ... Quoi qu'il en soit, j'aimerais tout avoir à l'intérieur des balises bower: js.

angularjsboweryeoman-generator-angular
10
Agustin Lopez

Après de longues heures d’essais ... c’est finalement sur mon fichier index.html que j’avais un 

<ui-view />

être utilisé par routeur angulaire de l'interface utilisateur et le remplacer à cela, a fait le tour.

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

Pour moi, cela s'est produit lorsque j'ai mal référencé ma vue dans mes itinéraires.

J'ai eu:

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

mais ma vue s'appelait views/mypage.html

Le message d'erreur n'est pas ce à quoi je m'attendais. Je m'attendais à une erreur de vue manquante.

12
Jim Clouse

C'est ce qui m'est arrivé aussi avec .NET et MVC 5 et après un moment, j'ai réalisé que dans l'étiquette: Ngview

à nouveau inclus en tant que scripts de section vous arrive. Pour résoudre le problème côté serveur, je renvoie la vue partielle. Quelque chose comme:

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

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

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

Je recevais le même avertissement et c'était à cause de l'ordre des fichiers inclus, ainsi que de la version utilisée.

Pour résoudre l'avertissement ci-dessus, j'ai ré-inclus les fichiers dans l'ordre suivant:

jquery.js
jqueryui.js
angular.js

Remarque: Vous devez ajouter jquery balise de script avant angularjs pour que angularjs puisse remplacer jqLite par jQuery.

De plus, mon code fonctionnait avec AngularJS v1.2.0, mais pas avec une version angulaire supérieure. Vérifiez donc également la compatibilité de vos versions jquery et angularjs.

2
div

Je faisais face au même problème lorsque je travaillais avec electron app . J'avais inclus angular.min.js dans la page index.html et chaque fois que je revenais sur cette page, le nombre de fois où l'avertissement apparaissait double.. like 1,2,4,8,16 etc. Ainsi, après 4/5 de l'actualisation, une application était très lente à utiliser . La solution que j'ai trouvée est .. Au lieu d'inclure angular.min.js avec une balise de script, utilisez require ('./ path/angular.min.js');

cela chargera le fichier une seule fois.

Selon la documentation du noeud

Mise en cache #

Les modules sont mis en cache après leur premier chargement. Cela signifie (entre autres) que chaque appel à demander ('foo') obtiendra exactement le même objet renvoyé, s'il est résolu dans le même fichier.

Plusieurs appels à requérir ('foo') peuvent ne pas entraîner l'exécution du code de module plusieurs fois. C'est une caractéristique importante. Avec lui, les objets "partiellement terminés" peuvent être retournés, permettant ainsi de charger des dépendances transitives même lorsqu'elles provoqueraient des cycles.

0
ishwar rimal

Voici un autre scénario qui n’a été couvert par personne, mais qui pose le même problème et il n’est peut-être pas évident au début:

Si vous utilisez Gulp ou tout autre outil similaire avec le plugin angular-template-cache et fusionnez tout votre code dans un seul fichier, vous devez vous assurer que la génération de templatecache est exécutée avant la concaténation proprement dite, sinon votre app.min. js n'aura pas la partie templatecache.

Le fichier Gulpfile ressemble à ceci:

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));

La partie clé est la dernière ligne, clean et templatecache sont exécutés en premier, puis les scripts et les styles en parallèle. J'exécutais templatecache en parallèle également et je prenais les doubles avertissements angularjs… .. J'espère que cela aidera quelqu'un.

0
Radu Ciobanu

Oui, j'ai résolu mes problèmes en triant l'ordre des scripts JS dans la page HTML.

Lorsque vous mettez le script js angulaire dans le premier ordre, cela ne se produira plus.

C'est très étrange.

Merci.

0
kevin_song