问题标签 [angular-hybrid]

我有一个非常大的混合 Angular 应用程序；原始应用程序是 angularjs 1.6.8，其余的是 Angular 7.2.15。我们正在努力将整个应用程序转换为 Angular，但进展缓慢。我们的应用程序还依赖于 angular-ui-bootstrap (2.5.0) / ngx-bootstrap (3.1.3)。

我们的每个重要视图都是延迟加载的，但登录页面除外。我目前正在尝试转换其中一种观点。

我们的 App 模块导入ModalModule.forRoot(). 在我尝试在降级服务中访问它之前，这很有效。例如，我有一个名为“Account”的路由，其中​​包含一个服务名称AccountModalService，并创建了这个降级：

现在从我的 angularjsAccountPage我应该能够像这样打开一个模式

我知道当openTestModal从 Angular 组件调用该方法时模态有效，但是当我尝试从 angularjs 组件启动它时。我得到错误

如果我更改AccountModalService为存在于根注入器上，像这样@Injectable({ provideIn: 'root' })，我会收到一个错误，表明注入器找不到模态要显示的组件：

这TestModalComponent是一个entryComponent延迟加载AccountModule的模块，该模块导入我急切加载的公共模块。但果然，不是TestModalComponent一个entryComponent。AppModule

如果我将我的测试模态组件和此服务移动到预先加载的代码中，它将正确打开模态。然而，这只是使预先加载的模块成为整体的第一步。这不是我想继续的模式，因为它使延迟加载的路由变得毫无价值。

有没有办法降级使用 ngx-bootstrap 模式的角度服务，以BsModalService在延迟加载的路线中显示来自 angularjs 代码的模式？有没有人成功做过类似的事情，愿意分享如何？

我最近刚刚将一个遗留的 AngularJS 应用程序转移到一个 Angular9 shell 中，以促进更平滑的迁移。

尽管能够通过 AngularJS 路由器渲染我的 Angular9 组件，但 Angular9 组件似乎是从引擎盖下的 AngularJS 内容包装器继承 ng-scope。

我尝试寻找此解决方案的修复程序，但我无法找到类似的问题。

最好的，SC

附录：

我有这个似乎没有工作的尝试修复，我正在使用 AngualrJS 1.6。

附录：

解决方案的实施是错误的，以下工作：

最好的

我有一个混合 Angular / AngularJS 应用程序，其中在 AngularJS 端我使用包含 Angular 组件的 Angular 应用程序中的服务来引发模式窗口。一切都很好，模态被提升，显示的组件但是组件具有mat-select包含 a 的mat-select-triggeramat-chip-list并且使用 a 生成选项ngFor。它可以工作，但有时当我单击选择时它没有响应，有时它是完美的。在这种情况下，单击选择但未显示选项，直到我单击或选项卡界面时才会发生任何事情。

这是我的模板代码：

这是我的代码文件（打字稿），我没有添加所有代码，因为有些方法不相关。

起初我认为 API 返回的公司数量可能是问题，但我在调试时将其减少到只有 20 个结果。混合应用程序中的更改检测一定有问题。有没有人经历过这样的行为？我想可能会在单击 mat-select 或单击时触发更改检测mat-select-trigger，但我还没有尝试过，因为我知道我无法将单击事件添加到mat-select-trigger，我将尝试使用mat-select但是如果有人以前经历过这种行为，并且对如何解决这个问题有一些想法，我将不胜感激。

我开始开发一个混合应用程序。所以我做了以下步骤：

• 添加 Angular 8 依赖项
• 添加polyfills.ts
• ng-app从我的根 index.html中删除属性
• 手动引导 AngularJs 应用程序

我的 Angular 初始化模块看起来如何：

我的 index.html 看起来如何：

main-header、console-menu - 是 AngularJS 组件。当然，该配置在ng-app呈现时效果很好。

我的期望。混合应用程序就像旧的 AngularJS 应用程序一样启动，我可以看到登录页面、起始页面等。

我实际上得到了什么。AngularJS 应用程序实际上是在引导。我可以看到方法 app.module().run(...) 执行。但是没有加载任何组件，所以我只看到一个空白页。

我正在努力将大型 AngularJS 应用程序升级到 Angular 5+。这意味着在混合 AngularJS 应用程序中使用新的 Angular 5 组件。在许多情况下，表单嵌套在其他表单中。旧的 AngularJS 代码有这样的父表单：

和子窗体类似：

这导致 PersonDirective 的 FormController 具有地址表单作为嵌套的 FormController 字段，称为addressForm。子表单中的验证错误会影响父表单的有效性。

