wake-up-neo.com

Angular2: Eigenschaft 'Aufruf' von undefined kann nicht gelesen werden (beim Bootstrapping)

Überprüfen Sie das Update auf der Unterseite!

Ich habe einen Dienst, der einen Fehler ausgibt, während die App bootstrapping ist. Cannot read property 'call' of undefined. Ich verwende ng2 2.4.2 und angle-cli 1.0.0-beta.24.

ERROR

Nicht abgerufener TypeError: Die Eigenschaft 'call' von undefined kann nicht in webpack_require (bootstrap 81b10f8…: 52) in Object.621 (environment.ts: 8) in webpack_require (bootstrap 81b10f8…: 52) in Object.450 (src async: 7) gelesen werden. bei webpack_require (bootstrap 81b10f8…: 52) bei Object.1057 (util.service.ts: 35) bei webpack_require (bootstrap 81b10f8…: 52) bei webpackJsonpCallback (bootstrap 81b10f8…: 23) bei main.bundle.js: 1 

Wie Sie sehen, ist dies ein Problem mit dem Dienst util. Dies sieht folgendermaßen aus:

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

Seltsam: Bei der Prüfung der Quelldatei in Chrome gibt es keine Syntaxhervorhebung, was auf einen Syntaxfehler schließen lässt - meiner Meinung nach gibt es jedoch keinen.

Update 20. Januar 2017

Ich habe auf ng2.4.4 und angle-cli 1.0.0-beta26 aktualisiert. Das Problem ist immer noch das Gleiche ..__ Während Arjan herumspielte, stellte er fest, dass es mit Beta 21 funktioniert. Muss die Änderungen überprüfen. Das Problem befindet sich jetzt nicht in dem Dienst oben, sondern in der Datei environment.ts (die alle Standardeinstellungen enthält).

11
sandrooco

Endlich fand ich die Antwort - funktioniert mit beta.32.3. Wir müssen diese Dateien verwenden:

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

Es ist auch wichtig, das lokale und das globale Paket zu aktualisieren. Das globale Update wird auf ihrer Github-Seite . Beschrieben. Das lokale Update ist ebenfalls einfach. Aktualisieren Sie einfach die Abhängigkeit in Ihrem Paket. Json.

Wichtig: Da beta.29 angle cli das Paket @angular/cli ist, nicht mehr angular-cli.

1
sandrooco

Ich denke, es passiert, wenn Sie während der Laufzeit Änderungen am Modulimport vornehmen.

Führen Sie die Anwendung erneut mit ng serve aus, und das Problem wurde für mich behoben. 

Dies kann auch vorkommen, wenn Sie versuchen, Komponenten von Lazy-Load-Modulen in anderen Modulen zu verwenden, bevor das Lazy-Modul geladen wird oder ähnliche Szenarien.

11
Franklin Pious

Für mich wurde dies dadurch verursacht, dass unser eigenes clientseitiges JavaScript zum dynamischen Laden der durch das Webpack generierten Bundles verwendet wurde. Das wurde einfach in unserem eigenen Loader-Skript behoben.

Bei Verwendung von Webpacks enthält ein reguläres Angular 2 index.html Keine <style> - oder <script> - Elemente, sondern nur <app-root></app-root> Wenn Sie ng serve Oder ng build Ausführen, wird die Datei serverseitig erweitert und fügt dem Text Folgendes hinzu Ende der Datei:

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

... oder für 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>

Die resultierende serverseitige HTML-Datei wird an den Browser gesendet. Und Browser führen <script> - Elemente aus, die bereits im HTML in der Reihenfolge vorhanden sind, in der sie angetroffen werden.

Dies ist jedoch anders, wenn Sie diese <script> - Elemente clientseitig dynamisch zur Laufzeit hinzufügen, die standardmäßig asynchron ausgeführt werden. Beachten Sie die Hinweise zu "Skripten mit Parser-Einfügung" und "Skripten mit Skript-Einfügung" auf der MDN-Skript-Seite .

In unserem Fall wird die Anwendung Angular 2 in Seiten in unserem CMS eingefügt, um zu vermeiden, dass die CMS-Seite bei jeder Veröffentlichung einer neuen Version geändert werden muss (wodurch die Hashes in den Namen von geändert werden) Wir fügen die Bundles mit unserem eigenen JavaScript-Code hinzu. Bei einem Browser handelt es sich um "Skript-eingefügte Skripte". Um sicherzustellen, dass diese in der richtigen Reihenfolge ausgeführt werden, setzen Sie async einfach auf false ( Einstellung defer hat den Trick für mich nicht getan):

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

Oder stellen Sie bei Verwendung von document.write Sicher, dass das Attribut async="false" Enthalten ist:

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

(Unterhaltsame Tatsache: Beachten Sie, dass Chrome 55 und höher möglicherweise werden diese blockierenden Skripts bei langsamen Verbindungen übersprungen , wenn sie auf einer anderen Domain gehostet werden.)

Ohne dies waren die Dinge meistens in Ordnung bis Angular-Cli 1.0.0-Beta.21, obwohl wir gelegentlich "Variable kann nicht gefunden werden: webpackJsonp" sahen. In späteren Versionen werden möglicherweise unterschiedliche Fehler angezeigt, je nachdem, welches Skript zuerst ausgeführt wird und welcher Browser verwendet wird. Mögen:

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

Beachten Sie auch, dass vendor.bundle.js Und polyfills.bundle.js In älteren Versionen nicht verwendet wurden. Und die Skripte müssen möglicherweise irgendwo eingefügt werden unten das Element <app-root>.

9
Arjan

Ich hatte ein ähnliches Problem. Ich habe ein Update auf @ angle-cli (1.0.0-rc.2) und @ angle/core (2.4.9) durchgeführt und die Lösung von Sandrooco verfolgt. Es ist jedoch eine zusätzliche Datei polyfills.bundle.js erforderlich, um zu funktionieren. 

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

Ich hoffe, es hilft. 

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

In meinem Fall musste ich sicherstellen, dass ich die Skript-Tags in der richtigen Reihenfolge hatte.

  <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