标签: angular-upgrade

我刚刚按照Angular 4升级指南更新了我的AngularJS 1.6应用程序.基本上我已经添加了新的angular 4依赖项package.json,通过appstrapped app UpgradeModule并在angular 4中创建了一个新的简单组件.一切都按预期工作但性能非常差!

该应用程序是一个仪表板应用程序,可能有大量的小部件组件和大量的后端http请求来填充每个小部件内容.

根据仪表板的不同,升级的应用程序加载和显示仪表板的速度要慢2到5倍,Chrome网络控制台会显示http请求按顺序运行,而不是像1.6版本那样一次性全部拍摄.总体而言,用户界面也不那么流畅.

我玩过ngZone并尝试在角度以外运行请求,zone.runOutsideAngular(() => { ... })以降低因更改检测而导致的刷新成本.结果稍微快一点,但仍比原来的1.6版本慢得多.

升级到混合1.6-4应用程序以保持良好的原始性能时是否需要考虑一些事项？谢谢!

我将angular-cli项目与AngularJS项目结合起来以缓慢升级应用程序。AngularJS应用程序已经使用TypeScript，我让cli处理将应用程序捆绑在一起。我大致遵循了Victor Savkin的shell升级指南和AngularJS官方更新指南，但是遇到了错误。

当ngDoBootstrap被称为以下模块中，一个承诺被拒绝，并出现以下错误。

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    UpgradeModule,
    SharedModule,
    CoreModule,
    AppRoutingModule,
  ],
  entryComponents: [ AppComponent ],
})
export class AppModule {

  constructor(private upgrade: UpgradeModule) { }

  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, [ng1AppModule], { strictDi: true });
  }
}

导致错误

 core.es5.js:1020 ERROR Error: AngularJS v1.x is not loaded!
     at Object.noNg (static.es5.js:15)
     at module$1 (static.es5.js:55)
     at UpgradeModule.webpackJsonp.../../../upgrade/@angular/upgrade/static.es5.js.UpgradeModule.bootstrap
 (static.es5.js:1249)
     at AppModule.webpackJsonp.../../../../../src/app/app.module.ts.AppModule.ngDoBootstrap
 (app.module.ts:51)
     at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._moduleDoBootstrap
 (core.es5.js:4549)
     at core.es5.js:4508
     at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke
 (zone.js:392)
     at Object.onInvoke …

我正在阅读 Angular 的升级指南，以了解如何在 Angular 应用程序中嵌入 AngularJS 组件。我使用Angular CLI创建了一个基本的 Angular 应用程序，并添加了一个简单的 AngularJS 模块作为依赖项。

当我运行时ng serve，应用程序编译没有错误。但是，在运行时，我在控制台中收到此消息：

Error: Trying to get the AngularJS injector before it being set.

是什么导致了这个错误，我该如何避免它？我没有偏离升级指南中详述的步骤。

下面是我如何在我的 Angular 应用程序中升级我的 AngularJS 组件：

// example.directive.ts
import { Directive, ElementRef, Injector } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';

// this is the npm module that contains the AngularJS component
import { MyComponent } from '@my-company/module-test';

@Directive({
    selector: 'my-upgraded-component'
})
export class ExampleDirective extends UpgradeComponent { …

版本

node --version v8.11.3

npm --version 6.4.1

ng --version
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular …

案子

我正在将AngularJS(即Angular 1.6)应用程序升级到Angular(即Angular 4.1.3).我选择进行增量升级,因此目前AngularJS和Angular都是自举和运行的.到目前为止这么好,但是:应该重写为Angular的AngularJS服务之一依赖于众所周知的服务$translate,该服务是第三方AngularJS(读取Angular 1)模块pascalprecht.translate的一部分.换句话说,$translate注入服务MyService应该成为Angular(读取Angular 4)服务.

MyService (剥离)看起来像这样:

import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
    // Here comes the injection (how to do it?).
    constructor(private $translate: $translate) {

    }

    foo() {
        // Use the service
        this.$translate('HELLO_WORLD');
    }
}

它位于MyModule:

import { NgModule } from '@angular/core';

import { MyService } from './my.service';

@NgModule({
    providers: [
        MyService
    ]
})
export class MyModule {
}

问题

现在,我怎么能注入$translate到 …

目前，我正在使用 webpack 将我的 Angular project4 升级到 Angular7。
我卡在了一步

从HttpModule和Http服务切换到HttpClientModule和HttpClient服务。HttpClient简化了默认的人体工程学（您不再需要映射到 json）并且现在支持类型化的返回值和拦截器。

关于这一步我需要更换

• HttpModule => HttpClientModule
  
