Angular2: невозможно прочитать свойство 'call' из undefined (при начальной загрузке)

Проверьте обновление внизу!

У меня есть служба, которая выдает ошибку, пока приложение загружается. Cannot read property 'call' of undefined, Я использую ng2 2.4.2 и angular-cli 1.0.0-beta.24.

ОШИБКА

Uncaught TypeError: Невозможно прочитать свойство 'call' undefined в webpack_require (bootstrap 81b10f8…:52) в Object.621 (environment.ts:8) в webpack_require (bootstrap 81b10f8…:52) в Object.450 (src async:7) в webpack_require (bootstrap 81b10f8…:52) в Object.1057 (util.service.ts:35) в webpack_require (bootstrap 81b10f8…:52) в webpackJsonpCallback (bootstrap 81b10f8…:23) в main.bundle.js:1

Как вы видите, это проблема с сервисом util - это выглядит следующим образом:

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

Странно: при проверке исходного файла в chrome у него нет подсветки синтаксиса, что может указывать на синтаксическую ошибку - на мой взгляд, ее нет.

Обновление 20 января. 2017

Я обновился до ng2.4.4 и angular-cli 1.0.0-beta26. Проблема все та же. Во время игры Арджан обнаружил, что она работает с бета-версией 21. Придется проверить изменения. Проблема сейчас не в сервисе выше, а в environment.ts файл (который имеет все значения по умолчанию).

Источник

5 ответов

Решение

Наконец я нашел ответ - работает с beta.32.3, Мы должны использовать эти файлы:

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

Также важно обновить локальный и глобальный пакет. Глобальное обновление хорошо описано на их странице github. Обновление локально тоже легко - просто обновите зависимость в вашем package.json.

Важно: с beta.29 угловой пакет @angular/cli не angular-cli больше..

Источник

Я думаю, что это происходит, когда вы вносите изменения в импорт модулей во время выполнения.

Запустите приложение еще раз, используя ng serve и это решило проблему для меня.

Это может также произойти, когда вы пытаетесь использовать компоненты лениво загруженных модулей в других модулях до того, как ленивый модуль будет загружен.

Источник

Для меня это было вызвано использованием нашего собственного клиентского JavaScript для динамической загрузки сгенерированных веб-пакетов. Это было легко исправлено в нашем собственном скрипте загрузчика.

При использовании вебпака обычный Angular 2 index.html не включает в себя <style> или же <script> элементы, но только <app-root></app-root>, При беге ng serve или же ng build, файл улучшен на стороне сервера, чтобы добавить что-то вроде следующего в конец файла:

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

... или, для 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>

Полученный файл HTML на стороне сервера отправляется в браузер. И браузеры будут работать <script> элементы уже присутствуют в HTML в том порядке, в котором они встречаются.

Но это отличается при добавлении тех, <script> элементы на стороне клиента, динамически во время выполнения, которые по умолчанию будут выполняться асинхронно. См. Примечания к "сценариям с вставкой парсера" и "сценариям с вставкой сценария" на странице сценариев MDN.

В нашем случае мы включаем приложение Angular 2 на страницы нашей CMS. Чтобы избежать необходимости изменять страницу CMS всякий раз, когда мы выпускаем новую версию (которая изменит хэши в именах сгенерированных пакетов), мы добавляем пакеты, используя наш собственный код JavaScript. Для браузера это "скрипты с вставкой скриптов". Чтобы убедиться, что они выполняются в правильном порядке, просто установите async в ложь (настройка defer не сделал трюк для меня)

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

Или при использовании document.write убедитесь, что он включает в себя async="false" атрибут:

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

(Интересный факт: учтите, что Chrome 55 и более поздние версии могут пропускать эти сценарии блокировки на медленных соединениях, если они размещены в другом домене.)

Без этого чаще всего все было в порядке вплоть до angular-cli 1.0.0-beta.21, хотя мы иногда видели "Не могу найти переменную: webpackJsonp". Для более поздних версий могут отображаться разные ошибки, в зависимости от того, какой сценарий выполняется первым и какой браузер используется. Подобно:

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

Также обратите внимание, что vendor.bundle.js а также polyfills.bundle.js не использовались в более старых версиях. И сценарии, возможно, должны быть вставлены где-то под <app-root> элемент.

Источник

В моем случае мне нужно было убедиться, что теги сценариев были в правильном порядке.

  <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>
Источник

Смена порта по какой-то причине решила эту проблему для меня ng serve --port 4300

Источник

У меня была похожая проблема. Я обновился до @angular-cli (1.0.0-rc.2) и @angular/core(2.4.9) и последовал решению Сандрооко. Однако для работы необходим дополнительный файл polyfills.bundle.js.

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

Я надеюсь, что это помогает.

Источник
Другие вопросы по тегам