web-dev-qa-db-fra.com

Angular2: Impossible de lire la propriété 'call' of indéfinie

Vérifiez la mise à jour sur le bas!

J'ai un service qui génère une erreur lorsque l'application est en train de démarrer. Cannot read property 'call' of undefined. J'utilise ng2 2.4.2 et angular-cli 1.0.0-beta.24.

ERREUR

Uncaught TypeError: Impossible de lire la propriété 'call' de indéfinie à webpack_require (bootstrap 81b10f8…: 52) à Object.621 (environment.ts: 8) à webpack_require (bootstrap 81b10f8…: 52) à Object.450 (src async: 7) sur webpack_require (bootstrap 81b10f8…: 52) sur Object.1057 (util.service.ts: 35) sur webpack_require (bootstrap 81b10f8…: 52) sur webpackJsonpCallback (bootstrap 81b10f8…: 23) sur main.bundle.js: 1 

Comme vous pouvez le constater, le service utilitaire pose un problème - il 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 en chrome, il n’a pas de surbrillance de syntaxe, ce qui laisse supposer une erreur de syntaxe - à mon avis, il n’en existe pas.

Mise à jour du 20 janvier 2017

J'ai mis à jour à ng2.4.4 et angular-cli 1.0.0-beta26. Le problème est toujours le même… .. En jouant, Arjan a découvert que cela fonctionnait avec la bêta 21. Il faudra vérifier les modifications. Le problème ne concerne pas le service ci-dessus, mais le fichier environment.ts (qui contient tous les paramètres par défaut).

angulartypescriptservicedependency-injectionwebpack
11
sandrooco

Enfin, j'ai trouvé la réponse - fonctionne avec beta.32.3. Nous devons utiliser ces fichiers:

<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="scripts.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>

Il est également important de mettre à jour les fichiers locaux et le paquet global . La mise à jour globale est bien décrite sur leur page github .. JSON.

Important: Depuis beta.29 angular cli est le paquet @angular/cli, et non angular-cli plus ..

1
sandrooco

Je pense que cela se produit lorsque vous modifiez les importations de modules pendant l'exécution.

Exécutez à nouveau l'application à l'aide de ng serve et le problème a été résolu pour moi. 

Cela peut également se produire lorsque vous essayez d'utiliser des composants de modules chargés paresseux dans d'autres modules avant le chargement du module paresseux ou dans des scénarios similaires.

11
Franklin Pious

Pour moi, cela était dû à l'utilisation de notre propre JavaScript côté client pour charger dynamiquement les bundles générés par Webpack. Cela a été facilement résolu dans notre propre script de chargement.

Lors de l'utilisation de webpack, un index.html angulaire 2 standard n'inclut aucun élément <style> ou <script>, mais seulement <app-root></app-root>. Lors de l'exécution de ng serve ou ng build, le fichier est amélioré côté serveur pour ajouter un élément semblable à celui-ci à la fin du fichier:

<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>

... ou, pour ng build --prod:

<link href="styles.d41d8cd98f00b204e980.bundle.css" rel="stylesheet"/>
...
<script type="text/javascript" src="inline.66e3ead788094772ecc4.bundle.js"></script>
<script type="text/javascript" src="polyfills.477266e3ead78809ecc4.bundle.js"></script>
<script type="text/javascript" src="vendor.18c581546c015d1bfc6e.bundle.js"></script>
<script type="text/javascript" src="main.9a5c1002f220245829cd.bundle.js"></script>

Le fichier HTML côté serveur résultant est envoyé au navigateur. Et les navigateurs exécuteront les éléments <script> déjà présents dans le code HTML dans l'ordre dans lequel ils ont été rencontrés.

Mais il en va différemment lors de l'ajout de ces éléments <script>client-side, de manière dynamique au moment de l'exécution, qui seront exécutés de manière asynchrone par défaut. Voir les notes sur "scripts insérés dans l'analyseur" et "scripts insérés dans un script" sur script page de MDN.

Dans notre cas, nous incluons l'application Angular 2 dans des pages de notre système de gestion de contenu. Pour éviter de devoir modifier la page du CMS chaque fois que nous publions une nouvelle version (ce qui modifiera les hachages dans les noms des ensembles générés), nous ajoutons les ensembles à l'aide de notre propre code JavaScript. Pour un navigateur, il s'agit de "scripts insérés par script". Pour vous assurer que celles-ci sont exécutées dans le bon ordre, définissez simplement async sur false (définir defer ne m'a pas permis de résoudre le problème):

var script = document.createElement('script');
script.async = false;
script.src = ...

Ou, lorsque vous utilisez document.write, assurez-vous qu’il inclut l’attribut async="false":

document.write(unescape('%3Cscript async="false" src="..." %3E%3C/script%3E'));

(Fait amusant: sachez que Chrome 55 et les versions ultérieures peuvent ignorer ces scripts de blocage lors de connexions lentes , s’ils sont hébergés sur un domaine différent.)

Sans cela, la plupart du temps, les choses allaient bien jusqu'à angular-cli 1.0.0-beta.21, bien que nous ayons parfois vu un "variable introuvable: webpackJsonp". Pour les versions ultérieures, différentes erreurs peuvent apparaître, en fonction du script exécuté en premier et du navigateur utilisé. Comme:

Cannot read property 'call' of undefined
TypeError: modules[moduleId] is undefined
ReferenceError: Can't find variable: webpackJsonp
TypeError: undefined is not an object (evaluating modules[moduleId].call')
Unable to get property 'call' of undefined or null reference

Notez également que vendor.bundle.js et polyfills.bundle.js n'étaient pas utilisés dans les versions antérieures. Et les scripts devront peut-être être insérés quelque part ci-dessous l'élément <app-root>.

9
Arjan

J'ai eu un problème similaire. J'ai mis à jour @ angular-cli (1.0.0-rc.2) et @ angular/core (2.4.9) et j'ai suivi la solution de Sandrooco. Cependant, un fichier supplémentaire, polyfills.bundle.js, est nécessaire pour fonctionner. 

<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>

J'espère que ça aide. 

0
G...... T......

Dans mon cas, je devais m'assurer que j'avais les balises de script dans le bon ordre.

  <script type="text/javascript" src="inline.bundle.js"></script>
  <script type="text/javascript" src="polyfills.bundle.js"></script>
  <script type="text/javascript" src="styles.bundle.js"></script>
  <script type="text/javascript" src="scripts.bundle.js"></script>
  <script type="text/javascript" src="vendor.bundle.js"></script>
  <script type="text/javascript" src="main.bundle.js"></script>
0
Amadeus Sánchez