Angular2: Impossible de lire la propriété "appel" undefined (lors de l'amorçage)
Vérifier la mise à jour sur le fond!
J'ai un service qui génère une erreur lors de l'application est d'amorçage. Cannot read property 'call' of undefined
. Je suis l'aide de ng2 2.4.2 et angulaire-cli 1.0.0-bêta.24.
ERREUR
Uncaught TypeError: Cannot read property 'appel' undefined à webpack_require (bootstrap 81b10f8...:52) à l'Objet.621 (de l'environnement.ts:8) à webpack_require (bootstrap 81b10f8...:52) à l'Objet.450 (src async:7) à webpack_require (bootstrap 81b10f8...:52) à l'Objet.1057 (util.service.ts:35) à webpack_require (bootstrap 81b10f8...:52) à webpackJsonpCallback (bootstrap 81b10f8...:23) à la main.bundle.js:1
Comme vous pouvez le voir, c'est un problème avec l'util service - ce qui se présente comme suit:
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Project } from '../datatypes/';
import { Response } from '@angular/http';
@Injectable()
export class UtilService {
constructor(private router: Router) {}
public redirectToProject(project: Project) {
let query = project.ProjectName.split(' ')
.join('-')
.concat('-' + project.Id)
.toLowerCase();
this.router.navigate(['/project', query]);
}
public extractData(res: Response) {
let body = res.json();
return body || {};
}
}
Étrange: Lors de l'inspection du fichier source dans google chrome, il n'a pas de coloration syntaxique, qui indiquent une erreur de syntaxe - à mon avis, il n'y a aucun bien.
Mise À Jour Le 20 Janvier. 2017
J'ai mis à jour à ng2.4.4 et angulaire-cli 1.0.0-beta26. Le problème est toujours le même.
Tout en jouant, Arjan trouvé que cela fonctionne avec la version bêta 21. Faudra vérifier les changements. Le problème aujourd'hui n'est pas dans le service ci-dessus, mais dans le environment.ts
fichier (qui a toutes les valeurs par défaut).
Non, avez-vous le même problème? @Arjan
Oui, et j'ai pensé que j'ai résolu par la fixation d'un erronée
export
dans src/app/index.ts
, mais lors de l'écriture que comme une réponse, quelques minutes plus tard, il a été brisé à nouveau...! Et jusqu'à présent je n'ai pas réussi à le faire fonctionner. Pour être continué, je l'espère...Arf ok alors.. Pouvez-vous donner une mise à jour ici quand il y a des nouvelles? Je vais le faire aussi.
Mise à jour mineure: tout fonctionne très bien dans angulaires-cli 1.0.0-bêta.21, et commence à se plaindre 22. La chose étrange est que avec la version 22 de aussi jouer avec d'amorçage app multiples modules, j'ai également exécuter dans github.com/angular/angular-cli/issues/2887 alors que je ne suis pas explicitement d'essayer d'utiliser AOT. Peut-être que certains paramètres par défaut dans le angulaires-cli changé de config, mais je n'arrive pas à trouver les différences. (Je suis passé par
ng init
de voir toutes les différences.)OriginalL'auteur sandrooco | 2017-01-09
Vous devez vous connecter pour publier un commentaire.
Je pense que ce qui se passe quand vous apportez des modifications au module des importations au cours de l'exécution.
Exécutez à nouveau l'application à l'aide de
ng serve
et il a fixé le problème pour moi.Il peut également se produire lorsque vous essayez d'utiliser des composants de paresseux les modules chargés dans d'autres modules avant de les paresseux module de consommer ou de tels scénarios similaires.
Même chose pour moi, c'est généralement attribuable à la modification de fichiers (par exemple, la modification/suppression) (v5)
wow, a fonctionné pour moi aussi!!
OriginalL'auteur Franklin Pious
Pour moi, cela a été causé par l'utilisation de notre propre côté client JavaScript pour charger dynamiquement le webpack générés par les faisceaux. Qui a été facilement résolu dans notre propre chargeur de script.
Lors de l'utilisation de webpack, régulièrement Angulaire 2
index.html
ne comprend pas tout<style>
ou<script>
éléments, mais juste<app-root></app-root>
. Lors de l'exécution deng serve
oung build
, le fichier est renforcée côté serveur à ajouter quelque chose comme ce qui suit à la fin du fichier:...ou, pour
ng build --prod
:L'résultant côté serveur fichier HTML est envoyé au navigateur. Et les navigateurs exécuter
<script>
éléments déjà présents dans le code HTML dans l'ordre dans lequel elles sont rencontrées.Mais c'est différent lors de l'ajout de ces
<script>
éléments côté client, dynamiquement à l'exécution, qui, par défaut, sera exécutée de manière asynchrone. Voir les notes sur l'analyseur, inséré scripts" et "script insérer des scripts" sur MDN du script page.Dans notre cas, nous avons compris l'angle de 2 application dans les pages de notre CMS. Pour éviter d'avoir à changer de page CMS, chaque fois que nous publions une nouvelle version (qui va changer les codes de hachage dans les noms de génération de faisceaux), nous allons ajouter les paquets à l'aide de notre propre code JavaScript. Pour un navigateur ce sont des "script inséré scripts". Pour s'assurer qu'elles sont exécutées dans le bon ordre, il suffit de définir
async
à false (réglagedefer
n'a pas à faire le truc pour moi):Ou, lors de l'utilisation de
document.write
, de s'assurer qu'il comprend lesasync="false"
attribut:(Fait amusant: méfiez-vous que Chrome 55 et plus tard peut ignorer ces blocage des scripts sur des connexions lentes, si elles sont hébergées sur un domaine différent.)
Sans cela, les choses le plus souvent une amende allant jusqu'à angulaires-cli 1.0.0-bêta.21, bien que nous ne nous voyons occasionnellement "impossible de trouver la variable: webpackJsonp". Pour plus tard, des versions différentes erreurs peuvent montrer, selon lequel le script est exécuté en premier, et le navigateur est utilisé. Comme:
Également noter que
vendor.bundle.js
etpolyfills.bundle.js
n'ont pas été utilisés dans les anciennes versions. Et les scripts peuvent être inséré quelque part ci-dessous la<app-root>
élément.Re, le ci-dessus
script.async = false
résolu pour moi, @Sandrooco (et résolu à l'occasionnel "impossible de trouver la variable: webpackJsonp" ainsi, tous liés à l'ordre dans lequel les scripts sont exécutés). Et vous avez écrit vous n'avez pas les balises de script inséré automatiquement? De la sorte, alors comment ne vous insérer?Ah ok, je vois. Vous avez donc ces 4 scripts dans votre document?
Pas de. Nous sommes l'incorporation de l'Angulaire de l'application dans les pages existantes dans un CMS, et ne veulent pas changer ces pages CMS lorsque nous construisons une nouvelle version de notre Angulaire de l'app. Au lieu de cela, nous ne faisons que les pages inclus notre propre fichier JavaScript, et ce fichier charge les dernières versions de l'4 webpack fichiers générés.
Donc, @Sandrooco, comment voulez-vous insérer les balises de script?
OriginalL'auteur Arjan
J'ai enfin trouvé la réponse - fonctionne avec
beta.32.3
. Nous devons utiliser ces fichiers:Il est également important de mettre à jour les locaux et le package global.
La mise à jour à l'échelle mondiale est bien décrit sur leur page github.
Mise à jour localement est trop facile - il suffit de mettre à jour la dépendance dans votre colis.json.
Important: Depuis
beta.29
angulaire de la cli est le paquet@angular/cli
, pasangular-cli
plus..OriginalL'auteur sandrooco
J'ai eu un problème similaire. J'ai mis à jour pour @angulaires-cli (1.0.0-rc.2) et @angulaire/core(2.4.9) et suivi Sandrooco de la solution. Cependant, il y a un fichier supplémentaire polyfills.bundle.js obligés de travailler.
J'espère que cela aide.
OriginalL'auteur G...... T......
Dans mon cas, je voulais m'assurer que j'ai eu le script de balises dans le bon ordre.
OriginalL'auteur Amadeus Sánchez