使用 iframe 将 AngularJS 迁移到 Angular 8

Posted 2023-03-07

【中文标题】使用 iframe 将 AngularJS 迁移到 Angular 8

【英文标题】：Migrate AngularJS to Angular 8 with iframe

【发布时间】：2019-12-20 23:44:12

【问题描述】：

所以，我的客户希望我将他的 AngularJS 页面迁移到最新的 Angular 8 框架。 但他还想为当前的 AngularJS 应用程序添加一些功能。 工作流程如下： 1. 将 AngularJS 迁移到 Angular 8 2. 当旧代码中有新内容时，仍然维护旧的 Angular JS 应用程序。

该应用具有静态标题导航。所以我的想法是在 Angular 8 中构建标头，并通过 iframe 将旧的 Angular JS 应用程序放到 Angular 8 的根目录中。 因此，当用户单击 Angular 8 应用程序中的导航时，他会将路由器路由到正确的 Angular JS 应用程序，该应用程序将在 Angular 8 应用程序的 iframe 中呈现。

因此，这背后的想法是逐页迁移页面，但如果需要仍保留旧的 AngularJS 应用程序。

这可能吗？

我希望有人可以帮助我。

最好的问候

【参考方案1】：

首先迁移我建议你使用这个migration guide

其次，我在一个应用程序上工作过，我同时使用了 Angular Js 和 angular8，我遇到的唯一问题是 rootes，我无法在 angular 中使用 usr 路由。

我是怎么做到的？

我通过<script></script>在同一个jsp中调用了angular js和转置的angular 8文件 这是我的 jsp 示例，其中有一个名为 pointe 的 angular 8 应用程序和一个名为 employee 的 angulars js 应用程序

    <%@ include file="init.jsp" %>

    <link rel="stylesheet" href="/angulars/pointe/styles.css"/>

    <app-root></app-root>

    <script src="/angulars/pointe/runtime-es2015.js" type="module"></script>
    <script src="/angulars/pointe/runtime-es5.js" nomodule defer></script>
    <script src="/angulars/pointe/polyfills-es5.js" nomodule defer></script>
    <script src="/angulars/pointe/polyfills-es2015.js" type="module"></script>
    <script src="/angulars/pointe/scripts.js" defer></script>
    <script src="/angulars/pointe/main-es2015.js" type="module"></script>
    <script src="/angulars/pointe/main-es5.js" nomodule defer></script>

    <script src="/angulars/employee/js/angular.js"></script>
    <script src="/angulars/employee/js/app.js"></script>

我认为，如果您将脚本加载到 iframe 中，它也可以工作， 但是您必须以任何方式将所有这些代码包装在一个容器中。

最后我真的不建议你这样做，因为我在使用 angular js 和 angular 8 加载的库时遇到了很多麻烦