问题标签 [angular-upgrade]

我的任务是将中型 Angular V2.0.1 项目升级到 Angular V7.1.4（最新稳定版本）。我过去曾与 Angular 合作过很多次，并且过去从 V2 -> V4 和 V4 -> V5 升级到不同的 Angular 项目。这些升级并不总是微不足道的，并且有重大变化。在做了一些研究之后，我偶然发现了 Angular 升级指南 ( https://update.angular.io/ )，这似乎是一个不错的起点。我还偶然发现（将 Angular 2 升级到 Angular 6）并且在评论中有人说我应该使用 Angular CLI 开始一个新项目并手动移动代码。

还有一点需要注意的是 2.0.1 项目使用 systemjs（因为它是从原始的 Angular Quickstart 创建的）。理想情况下，我们会切换到 webpack。

我应该使用 Angular CLI 创建一个新项目并复制代码并尝试以这种方式修复错误，还是应该遵循 Angular 更新指南并留在同一个项目中？

我正在使用 downgradeModule 将 AngularJS 应用程序迁移到 Angular 7（此处描述：升级以提高性能）。在该文档的最后一部分中，当我想使用 AOT 时，我需要导入我的 AppModule 的 NgModuleFactory。我正在使用 angular-cli 来构建应用程序。是否可以引用在 angular-cli 构建中创建的 ModuleFactory 并因此为我的混合应用程序打开 AOT？

我的应用程序正在使用 angular5.0 和材料，一切正常。我也在使用延迟加载（如果有什么会改变它），现在我已经在这个页面https://update.angular.io/的帮助下完成了升级。之后我改变了我的 Observables（在它被包含在 RxJS/Observable 之前）并且还将错误处理从 catch 更改为 pipe(catchError(...)) 但即使在那之后我也看到了这个错误。有没有人从 angular 5 更新到 7，如果你解决了这个问题，请告诉我。

这是我的错误

这就是我的包裹儿子的样子 "dependencies": { "@angular/animations": "^7.2.1", "@angular/cdk": "^7.2.1", "@angular/common": "~7.2.0", "@angular/compiler": "~7.2.0", "@angular/core": "~7.2.0", "@angular/forms": "~7.2.0", "@angular/material": "^7.2.1", "@angular/platform-browser": "~7.2.0", "@angular/platform-browser-dynamic": "~7.2.0", "@angular/router": "~7.2.0", "@angular-devkit/core": "^0.4.0", "@angular/http": "^7.2.1", "@ng-bootstrap/ng-bootstrap": "^4.0.1", "@types/lodash": "^4.14.64", "angular-sortablejs": "^2.5.2", "angular2-datetimepicker": "^1.1.1", "angular2-moment": "^1.6.0", "angular2-notifications": "^0.7.4", "bootstrap": "^3.3.7", "font-awesome": "^4.7.0", "git-describe": "^4.0.2", "hammerjs": "^2.0.8", "lodash": "^4.17.4", "mdn-polyfills": "^3.5.0", "moment": "^2.18.1", "ng-pick-datetime": "^7.0.0", "ng2-notify-popup": "^0.1.24", "ngx-dropdown": "0.0.22", "ngx-loading": "1.0.8", "ngx-mat-select-search": "^1.4.1", "sortablejs": "^1.7.0", "core-js": "^2.5.4", "rxjs": "~6.3.3", "tslib": "^1.9.0", "zone.js": "~0.8.28" }, "devDependencies": { "@angular-devkit/build-angular": "~0.12.0", "@angular/cli": "~7.2.2", "@angular/compiler-cli": "~7.2.0", "@angular/language-service": "~7.2.0", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "@types/lodash": "^4.14.64", "@types/node": "~8.9.4", "codelyzer": "~4.5.0", "fs-extra": "^7.0.1", "jasmine-core": "~2.5.2", "jasmine-spec-reporter": "~4.1.0", "karma": "^3.1.4", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage": "^1.1.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "karma-junit-reporter": "^1.2.0", "protractor": "~5.4.0", "puppeteer": "^1.2.0", "ts-node": "~7.0.0", "tslint": "~5.11.0", "typescript": "~3.2.2" } }

我们正在准备升级我们的 AngularJS 应用程序并为此进行重构。目前我们遇到了一个架构问题：

我们的应用程序当前通过 jQuery AJAX 调用加载 JSON，这会设置所有数据，然后引导应用程序。

