Angular：无法读取未定义的属性“调用”（引导时）答案

【问题标题】：Angular: Cannot read property 'call' of undefined (when bootstrapping)Angular：无法读取未定义的属性“调用”（引导时）
【发布时间】：2017-05-23 19:50:15
【问题描述】：

检查底部的更新！

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

错误

Uncaught TypeError: Cannot read property 'call' of undefined at webpack_require (bootstrap 81b10f8…:52) at Object.621 (environment.ts:8) at webpack_require (bootstrap 81b10f8…:52) at 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 中检查源文件时，它没有语法突出显示，这表明存在语法错误 - 但我认为没有。

2017 年 1 月 20 日更新

我更新到 ng2.4.4 和 angular-cli 1.0.0-beta26。问题还是一样。在玩的过程中，Arjan 发现它适用于 beta 21。将不得不检查更改。现在问题不在上面的服务中，而是在environment.ts 文件中（具有所有默认值）。

【问题讨论】：

你同时解决了这个问题吗？
不，你有同样的问题吗？ @Arjan
是的，我以为我通过在src/app/index.ts 中修复错误的export 来解决它，但是在写下这个作为答案时，几分钟后它又被打破了......！到目前为止，我还没有让它工作。待续，希望...
嗯，好吧.. 有消息时你能在这里更新吗？我也会这样做。
次要更新：在 angular-cli 1.0.0-beta.21 中一切正常，并在 22 中开始抱怨。奇怪的是，在版本 22 中，当还玩引导多个应用程序时模块，我也遇到了github.com/angular/angular-cli/issues/2887，而我根本没有明确尝试使用 AOT。也许 angular-cli 配置中的某些默认值已更改，但我找不到差异。（我已经通过 ng init 查看所有差异。）

标签： angular typescript service dependency-injection webpack

【解决方案1】：

出于某种原因更改端口为我解决了这个问题ng serve --port 4300

【讨论】：

【解决方案2】：

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

使用 ng serve 再次运行应用程序，它为我解决了这个问题。

当你在延迟加载模块之前尝试在其他模块中使用延迟加载模块的组件或类似情况时，也可能发生这种情况。

【讨论】：

我不知道为什么这解决了我的问题，但它确实解决了。
对我来说也是一样，通常是由于更改文件（例如重命名/删除）（v5）
@Franklin Pious 正如你所说，我在反应组件中添加了惰性和悬念，然后构建它。现在以这个错误结束任何建议。它工作正常。添加惰性内容后，它抛出此错误 ``` bundle.js:22 TypeError: Cannot read property 'call' of undefined ```
@SakthiSureshAnand 你应该确保在不加载惰性模块的情况下不使用惰性加载模块中的组件。如果是这样的话，也许你应该改变你的导入结构

【解决方案3】：

对我来说，这是由于使用我们自己的客户端 JavaScript 来动态加载 webpack 生成的包造成的。这在我们自己的加载程序脚本中很容易解决。

使用 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 文件被发送到浏览器。并且浏览器将按照遇到的顺序运行 HTML 中已经存在的<script> 元素。

但是当添加那些<script>元素client-side时就不同了，在运行时动态，默认情况下将异步执行。请参阅“解析器插入脚本”和“脚本插入脚本”on MDN's script 页面上的注释。

在我们的例子中，我们将 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 及更高版本 might skip these blocking scripts on slow connections，如果它们托管在不同的域中。）

如果没有这个，在 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.async = false 为我解决了这个问题，@Sandrooco（也解决了偶尔出现的 "Can't find variable: webpackJsonp" 问题；所有这些都与脚本的执行顺序）。而且您写道，您也没有自动插入脚本标签？那么，如何插入它们呢？
哦，好的，我明白了。所以你的文档中有这 4 个脚本？
没有。我们将 Angular 应用程序嵌入到 CMS 中的现有页面中，并且不想在构建 Angular 应用程序的新版本时更改这些 CMS 页面。相反，我们只让页面包含我们自己的 JavaScript 文件，并且该文件会加载 4 个 webpack 生成文件的最新版本。
那么，@Sandrooco，你如何插入脚本标签？

【解决方案4】：

就我而言，我需要确保脚本标签的顺序正确。

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

【讨论】：

【解决方案5】：

我遇到了类似的问题。我更新到 @angular-cli (1.0.0-rc.2) 和 @angular/core(2.4.9) 并遵循 Sandrooco 的解决方案。但是，还需要一个额外的文件 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>

我希望它有所帮助。

【讨论】：

【解决方案6】：

最后我找到了答案 - 与 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>

更新本地和全局包也很重要。 their github page 很好地描述了全局更新。在本地更新也很容易 - 只需更新 package.json 中的依赖项即可。

重要提示：因为beta.29 angular cli 是包@angular/cli，而不是angular-cli了..

【讨论】：