• Http=> 对于从=>更新，是否有任何脚本可以帮助喜欢或我们需要手动编辑？HttpClient

HttpHttpClient
$rxjs-5-to-6-migrate -p src/tsconfig.app.json

升级到 Angular 9 并尝试运行我的项目后，我收到此错误：

Compiling @angular/common/http : module as esm5
Compiling angular-font-awesome : module as esm5
Compiling angular-font-awesome : module as esm5
Error: Error on worker #5: Error: Failed to find exported name of node (CommonModule = (function () {
    function CommonModule() {
    }
    return CommonModule;
}())) in 'C:/Users/.../node_modules/angular-font-awesome/dist/angular-font-awesome.es5.js'.
    at Object.findExportedNameOfNode (C:\Users\...\node_modules\@angular\compiler-cli\src\ngtsc\imports\src\find_export.js:35:19)
    at LogicalProjectStrategy.emit (C:\Users\Ghaida\...\node_modules\@angular\compiler-cli\src\ngtsc\imports\src\emitter.js:228:38)
    at ReferenceEmitter.emit (C:\Users\...\node_modules\@angular\compiler-cli\src\ngtsc\imports\src\emitter.js:71:44)
    at Object.toR3Reference (C:\Users\...\node_modules\@angular\compiler-cli\src\ngtsc\annotations\src\util.js:173:31)
    at NgModuleDecoratorHandler._toR3Reference (C:\Users\...\node_modules\@angular\compiler-cli\src\ngtsc\annotations\src\ng_module.js:415:31)
    at C:\Users\...\node_modules\@angular\compiler-cli\src\ngtsc\annotations\src\ng_module.js:196:72
    at Array.map (<anonymous>)
    at NgModuleDecoratorHandler.analyze (C:\Users\...\node_modules\@angular\compiler-cli\src\ngtsc\annotations\src\ng_module.js:196:38)

这是运行 ng version 的结果：

Angular CLI: 9.1.0
Node: …

我们正在将大型 Angular 应用程序从 6 升级到 17。像其他人一样，我也一直在遵循 Angular 升级指南：但这总是谈论一次升级一个版本。

我们的应用程序有近 50 个第三方库。因此，与升级 Angular 版本本身相比，升级库是主要工作。

作为一名架构师，我认为从 v6 一步步过渡到 v17 没有任何意义。

在 2023 年，为什么有人会编写中间版本的代码（角度和使用的第三方库）只是为了丢弃它们？

恕我直言，必须有一个关于如何升级严重过时的 Angular 项目的更好指南，但找不到有关该主题的权威答案。

有什么逻辑可以解释为什么不应该直接升级到 V17 吗？为什么官方建议一步步走呢？

非常感谢任何指导，谢谢。

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

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

我的版本列表：

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ? \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | …

在升级到角度 13 时，我在管道上的构建步骤失败。我的初始版本是 11，升级到 12 后构建工作正常，但从 12 升级到 13 时，它开始在管道上出现此错误。构建在本地运行良好，但在管道上失败。

我还添加了 package.json 文件代码和依赖项，还添加了显示错误的图像。

[![{
  "name": "app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "start:prod": "ng serve -c production",
    "start:local": "ng serve -c local",
    "start:test": "ng serve -c local,test",
    "start:ci": "serve -s --no-clipboard --listen ${PORT:-4200} ",
    "build": "ng build",
    "updateVersion": "node ./updateVersion.js",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage --ci",
    "lint": "eslint src --ext .js,.ts,.html",
    "lint:fix": "npm run lint -- --fix",
    "e2e": "ng e2e",
    "e2e:prod": "ng e2e --headless …

我有一个混合 Angular-cli，它大致遵循 Victor Savkin 的延迟加载 AngularJS 指南。AngularJS 在 LazyLoaded Angular 模块的构造函数中进行引导。我的应用程序和指南之间的主要区别是我试图将<ui-view>指令包装在一些 Angular 组件中。由于我的布局结构，<ui-view>当 AngularJS 启动时，该元素将不可用，并且可以随时添加或删除。

import { Component, Directive, ElementRef, Injector } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';
import * as angular from 'angular';

@Component({
  template: `
  <layout-wrapper>
    <my-toolbar></my-toolbar>
    <layout-contents>
      <ng2-ui-view>
        <h3 class="text-center">AngularJS page not loaded</h3>
      </ng2-ui-view>
    </layout-contents>
  </layout-wrapper>
  `,
})
export class LegacyOutputComponent { }

@Directive({selector: 'ng2-ui-view'})
export class UpgradedUiViewComponent extends UpgradeComponent {
  constructor(ref: ElementRef, inj: Injector) {
    super('uiViewWrapper', ref, inj); …