问题标签 [angular-upgrade]

完成从 Angular 5 到 8 的升级后，除了 Material 模态对话框之外，几乎所有东西都可以正常工作。使用浏览器调试器，我们可以看到结构在 DOM 中，但它们没有被绘制出来。我们最初使用的是 No-op animator 模块。当我将它切换到 BrowserAnimations 模块时，会出现动画对话框，但是一旦动画完成，它就会在视觉上消失。它仍然在那里，您可以与它进行部分交互——如果您单击应呈现关闭按钮的位置，对话框将关闭。（您可以说这是因为“玻璃”/灰色屏幕盖消失了。）我们已经修复了所有单元测试 (2500+)，它们运行 100% 干净，并且大多数应用程序都按预期工作。只是对话框在视觉上消失了。

我已经尝试过的事情：

1. 通过 Chrome 调试工具将各种项目的 z-index 设置为荒谬的值 (25000)
2. 通过调试器将 CSS 显示属性显式设置为“阻止”各种元素
3. 将 CSS 可见性显式设置为“可见”
4. 将 CSS 不透明度显式设置为“1”
5. 验证对话框组件都列在它们所在模块的 EntryComponents 中（并且该模块已导入主应用程序模块）

Angular 5 一切正常——这绝对是升级的副作用。我怀疑这可能是 Material 与我们正在使用的其他模块的交互，这些模块曾经一起玩得很好，但现在不再这样做了。但是，我不确定那可能是什么或如何弄清楚。为此，这是我们正在使用的（package.json extact）：

在我的 app.module.ts 我有以下内容：

然后将 ModalTemplatesModule 定义为：

我们确实为我们所有的模态创建了一个包装器，然后我们将特定的对话框内容放入其中。所以如果代码有问题，很可能在这个类中。但这很简单...... ModalWrapper 模板：

实际的标签位于通过 .

模态包装组件

在这一点上，我对它为什么消失以及如何修复它的想法已经不多了。希望其他人遇到此问题并认识到问题并知道如何解决它！

更新：如果我使用 Chrome 的 WAVE 辅助功能插件并“禁用所有 CSS”，对话框元素会出现在屏幕底部。所以这表明这是一个与风格相关的问题。还有其他方法可以“隐藏”某些东西吗？

我正在尝试将用 AngularJS1 编写的组件升级到 Angular6。在我的示例中，我正在通过扩展放置在文件夹“”下的“ UpgradeComponent ”来为所有现有的 AngularJS1 组件提供包装器。directive-wrappers我已经在本地编写了这个应用程序，它适用于 2 个组件TestDirectiveWrapper和TestDirective2Wrapper.

但是当我包含第三个组件TestDirective3Wrapper时，在加载应用程序时出现控制台错误

为了在线模拟相同的应用程序，我在 stackblitz 中创建了相同的angularjs指令及其包装器，但在这里我得到了一个不同的错误。

谁能帮我解决这个问题并让我加载所有 3 个组件？

我的项目目前是 5.2 版本，并且想升级到 Angular 7.2.15 版本，如何以最简单和最快的方式进行操作，请按照我的依赖项 package.json

您可以看到它与 angular 5 和一些与 ng2 的依赖关系-...但是我认为您可以悄悄地更新每个库

我只是想知道从升级到7.2.15版本的角度我可能会改变什么，因为我认为这是不要过多破坏依赖关系的最佳时机

我正在尝试将用AngularJS1编写的组件升级到Angular6。在我的示例中，我正在通过扩展放置在文件夹“directive-wrappers”下的“ UpgradeComponent ”来为所有现有 AngularJS1 组件提供包装器。

在加载应用程序时，我收到控制台错误

为了在线模拟相同的应用程序，我在 stackblitz 中创建了相同的angularjs指令及其包装器

我有一个运行 .Net Framework 4.6.1 和 Razor 和 AngularJS 1.7.5 的 .Net Web 应用程序，我们希望迁移到 Angular 8。

• 路由正在.Net 中完成。
• HTML 包含用于呈现 UI 的 Razor 和 AngularJS 逻辑。

示例 Razor/Angular HTML：

示例 AngularJS 逻辑代码：

1. 我们希望进行混合迁移。这可能吗？
2. 从头开始重写应用程序会更容易吗？
3. 我们有哪些选择？

