Angular 角度：无法读取属性'；呼叫'；未定义的类型（引导时）

检查底部的更新

我有一个服务在应用程序启动时抛出错误<代码>无法读取未定义的属性“调用”。我正在使用ng2 2.4.2和angular cli 1.0.0-beta.24

错误

未捕获类型错误：无法读取Object.621（environment.ts:8）处webpack\u require（bootstrap 81b10f8…：52）处webpack\u require（bootstrap 81b10f8…：52）处Object.450（src async:7）处webpack\u require（bootstrap 81b10f8…：52）处Object.1057（util.service.ts:35）处webpack\u require（bootstrap 81b10f8…：52）处未定义的属性“调用”在main.bundle.js:1的webpackJsonpCallback（引导81b10f8…：23）中

正如您所看到的，这是util服务的一个问题-如下所示：

奇怪：当在chrome中检查源文件时，它没有语法突出显示，这表明存在语法错误——在我看来，没有语法错误

1月20日更新。2017 我更新到ng2.4.4和angular cli 1.0.0-beta26。问题还是一样。

---

在玩游戏时，Arjan发现它与beta 21兼容。您必须检查更改。现在的问题不在上面的服务中，而是在

环境.ts

文件中（该文件具有所有默认值）。

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

使用webpack时，常规的Angular 2

index.html

不包含任何

或

元素，只包含

页面

在我们的例子中，我们将Angular 2应用程序包含在CMS的页面中。为了避免在发布新版本时必须更改CMS页面（这将更改生成的捆绑包名称中的哈希），我们使用自己的JavaScript代码添加捆绑包。对于浏览器，这些是“脚本插入脚本”。为了确保按正确的顺序执行这些操作，只需将
async
设置为false（设置
defer
对我来说不起作用）：

或者，在使用
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”。对于更高版本，可能会显示不同的错误，具体取决于首先执行的脚本以及使用的浏览器。比如：

无法读取未定义的属性“call”
TypeError:模块[moduleId]未定义
ReferenceError:找不到变量：webpackJsonp
TypeError:undefined不是对象（正在计算模块[moduleId]。调用“”）
无法获取未定义或空引用的属性“call”

还要注意的是，
vendor.bundle.js
和
polyfills.bundle.js
没有在旧版本中使用。脚本可能需要插入
元素下面的某个位置。
最后我找到了答案-适用于
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>



更新本地和全球包也很重要。
对全局更新的描述很好。
本地更新也很简单-只需更新package.json中的依赖项即可

重要提示：由于
beta.29
angular cli是包
@angular/cli，不再是
angular cli。
我也遇到了类似的问题。我更新到@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>



我希望有帮助
 在我的例子中，我需要确保脚本标记的顺序正确

  <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
再次运行应用程序，它为我解决了这个问题

在加载延迟模块之前，您尝试在其他模块中使用延迟加载模块的组件或类似情况时，也可能会发生这种情况。
出于某种原因更改端口为我解决了此问题
ng serve--端口4300
您同时解决了此问题吗？不，您是否也遇到了同样的问题@ArjanYes，我想我通过修复
src/app/index.ts
中一个错误的
export
解决了这个问题，但是当我把它作为一个答案写下来时，几分钟后它又被打破了。。。！到目前为止，我没能让它工作。接下来，我希望……呃，好吧。。当有新闻时，你能在这里提供最新消息吗？我也会这样做。小更新：在angular cli 1.0.0-beta.21中一切都很好，22年后开始抱怨。奇怪的是，在版本22中，当我同时使用多个应用程序模块进行引导时，我也遇到了一个问题，而我根本没有明确尝试使用AOT。可能angular cli配置中的一些默认值已更改，但我无法找到差异。（我已经通过
nginit
查看了所有差异。）所以基本上没有解决方案？：/感谢您的解释。呃，上面的
script.async=false
为我解决了它，@Sandrooco（还解决了偶尔出现的“找不到变量：webpackJsonp”；所有这些都与脚本的执行顺序有关）。你写了你也没有自动插入脚本标签？那么，如何插入它们呢？哦，好的，我明白了。那么您的文档中有这4个脚本了吗？没有。我们正在将Angular应用程序嵌入CMS中的现有页面，并且不希望在构建Angular应用程序的新版本时更改这些CMS页面。相反，我们只让页面包含我们自己的JavaScript文件，该文件加载4个webpack生成文件的最新版本
document.write(unescape('%3Cscript async="false" src="..." %3E%3C/script%3E'));

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

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

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