我已将地址表单转换为 Angular 5 组件，将 AngularJSng-form和ng-required指令替换为标准 HTML：

新组件被降级以index.ts在 AngularJS 中使用：

并且修改了 PersonDirective 模板以使用新组件：

新组件按预期显示和验证。问题是它不再作为字段出现在父表单中，其有效性和状态也不再传播给父表单。一次转换所有表格是不可能的。任何人都可以提出解决方案吗？

我想知道如何用 AngularJS 代替 Angular 做这样的事情：

我一直在尝试这样做，但我不确定这是不是正确的方法，因为它不起作用而且 Angular 也没有抱怨。

所以我试图从nodes_renderer.html制作我自己的自定义标签，但我想要一些关于哪种方式更好地实现这一点的输入。

值得一提的是，我的“< li >”标签正在另一个自定义“组件”元素标签中使用，该标签是我在 Hybrid AngularJS-Angular 应用程序中仅使用 css 创建的（因此它没有模板），其中我正在降级 Angular 组件。

我对混合方法和 Angular JS 很陌生。我需要将 AngularJS 项目（现有）的几个屏幕迁移到 Angular9。

当前的 AngularJS 项目使用基于控制器的 angularjs v.1.4，GULP 作为任务运行器，SASS 用于 CSS。

您能否让我知道如何在 AngularJS 中拥有基本应用程序并集成 Angular9 的几个屏幕。让 JS 和 9 一起工作的逐步过程。

任何建议都会有很大帮助。

[编辑] 我创建了一个带有此错误的演示存储库：https ://github.com/SamanthaAdrichem/hybrid-lazy-load-angularjs-injector-error

我们已经按照说明进行操作，并且在普通混合上运行良好，但是添加延迟加载失败并出现上述奇怪错误，并且始终按照文档所说的方式实现 ui 路由器（如您在下面的代码中所见）。

加载应用程序时一切正常，但是当单击延迟加载的路线时，我们会收到错误消息

转换拒绝（$id：0 类型：6，消息：转换错误，详细信息：错误：在设置之前尝试获取 AngularJS 注入器。）

我已经尝试过这里列出的解决方案

https://github.com/ui-router/angular-hybrid/issues/93

https://github.com/ui-router/angular-hybrid/issues/150

https://github.com/ui-router/angular-hybrid/issues/395

https://github.com/ui-router/sample-app-angular-hybrid/issues/10

但这些都不能解决它。我们不使用 ng serve 因为它会因随机内存问题而崩溃（也可能是由于混合），我们需要代理到登录页面，但是登录页面和我们的项目将在同一个端口上运行，这不是不可能。所以这需要在后端进行一些重构。

它有时会根据我要去的页面加载一个新的块文件。但主要是我得到这个错误。

有趣的是，在我正在测试的页面中，我们没有使用任何混合代码。基本上我们不再升级任何代码，我们只是降级一些观察者以打开旧页面的模式。

这些是我们正在运行的版本

在详细的错误和一些代码下面，不知道还有什么可以分享或我可以安全地分享什么。

关于如何调试它的任何建议都会很可爱！

详细错误

我们的 main.ts

我们的 app.module.ts

admin-routing.module.ts

然后是管理模块

例如 search.module

如您所见，使用搜索路由模块尚未延迟加载，当引入该模块时，我们将在管理模块中包含搜索路由模块，并在路由模块中引用搜索模块

我们的 angularjs 模块

AngularJS 服务：

角度升级：

现在我可以在 Angular 组件或管道中使用该服务：

我在测试这个管道时遇到了问题。

这会引发以下错误：

NullInjectorError：$injector 没有提供者！

我曾尝试在createAngularJSTestingModule和createAngularTestingModule上查看https://angular.io/api/upgrade/static/testing/ ， 但没有任何运气。

一旦我将 AngularJS 模块拉入测试，我就会收到错误消息，即没有加载程序来处理 angularJS 模块中的 .html 文件类型。

如何将升级的 AngularJS 服务注入 Angular 测试组件？

我已经使用 Angular 升级设置了 Angular Hybrid 设置以实现性能方法，并且能够毫无问题地运行应用程序。

但是，我在运行 Angular 端测试用例时遇到了问题，我提供了组件、规范和所有相关的片段。任何人都可以帮助我解决可能是什么问题以及如何解决它。

如果需要更多详细信息，请告诉我

角组件：componentA.ts

Angular 组件规范：componentA.spec.ts

错误