编辑：这个问题是独一无二的，因为它涉及将服务器端渲染的 AngularJS .Net 应用程序 - 不是客户端迁移到 Angular 8。我听说过 Angular Universal 可以做到这一点，但我想知道其他选项以及混合方法是一种可能。

我正在尝试将用 AngularJS1 编写的组件升级到 Angular6。在我的示例中，我正在通过扩展放置在文件夹“ directive-wrappers ”下的“ UpgradeComponent ”来为所有现有的 AngularJS1 组件提供包装器。当我尝试添加一些没有任何指令的控制器时，我收到错误消息

我尝试添加 studentController 和 homePageController，但无法加载它。任何想法为什么我会面临这个问题？ https://stackblitz.com/edit/ng6hybrid-c8h6uv

我主要对这一行在他们的文档中的影响感兴趣：

与 UpgradeModule 不同，downgradeModule()它不会在 Angular 区域内引导主 AngularJS 模块。

这是否意味着只有应用程序的初始引导程序将在 Angular 区域之外运行？或者，实例化的服务、工厂等是否也会在 Angular 区域之外运行？

如果它只是最初的引导程序，那么如何在 Angular 区域之外运行 AngularJS 端的特定部分（主要是出于性能原因）？

一个解释我为什么感到困惑的简单示例是一个 AngularJS 服务，它执行以下操作：

在此示例中，单击处理程序发生在 AngularJS 中的更改检测之外，这就是scope.$apply需要的原因。

然而，Angular 变化检测是另一回事：

首先，有一些事件被修补以在角度区域内自动工作。

其次，我注意到如果服务是从 a 内调用的UpgradeComponent，它在 Angular 区域内，但看起来如果它是从应用程序的另一部分调用的，而不是源自 an UpgradeComponent，那么它不在区。

这仅仅是因为它被升级的组件调用了吗？如果是这样，是否有一些标准的解决方法可以让这段代码在 Angular 区域之外运行，比如在引导期间或在UpgradeComponent? 或者甚至尝试这样做是不好的做法（比如它会导致 Angular 和 AngularJS 之间的同步问题）？

如有必要，我可以尝试制作一个最小的示例。

编辑： 这不完全是我正在使用的环境（就角度版本而言），但这是我正在谈论的角度区域行为的一个示例。

我正在尝试将我的 Angular 应用程序升级到 Angular 8、webpack 4。出现以下 3 个错误： TS2339: Property 'decorate' does not exist on type 'typeof Reflect'. TS2539: Cannot assign to 'HeroComponent' because it is not a variable. TS2306: File 'C:/Users/SS/Documents/angularupgrade/Test/client/app/hero.component.ts' is not a module.

我的英雄组件：

I'm trying to use storybook with my hybrid (Angular + angularjs) app.

My Angular component works. But my angularjs component fails with:

HybridWrapperComponent.html:1 ERROR Error: Trying to get the AngularJS injector before it being set.

I understand that this part is missing:

But how do I add it to storybook module?

Have you had experience using storybook for angular hybrid applications?

Cheers

P.S. How's the weather? Stack overflow want's more text that is not code...

背景信息： 之前在这个 github 问题UpgradeComponent中提出了一个相当常见的问题，即在动态加载的入口组件中使用 s 时出现注入器错误。我觉得我对此理解得很好，并且能够通过使用与此答案类似的解决方案来正确注入范围：

我绝对想知道这个解决方案是否存在我不知道的陷阱，而不是github 问题中提到的注入器解决方案。

但是，这不是我主要关心的问题。我主要担心的是，即使使用正确的Injectorand Scope，UpgradeComponent仍然存在组件上的初始值没有被 angularjs 检测到的问题，因为$digest在创建组件后没有发生任何事情。这可能是组件加载器的具体问题ngx-bootstrap，而不是 angular 的一般问题，但我目前不确定。我现在想出的解决方法是Scope.$evalAsync()在构造函数的末尾调用UpgradeComponent，但我不确定这是否是正确的方法，这就是我问这个问题的原因。

这是我修复的逻辑示例：

我有点基于这个角度代码。

TL; DR： 这也是这个问题的简单重现，包括我的修复。