问题标签 [ng-upgrade]

我目前正在将我的 AngularJS (ng1) 应用程序升级到 Angular 2 (ng2)。

我正在使用 Angular 2.2.1 版。

当我从 @angular\upgrade\static 导入 UpgradeModule 时，出现以下异常： Uncaught SyntaxError: Unexpected reserved word Uncaught ReferenceError: webpackJsnop is not defined

我正在使用 WebPack V1.13.1。

当我使用 upgrade_adapter 方式时，我需要添加 @Inject 注释。

谢谢您的帮助。

我正在尝试从 '@angular/upgrade/static' 导入 import { UpgradeComponent }；使用 ngupgrade 在 angular2 中使用 angular1 指令，但我收到此错误。

代码：

我一直在尝试使用 ng-upgrade 作为 angular2 的升级策略，但成功有限，我已经成功添加了一个 angular2 应用程序并降级了它的组件，但实现不是很灵活。

我收到一条错误消息

ReferenceError：未定义 MainModule

似乎 UpgradeAdapter 必须在与 angular2 模块声明相同的文件中实例化 - 这在引入具有独立降级的多个单独模块时是一个问题。

我想我的问题是......它是使用 UpgradeAdapter 的正确方法吗？如果是，有没有办法将适配器定义和模块定义分成单独的文件？

plnkr 演示该问题：https ://embed.plnkr.co/ZPw9BVBVSZjYbfzkAkpl/

在使用 ng-upgrade 在大型 ng1 (V1.5.9) 应用程序（使用 ui-router）中使用一些新的 ng2 (V2.2.4) 组件的应用程序中，我目前看到一个非常奇怪的更改检测问题。据我所知，这已在 ng2 的某些升级中引入，但遗憾的是我目前无法轻松验证。

到目前为止，我已将其简化为一个最小的示例，其中仅包含此组件：

该组件在升级适配器中升级并注册为模块中的入口组件。

该组件在 ng1 控制器的模板中使用，如下所示：

当我打开浏览器并直接导航到该页面（ng1 控制器的路由）时，一切都按预期工作：ui 每 2 秒交替显示一次真/假。

但是：当我离开然后返回页面（访问一些不同的路线）时，突然变化检测似乎不起作用。显示的值大约每 5-6 秒交替一次，看起来很随机，尽管在控制台中我仍然看到预期值。

当我将组件的构造函数更改为此：

它突然又起作用了。

显然这不是一个可行的解决方案，因为我在真实应用程序中看到的行为要复杂得多（我可能不得不添加zone.run几十个地方，这将是不可维护的）。

我已经调试了几个小时，不明白发生了什么。在 Chrome 的 JavaScript 分析器中，我基本上看到页面在 5-6 秒内几乎一直处于空闲状态，没有任何反应。

这不是来自该演示组件的屏幕截图（但它基本上看起来相同），而是来自我最初测试的选项卡组件的分析（选项卡切换所用的时间与中间没有可见的操作一样长）。

更新：

经过更多的实验后，我发现非常令人惊讶的是，当我没有将状态更改代码放入zone.run调用中时，我添加了一个调用ApplicationRef.tick() （如此处所述，例如：https ://stackoverflow.com/a/34829089/ 1335619）它也根本不起作用。我不明白为什么强制进行完整的应用程序更改检测什么都不做，但是区域运行调用以某种方式起作用。

带有滴答调用的示例代码不起作用：

我想升级一个 ng1 组件以在 ng2 组件中使用。

如果我只使用要升级的 ng1 组件的模板字符串，它就可以工作。但是，如果我改用 templateUrl，应用程序会崩溃并给我这个错误：

这是一个演示我的问题的plunk：

https://plnkr.co/edit/2fXvfc?p=info

我遵循了 Angular 1 -> 2 升级指南，看来这段代码应该可以工作。我不太确定为什么它不起作用。

问题：

我无法让函数成功传递给降级的 Angular 2 组件。我已经尝试了几乎所有我能想到的传递东西的方法，但我只能通过字符串插值 -> some-attribute={{controller.property}} 获取传递的字符串。以下是我尝试过的一些事情（是的，我知道其中一些没有意义......）

设置：

这是我现有的设置，它适用于数据但不适用于函数：

Angular 1 用法

升级/降级适配器

Angular 2 定义

Angular 文档甚至展示了如何设置它，但没有给出任何实际使用示例。我错过了什么还是不能这样做？

我使用 ng-upgrade 将我们的 Angular1 应用程序引导为混合应用程序。我有 AOT 正在编译包含 1 个虚拟组件的 Angular2 脚本。我还捆绑了其他文件并在生产模式下运行 Angular2。

作为混合应用程序，我们的应用程序的性能平均比独立的 Angular1 应用程序慢 2.5 秒。（注意这是一个包含很多组件的大型应用程序）

由于下载的额外文件和涉及的额外脚本，我预计性能会受到影响，但影响出人意料

我们计划开始将我们的组件迁移到 Angular2 并降级它们，以便它们可以与 Angular1 一起使用，但我想知道，降级的组件在被 AOT 编译后会再次编译吗？

如果是这种情况，那么在迁移每个组件并且我们放弃 Angular1 之前，我们不会看到性能改进，这是一个很长的路要走。

有没有人走这条路或可以提供一些信息？

My app component (an Angular 2 component, downgraded for index.html) contains this:

This is just like it says to do in "Dividing routes between Angular and AngularJS" https://angular.io/docs/ts/latest/guide/upgrade.html#!#adding-the-angular-router-and-bootstrap

But the ng-view isn't picking up any AngularJS routes.

How would ng-view work in an Angular 2 template anyway? How am I supposed to be able to use both types of routers at the same time?

<router-outlet></router-outlet> isn't working either -- this html just shows up on the page statically as-is.

I have <base href="/"> and the javascript console has no errors in it.

Google, message me :) who/ajxtaylor

我目前有一个使用 angular-cli 的混合 Angular 应用程序（2.4.9 和 1.5.0）。目前，在运行我们的应用程序时，我们能够正确引导 1.5 应用程序：

但是，在我们的test.ts文件中：

我不完全确定如何将我们的 1.5 应用程序引导到测试环境中，我所得到的只是Module 'myApp' is not available!，我的 Google 技能无法找到一个示例。

我已经为此挣扎了将近一天，所以我认为是时候放弃并寻求帮助了。

我从一个简单的 AngularJS 应用程序 (1.4.7) 开始，它应该只显示“来自 Angular 1 的问候”，并且一直在尝试将该应用程序引导到一个简单的 Angular2 CLI 生成的应用程序中。

它似乎不起作用。我看到的不是“来自 Angular 1 的问候”，而是“{{angular1Msg}}”。以下提交准确显示了我为包含和引导应用程序所做的工作。我现在花了很多时间处理文档，但不确定我错过了什么。

任何帮助将不胜感激！

项目回购： https ://github.com/scottschafer/ng2hybrid

我尝试集成 AngularJS 应用程序的提交： https ://github.com/scottschafer/ng2hybrid/commit/4b2c7c5339388ec2b3debeae0643dff89b75926f

（请注意，AngularJS 应用程序的源代码位于 src/ng1app 中，并且是一个工作的独立 AngularJS 1.4.7 应用程序）。