问题标签 [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 - ng1 中带有布局/导航的 Angular 1+2 混合应用程序
根据 Angular 的升级指南,混合 Angular 1+2 应用程序设置如下:
此代码会将应用程序连接为 Angular2,引导初始组件,然后连接 Angular1 应用程序。
问题是当您在<router-outlet>
、<ng-view>
或<ui-view>
. Angular 将在 Angular1 连接之前尝试引导这些组件。这会导致以下错误:
这是我的 Bootstrapped 组件的 HTML:
sb-app-home 是我的 Angular 1 元素。以下是它在 Angular 2 模块中的注册方式:
如何让 Angular 1 组件在导航/布局/等路径之外工作?
angular - 意外的令牌导出 - Angular 2
我正在尝试从 '@angular/upgrade/static' 导入 import { UpgradeComponent };使用 ngupgrade 在 angular2 中使用 angular1 指令,但我收到此错误。
代码:
angularjs - 如何强制 webpack 加载库的 umd 包
我正在编写一个 angular1 + angular2 混合应用程序,它使用 webpack 作为包捆绑器。
在我的代码中,我以这种方式导入库(@angular/upgrade)
Angular 升级库位于 node_module 文件夹中,具有以下树结构(简化):
问题是,默认情况下 webpack 解析我的 import 语句加载 @angular/upgrade/static.js,一个 ES6 文件,一旦与其余代码捆绑在一起就会产生错误。
我希望 webpack 做的是加载 @angular/upgrade/static/package.json ,其中包含指向 umd 包的正确主定义
这是可以实现的吗?
谢谢, 加布
javascript - 您可以在 Angular 2 应用程序中使用 Angular 1 视图吗?
我正在开发一个用 Angular 2 编写的应用程序,我们有许多从另一个应用程序用 Angular 1 编写的视图,我们希望在 Angular 2 应用程序中使用这些视图,并进行一些小的更改。这可能吗?我对此进行了一些研究并阅读了一些教程,但它们似乎都是基于将 Angular 1 项目升级到 Angular 2,而不是在现有的 Angular 2 项目中使用 Angular 1。为了实现这一点,我是否需要在 Angular 1 中重写我的 app.module.ts 和路由文件,如果需要,是否还有其他文件需要重写?
angularjs - 将 AngularJS 组件升级到 Angular:没有提供 ElementRef 异常的提供程序
我们正在让 Angular 启动并在我们的 AngularJS 应用程序中运行,但我遇到了混合升级和降级组件的问题。
这是我当前问题的结构
最外层是我们的主要应用程序。
下一层是我的新 Angular 组件,它已降级,因此我可以在我的应用程序的 AngularJS 部分中使用它。(它以 ui-router 状态加载)。
最后一层是一个 AngularJS 组件,它已经升级为在 Angular 组件中使用。
最后一层是触发问题的原因。升级时(按照angular.io上的文档),它开始抛出此错误:
这里有一些片段可能会提供帮助所需的信息
AngularJS 组件:
升级到 Angular:
Angular 组件模板中使用的 AngularJS 组件
*ngIf
解析另一个元素,因此(click)
在元素位于 DOM 中之前不会引发异常。如果我删除*ngIf
,则立即引发异常,但源自代码的另一部分。
我担心问题在于组件的嵌套,但我没有证据。
angularjs - 将 AngularJS 应用程序升级到混合 Angular-1.6 / Angular-4 会杀死性能
我刚刚按照Angular 4 升级指南更新了我的 AngularJS 1.6 应用程序。基本上我在 Angular 4 中添加了新的 Angular 4 依赖package.json
项,通过引导应用程序UpgradeModule
并在 Angular 4 中创建了一个新的简单组件。一切都按预期工作,但性能真的很差!
该应用程序是一个仪表板应用程序,具有潜在的大量小部件组件和大量到后端的 http 请求以填充每个小部件内容。
根据仪表板的不同,升级后的应用程序加载和显示仪表板的速度要慢 2 到 5 倍,并且 chrome 网络控制台显示 http 请求是按顺序运行的,而不是像 1.6 版本那样一次性全部执行。总体而言,用户界面也不太流畅。
我已经玩过ngZone
并尝试在角度之外运行请求,zone.runOutsideAngular(() => { ... })
以减少由于更改检测而导致的刷新成本。结果比原来的 1.6 版本稍快,但仍然慢得多。
升级到混合 1.6-4 应用程序以保持出色的原始性能时,是否需要考虑一些事项?谢谢!
javascript - 引导混合 AngularJS 和 Angular 应用程序导致渲染速度非常慢
我目前正在尝试使用 UpgradeModule 将大型 Angular 1.6.1 应用程序引导到 Angular 4.0.1。我已经成功地让应用程序运行,但我注意到渲染时间显着放缓 - 太糟糕了,它在触发一些事件后完全冻结。
我怀疑这是摘要循环的问题,运行分析器我可以看到 zonejs 函数调用需要很长时间才能处理。
还不清楚在运行混合应用程序时是否应该预期渲染时间会明显变慢?
我还注意到一些可能与同一问题有关的奇怪行为。这些承诺似乎并不一致。似乎服务器响应已成功返回,但角度承诺并未检测到它已返回 - 导致无限加载图标(我有一个加载器组件,它显示加载图标,直到所有承诺都返回)。
有什么特别的东西我可以检查,这可能会导致渲染缓慢?
这是我的设置。
app.ts
- 主入口文件
main.module.ajs.ts
- 我的 AngularJS 模块(为了便于阅读,我删除了所有依赖项)
main.module.ts
- 我的角模块
javascript - systemjs-angular-loader.js 中的 Angular 2 错误“未捕获的 ReferenceError:模块未定义”
我正在尝试在与 Angular 1 相同的应用程序中使用 Angular 2。为此,我正在使用 Angular UpgradeModule。要安装和设置 TypeScript 和 Angular 2,我使用了以下指南:从 AngularJS 升级。
我的 Angular 1 版本是 1.4.8,Angular 是 4.0.3,TypeScript 是 2.3.2。
我的 tsconfig.json 看起来像这样:
还有我的 systemjs.config.js:
我在项目的根文件夹中有一个 main.ts 组件,用于增强 Angular 2 和 Angular 1 模块:
我遇到的问题是,当我在 Visual Studio 2015 中使用 F5(或调试)启动应用程序时,我在浏览器(Chrome)的开发人员控制台中收到以下错误:
未捕获的 ReferenceError:模块未在 systemjs-angular-loader.js 中定义
这里可能是什么问题?
angularjs - 动态创建组件测试中的变化检测
我正在将 AngularJS 应用程序迁移到 Angular(1.6 到 4.0),并且在我的测试中正在努力处理动态创建的组件。例如,我有一个集成测试,它创建一个带有按钮的 AngularJS 组件,该按钮弹出一个 Angular 模态(使用ngx-bootstrap
),该模态是通过ComponentFactory.create
. 问题是更改检测不会在我的测试中的模态内部触发。它适用于应用程序本身。其他 Angular 2 组件在测试中工作,但不是那些动态创建的。
我的设置是否有问题导致动态创建的组件挂接到错误的区域,也许?我已经尝试了所有我能想到的更改组合,但都无济于事。
我在这里用一些简单的嵌入式 angular 2 组件设计了一个 plunkr 。
为了测试它,我发现自己必须总是在这里手动触发变更检测。打开app/ng1/parent.spec.ts
您可以找到doChangeDetection
不需要的功能的地方。
请注意,我使用UpgradeAdapter
而不是downgradeComponent
因为这个 github 问题表明非动态创建的组件会破坏更改检测。
javascript - 在控制台中出现错误 - AngularJS - 找不到样板
我正在使用 AngularJS 样板https://github.com/jbutko/AngularJS-Boilerplate:
- AngularJS v1.3.20
- 角度消毒 1.6
- 角度-ui-bootstrap 2.1.4
我正在尝试使用 Angular 的引导 ui。在控制台中,我面临这个问题
b.resolve 不是函数
找到了一些将角度更新为 1.4 的解决方案
尝试更新它时,我收到以下错误:
bower ENOTFOUND Package AngularJS> Boilerplate=angularjs-boilerplate not found