问题标签 [angular-hybrid]

我找到了描述如何将 Angular (2) 组件集成到 AngularJS 中的资源，但所有这些都涉及像 Angular 项目一样设置 AngularJS 项目，需要来自 TypeScript 的转译器，需要 ES6，需要导入语句。我想在我的 AngularJS 应用程序中简单地使用 Angular 组件，而不会破坏我现有的工作流程。这可能吗，如果可以，我该如何实施？我以为这是升级模块的目的，但是我看到的所有教程都需要 AngularJS 应用程序中的 import 语句，这需要一个转译器。如果 Angular 应用程序需要提前转译，那没关系，但 AngularJS 应用程序无法转译，因为它运行在 django 服务器上，我不想用转译器运行另一台服务器。

需要明确的是，我当前的 AngularJS 应用程序由 django 提供服务。我想包含一些 Angular 组件。这些在开发过程中不会被触及，因此可以在不影响工作流程的情况下提前进行转译。有没有办法在不向 AngularJS 应用程序添加转译器的情况下将这些组件添加到 AngularJS 应用程序中？

我正在尝试使用 Angular 2+（在撰写此问题时为 Angular 4.1.0）引导 Angular 1.X 应用程序。我遵循了T 的在线指南，但似乎无法取得进展。

我使用的是 ES2015+（通过 Babel 编译）和 TypeScript 的混合体。一切都正确编译，我可以分别成功运行 Angular 1 和 Angular 2。如果有区别的话，它们会使用 Webpack 一起编译。

这是我的 Angular 1.X 入口文件 ( app.ts) 的大致样子：

为简单起见，我从主应用程序中删除了所有依赖项，以确保它不是 run/config 函数或依赖项之一。我已经使用 config/run 函数进行了测试，以查看是否有任何运行或抛出错误，但它们没有。

然后我有一个 Angular 2+ 应用程序的入口文件（我也将它用作 Webpack 的入口文件）main.ts，它看起来像这样：

console.log('app', app)该过程在该行之后失败。日志显示，这app确实是 Angular 1.X 应用程序的一个实例。但是引导过程仍然失败。

关于我做得不对的任何想法？

编辑

这是我的app.module文件：

编辑2

我的预感是 Angular 2+ 依赖于 AngularJS 1.X 已经在窗口对象上。我在一个模块中运行 AngularJS 1.X。我会在工作时更新。我在下面回答了一些评论。目前，我正在使用尽可能简单的示例，对于 AngularJS 1.X，我实际上正在运行一个准系统应用程序，如果它被引导通过.run

编辑 3

我在下面发布了一个答案。它归结为main.ts文件（入口文件）中导入的顺序。只需在导入之前导入 AngularJS 1.X 应用程序即可zone.js解决问题。

我正在研究将当前 Angular 1 项目迁移到 Angular 4 的方法。

选项是ng-forward、ngUpgrade或rewrite。

我正在考虑重写它，但有一个转折。

• 我保留当前的应用程序
• 开始写与之平行的新的
• 所有新的 NG4 重写，我想使用......换句话说，一点一点。

有没有人尝试过或知道更好的方法？

我有一个 Angular 1 和 Angular 2 混合应用程序，它使用以下指南进行设置，从 AngularJS 升级和将Angular 1 应用程序迁移到 Angular 2。我的根组件如下所示：

我的“main.ts”如下：

模块“MyModule”如下：

而“TestDataListComponent”组件非常简单：

我链接到 Angular 2 组件的方式是在主菜单 HTML 页面中。相关代码如下：

我遇到的问题是单击上面的链接会将我带到一个空白视图，即未显示组件TestDataListComponent 。但是，如果我在我的主要 Angular 2 模块中替换以下行，即Ng2AppModule：

和：

组件TestDataListComponent显示正常，但是当我尝试通过单击链接导航回 Angular 1 组件时，页面是空白的，我注意到浏览器窗口中的 URL 如下所示：

http://localhost:60813/#/

虽然它应该看起来像这样：

http://localhost:60813/#/myclients

如果我再次单击该链接，则 URL 是正确的，并且 Angular 1 组件显示正常。

我的 Angular 1 模块angular1App的相关部分是：

这里有什么问题？为什么我的 Angular 2 或 Angular 1 组件现在出现了？

我有一个混合 AngularJS (1.7.0) 和 Angular 6 应用程序。我还使用@angular/upgrade 模块来升级/降级组件和服务。我已经使用自定义 webpack 让它工作了，但现在我想转向 angular-cli。

任何人都可以提出最好的方法来做到这一点。

我在想 ：-

将 Angular 6 移至 Angular Cli 并使用自定义 webpack 构建 AngularJS。但我不确定当我们在升级/降级的组件之间导航时会发生什么。

我有客户在 Angular 1.5.8 中开发产品。想在与 Angular 6 相同的产品中创建一个包含 3 个页面的模块。是否可以进行这样的设置？

我有一个混合 Angular 应用程序，它同时使用 angularJS 和 angular 5。

我正在将一个控制器从 angularJS 迁移到 angular 5。这个控制器（我们称之为 controller1）具有以下代码：

然后，我有另一个控制器（我们称之为 controller2）订阅goToHomeEvent：

我的目标是只将控制器1迁移到角度5，维护控制器2的代码，保持订阅goToHomeEvent事件的能力。

有什么建议么？

我只是在我的大型 angularjs 应用程序中使用了一个名为gridster的 Angular 组件库。为此，我将我的应用程序混合在一起，因为将来我们计划将我们的应用程序升级为完全在 Angular 上。我正在使用 1.4.3 angularjs 和 6.0 angular 版本。

提出我的申请后，它变得非常慢。

请有任何建议。

大多数模块和指令都是 angularjs，我遵循了 angular 文档中提供的标准升级方法。降级的角度网格组件。

我有一个旧的 AngularJS 应用程序，我正在尝试使用 Angular 6 UpgradeModule 实现就地升级。我可以让所有代码执行——我正在通过 Angular 6 和 AngularJS 应用程序按预期注销状态。

问题是我完全无法将任何东西绑定到 DOM。

因此，在新 Angular 6 应用程序的核心 AppModule 中，所有文档和示例都使用 NgDoBootstrap：

this.upgrade.bootstrap(document.body, ['angularJS-app-name'], {strictDi: true});

我可以执行那个。我可以通过 UpgradeModule 看到我的 AngularJS 应用程序引导（通过 console.logs）。我可以看到我的 Angular 6 应用程序被引导（通过 console.logs）。但是没有任何东西与 DOM 绑定。

注销document给了我我期望的 HTML 文档。我可以在 Chrome 控制台中手动检查它，并查看我期望的所有元素。但所有document方法和属性似乎都返回 null。

document.body： 无效的。

document.getElementById('an-elementId-I-can-see-when-logging-out-document')： 无效的。

告诉我我只是在做一些愚蠢的事情，比如没有正确注入一些东西，因此 Angular/TS 的解释document与 vanilla JS 的解释不同。

主应用程序.ts

相关的html

我浏览了一些文章，它说如果你想提高性能，你可以将 ngZone 设置为 noop。

我的应用程序是混合的（angular 和 angularjs 组合），有人知道 angularjs 组件中所做的更改是否也会触发 Angular 中的更改检测。

如何提高混合应用程序的性能