Javascript 支持IE11遗留应用程序中的Angular 8组件

我目前正在评估在遗留应用程序中包含Angular 8元素的可能性

我有一个小组件，我们通过构建angular应用程序来包含它，将生成的js文件（runtime.js、polyfills.js、polyfills-es5.js、scripts.js和main.js）捆绑在一起，并将它们包含到遗留应用程序（一个包含大量javascript和Spring controller后端的jsp应用程序）中

组件本身从Spring控制器加载一个实体列表，并呈现这些实体的内容（通过再次调用Spring控制器）。 Angular应用程序本身可以在Chrome和IE中工作（我们使用IE 11）

但在遗留应用程序中，它只在Chrome中工作，而在IE中不工作。原因是它是一个单页应用程序，在javascript调用加载页面后会发生很多事情。问题似乎是，angular脚本包含在页面加载中，在应用程序中导航并（通过javascript）将angular组件插入DOM后，脚本调用不正确。没有任何错误消息。这些标记被包括在内，甚至是angular组件的HTML模板的一部分。甚至对Spring控制器的请求也发生了，我们得到了一个有效的响应。响应只是没有被处理和呈现

到目前为止，我们发现了两件事：

当我们手动触发角度变化检测时，组件被正确渲染

当我们在包含角度标记之前（通过将其直接写入HTML或使用javascript附加它，两者都有效）我们包含角度脚本，一切正常

因此，应用程序中发生的事情的顺序一定有问题。你知道如何解决这个问题吗？正如我所说的，在Chrome中，一切都很好（在我们的遗留应用程序中也是如此），只有在IE中它不起作用

请注意，我是一个棱角分明的新手，所以请使用简单的单词=）

编辑

一个简单的例子是：

当我只是将我的组件插入到应用程序的模板中时（没有任何进一步的内容或javascript库

……这项工作：

<script>
   $("body").append($(document.createElement("ce-favorite-gridlist")));
</script>

<script src="js/angular/runtime.js"></script>
<script src="js/angular/polyfills-es5.js"></script>
<script src="js/angular/polyfills.js"></script>
<script src="js/angular/scripts.js"></script>
<script src="js/angular/main.js"></script>

$（“body”）.append（$（document.createElement（“ce收藏夹网格列表”））；

…但这不起作用：

<script src="js/angular/runtime.js"></script>
<script src="js/angular/polyfills-es5.js"></script>
<script src="js/angular/polyfills.js"></script>
<script src="js/angular/scripts.js"></script>
<script src="js/angular/main.js"></script>

<script>
   $("body").append($(document.createElement("ce-favorite-gridlist")));
</script>

$（“body”）.append（$（document.createElement（“ce收藏夹网格列表”））；

我认为这是主要的问题，因为模板是呈现的，之后我们将组件包含到我们的应用程序中

我能做些什么来让第二个例子起作用吗

---

另外，我知道我可以捆绑脚本，我们只是想确保捆绑脚本时不会出错…

你能将所有代码合并到一个脚本标记中，并在引用其他脚本之前调用它吗？是的，就像我在附言中说的：我们以前做过，同样的行为。我们只是想确保捆绑不会出错，但事实并非如此。我试图找到但没有找到任何其他方法来解决IE的此问题。我建议您使用捆绑脚本进行测试，并检查IE是否一切正常。