但是，我们需要将 AJAX 调用移至 Angular，以便我们可以引导应用程序而无需等待 AJAX 返回（这是升级所必需的）

我一直在尝试以下内容，initService获取 JSON 提要，然后分配所有数据

但这会导致一系列问题。

我们如何正确加载需要来自 AJAX 的数据才能运行的 AngularJS 应用程序？

我们有一个 AngularJs 站点，我们计划升级到 Angular。

我知道有 ngUpgrade，但我想在同一个应用程序中使用 Angular，但只将它用于新页面，以便现有/当前页面在我们更新它们之前工作相同。

这可能有两个 Angular（AngularJs 和 Angular）吗？怎么做？

我将 AngularJS 应用程序升级到 Angular5。

我将一些组件从 AngularJS 迁移到 Angular5，但不是应用程序的所有其他窗口使用 ng-form 进行表单验证。

我可以毫无问题地捕获“form.account.$modelValue”，但是如果我使用自定义验证来设置帐户状态，我永远不会在 form.account.$valid 或 form.$valid 上收到错误。

例子：

我有一个 AngularJS (1.7) 应用程序，它正在使用 ngUpgrade 迁移到 Angular 7。因此 AngularJS 和 Angular 框架同时运行，新组件是用 Angular 编写的，有时这些现代 Angular 组件会在遗留 AngularJS 组件中使用。

就我而言，父组件在某些情况下需要与子组件进行通信。

ngUpgrade文档清楚地展示了如何从 Angular 子组件向父 AngularJS 组件传递数据和传播事件：

为了实现这一点，您只需向 Angular 子组件添加几个属性：@Input() data;用于初始数据，@Output() changed = new EventEmitter<WhateverThing>();然后可以通过执行this.changed.emit(this.whateverThing).

这一切都有效，但是将事件从父母传播到孩子呢？我知道如何在 Angular 中做到这一点，例如使用@ViewChild或使用 observables，但这些机制在我的应用程序的 AngularJS 环境中不可用。所以父组件不能使用它们。

我尝试过的两种可行的方法是：

1. 创建两个组件共享的单独服务。

2. 将父控制器的引用传递给子控制器，如下所示：

...然后让子组件调用此observe函数：

这样，一旦设置了组件，父级就可以直接引用子级。子进程实现了一些 TypeScript 接口，该接口定义了父进程可以调用以通知子进程事件的所有子进程方法。

这两种方法都有效，但它们都让我觉得很笨拙，而且对于像向子组件发送事件这样简单的事情要做很多繁琐的事情。

由于这在 AngularJS 和 Angular 中都很容易做到，我想知道我是否可能会错过在 的上下文中做同样事情的更简单/更简单的方法ngUpgrade，其中父级是 AngularJS，子级是 Angular 7。

还是我的第二种方法是一种合理的方法？

我有一个相当大的 AngularJS(v1.5) 应用程序，其中包含许多控制器。我想使用同时运行旧框架和新框架的升级模块将应用程序迁移到最新的 Angular 版本（v7），从而允许采用增量方法进行升级。所以我的问题是，在使用升级模块使我的混合应用程序工作之前，我是否需要将所有控制器转换为组件指令（从 v1.5+ 引入）？或者我们可以先用控制器制作混合应用程序，然后将每个 angularJS 控制器转换为角度组件？

另一个与混合方法相关的问题，我一直在创建的新文件（与角度框架相关）是打字稿格式。我是否需要将所有旧的 javascript 文件转换为 typescript 才能使混合应用程序正常工作？

我尝试通过ng update @angular/cli @angular/core在终端中运行将 Angular 项目从 7.2.5 版更新到核心框架和 CLI 的 8 版。

终端的响应是“我们分析了您的 package.json，一切似乎都井井有条。干得好！

我的版本列表：

目前我正在将 Angularjs 1.6 应用程序升级到 Angular 7。作为此迁移的一部分，我必须从 Angular 模板导航到 Angularjs 中定义的状态。我怎样才能做到这一点？

我尝试过角度混合路由器方法，但没有帮助。

这是在 Angularjs 的 recipes 模块下定义的状态

$stateProvider.state('recipes', { url: '/recipes', component: 'recipes', onEnter: ['$state', 'authService', ($state, authService) => { if(!authService.isLoggedIn()){ $state.go('login') } }] })

我想使用 angular-hybrid-router 从 Angular 7 模板导航到上述状态，如下所示

预期是导航到 /recipes url。但它没有，甚至没有抛出任何错误。