问题标签 [angular-upgrade]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angularjs - Angular UpgradeModule:在应用程序引导期间无法获取要绑定的元素
我有一个旧的 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
angularjs - 手动引导混合应用程序
如何手动从 Angular 6 引导这个 angularjs 1 应用程序?
作为起点,我有一个工作的 angularjs 1 应用程序:fe和一个用 angular-cli 创建的纯 angular 6 应用程序。
第一步是添加必要的依赖项,如 angular、@uirouter/angularjs、@angular/upgrade、@types/angular 到 package.json,并在 angular.cli 中填充脚本部分:
然后我将 angular 1 应用程序放到 /app/script.js 和 /index.html
我<body ng-app="helloApp">
从 index.html 中删除了,所以修改后的 index.html 看起来像这样:
为了从角度 2 引导角度 1,我将 ngDoBootstrap() 添加到 app.module.ts 并删除了 bootstrap[AppModule] 部分:
不幸的是,这不起作用。我收到错误消息:
“错误错误:“[$injector:modulerr] http : //errors.angularjs.org/1.7.2/$injector/modulerr?p0=%24%24UpgradeModule&p1=%5B%24injector%3Amodulerr...”
这个概念有什么问题吗?
angularjs - 当后台浏览器选项卡时,Angular / AngularJS升级应用程序无响应
我有一个 Angular/AngularJS 升级应用程序,目前正在将所有内容从 AngularJS 迁移到 Angular。这是一个相当大的项目,所以我绝对需要采用升级方式。
我使用@uirouter/angular-hybrid 并且有一个仍然是AngularJS(导航和东西)的根状态和一个子视图。在这个子视图中,我现在正在慢慢地将所有组件升级到 Angular。出于性能原因,我不得不使用 downgradeModule() ( https://angular.io/guide/upgrade-performance ) 而不是 UpgradeModule。
对于 UI 组件,我使用 Angular Material 2。
设置这么多,现在到问题/问题:
当带有页面的选项卡在后台并且您稍后(至少 5 到 10 分钟)返回该页面时,整个页面会滞后并且无响应。你离开的时间越长,标签在后台的时间越长,滞后的时间就越长。
我已经尝试/发现的:
- 似乎注册了事件,但由于选项卡在后台,因此它们不会执行,而是在您返回选项卡后同时执行。这是分析的屏幕截图
- 删除 Angular 变化检测和使用
ngZone: 'noop'
没有效果 - 禁用所有动画无效
- 启用 Angular 生产模式稍微改善了一点(也可能是一种错觉),但问题仍然存在
- 我在 Chrome 中开发,其他浏览器(例如 Firefox、Safari)也存在问题
- 仅当路由器视图组件是 Angular 组件时才会发生,AngularJS 视图组件似乎不受影响
我目前正在开发一个干净的示例应用程序来重现该问题并提供更多上下文以进行进一步测试。我会尽快添加它。
库版本
角度:6.1.0
AngularJS:1.7.2
zone.js:0.8.26
@uirouter/角混合:6.0.0
更新(2019 年 8 月)
当前的 Lib 版本 Angular 8、AngularJS 1.7.8 和 uirouter/hybrid 8 仍在发生
angularjs - 需要帮助从 AngularJS 迁移到 Angular 6
我有一个旧的 AngularJS 应用程序,我想使用混合应用程序方法迁移到 Angular 6。
在我这样做之前,我想遵循升级教程: Phonecat升级教程
所以我克隆了 Phonecat AngularJS 应用程序并按照步骤操作。我被困在“升级电话服务”步骤。
问题在于“从'...'导入{...};” 在“phone-list.component.ts”文件中。当我删除导入并用“any”替换类型时,它可以工作。添加导入后,Chrome 中出现以下错误:
出口未定义
我昨天整晚都在搜索,找到了一些解决方案,但没有一个有效。也许是因为我发现的文档必须是 6 之前的 Angular 版本。
有人说最近的浏览器应该处理导入,其他人说我们不应该使用 SystemJS ......我有点迷茫。
谢谢你的帮助。如果您需要更多详细信息或文件,我很乐意更新我的问题。
这是 phone-list.component.ts
这是 phone-list.component.js
这是我的 tsconfig.json
这是我的 system.config.js
这是我的html文件
vue.js - 将 Vue.js 迁移到 Angular 6。欢迎提示?
需要从 vue.js 迁移到 Angular 6。是否有更好的方法开始并且需要最佳实践作为两个框架的新手。
angularjs - @angular/upgrade/static 404 未找到
我在 AngularJS 中有应用程序,我正在尝试使混合应用程序能够在 Angular 5 上迁移。但不幸的是我有错误:
它发生在我在 app.module.ts 文件中添加“UpgradeModule”之后,在imports
声明中:
导出类 AppModule { }
我的 package.json 看起来像这样:
我所做的步骤:转到 package.json 文件夹,运行“npm install”,安装了insight node_modules/@angular/upgrade 文件夹。但是当我运行应用程序时出现错误:
如果我评论 UpdateModule 洞察导入,app.module.ts 文件,该错误就会消失
请任何人提供任何建议,我可以做些什么才能成功地将“UpgradeModule”导入我的 app.modules.ts 文件,以便能够使我当前的 AngularJS 应用程序混合并使用 Angular 5 洞察力?
如果您需要更多描述或代码示例,请告诉我
angularjs - 将 Angular 和 ui 线程与 web 工作者解耦,它在升级项目中是否有效?
我遇到了将 Angular 与 ui 线程分离以提高前端响应能力和性能的可能性。
典型单页应用程序 (SPA) 中的常见问题是我们的代码通常在单线程中运行。这意味着,如果我们想要以 60fps 实现流畅的用户体验,我们在渲染各个帧之间最多有 16ms 的执行时间,否则它们将下降一半。
在具有巨大组件树的复杂应用程序中,更改检测需要每秒执行数百万次检查,开始丢帧并不难。由于 Angular 的平台不可知性以及它与 DOM 架构的分离,它可以在 Web Worker 中运行我们的整个应用程序(包括更改检测),而让主 UI 线程只负责渲染。
https://github.com/mgechev/angular-performance-checklist#web-workers
当我们使用 downgradeModule 并行运行 angularjs 和 angular 时,这是否有效?我们有一个巨大的应用程序,这真的可以帮助我们。
angularjs - Angular 从 1.6.6 升级到 6 时出现 $Injector 错误
我使用 Webpack 4 从 Angular.Js 1.6.6 升级到 Angular 6:
创建了自定义别名,为 tsconfig 添加了正确的路径,Webpack 构建通过并产生输出,但是当应用程序在浏览器中启动时,控制台中的错误弹出窗口:ngRoute is missing or wrong ng module components 什么没有正确完成以及如何修复这个错误?
angular - (SystemJS) 导出未定义
我正在将应用程序从 angular 2 升级到 angular 6。升级 rxjs 也在途中,并安装了 rxjs-compact。尝试运行应用程序时出现此错误。错误、systemjs.config.js、tsconfig.json 和 package.json 包含在此处。
错误:
systemjs.config.js:
tsconfig.js:
包.json: