Angular2:无法读取未定义的属性'call'(引导时)

Question

检查底部的更新!

我有一个服务,在应用程序引导时抛出错误.Cannot read property 'call' of undefined.我正在使用ng2 2.4.2和angular-cli 1.0.0-beta.24.

错误

未捕获的TypeError:无法读取webpack_require(bootstrap 81b10f8 ...:52)的未定义属性'call',在Object.621(environment.ts:8)的webpack_require(bootstrap 81b10f8 ...:52)处于Object.450(src async:7) at webpack_require(bootstrap 81b10f8 ...:52)at object.1057(util.service.ts:35)at webpack_require(bootstrap 81b10f8 ...:52)at webpackJsonpCallback(bootstrap 81b10f8 ...:23)at 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中检查源文件时,它没有语法突出显示,这表明语法错误 - 在我看来,虽然没有.

2017年1月20日更新

我更新到ng2.4.4和angular-cli 1.0.0-beta26.问题仍然存在.在玩游戏时,Arjan发现它与beta 21一起使用.必须检查更改.现在问题不在于上面的服务,而是在environment.ts文件中(具有所有默认值).

Answer 1

我认为在运行时更改模块导入时会发生这种情况.

再次使用运行应用程序 ng serve,它为我解决了问题.

当您在延迟模块加载或类似场景之前尝试在其他模块中使用延迟加载模块的组件时,也可能会发生这种情况.

Answer 2

对我来说,这是因为使用我们自己的客户端JavaScript来动态加载webpack生成的bundle.这很容易在我们自己的加载器脚本中修复.

使用webpack时,常规的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为false(设置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>.

Answer 3

最后我找到了答案 - 与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.29Angular cli 是软件包@angular/cli，所以不再angular-cli是了。