将Angle 4项目升级到Angle 6

Question

我需要将现有的angular 4项目升级到angular 6

我已按照https://update.angular.io/

中提到的步骤进行操作

npm install -g @angular/cli@6
npm install @angular/cli@6
ng update @angular/cli
ng update @angular/core
ng update 

但是这些步骤正在升级到7号角，而不是6号角

运行ng update命令后的结果屏幕截图：

我错过了任何步骤，如何升级到6号角而不是7号角

Answer 1

要升级系统中全局安装的 angular-cli 软件包，您需要运行以下命令

npm uninstall -g angular-cli
npm cache clean or npm cache verify (if npm > 5)
npm install -g @angular/cli@latest

除了升级 angular-cli的全局版本外，您还可以通过运行以下命令来升级特定项目的本地版本：

rm -rf node_modules
npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install

希望这会有所帮助 欢呼！

Answer 2

首先，您可以尝试在安装位置提供完整的版本号6.0.0。其次，第二个安装命令尝试向其添加-save-dev 标志，以便将其直接保存到开发依赖项，然后在此之后 ng update @ angular / cli ng更新，然后 ng更新@ angular / core 。确保在更新命令之前使用ng --version检查ng版本。 希望这会有所帮助！

Answer 3

首先，您需要卸载node-modules文件夹和package-lock.json文件。 接下来，您需要使用

执行基本更新

  

ng更新@ angular / core

这将升级您的核心软件包。

  

ng update @ angular / cli --migrate-only --from =您的当前语言版本

这将升级您的角度命令行工具以支持最新版本。

最后执行npm安装并运行ng serve命令。

如果您在升级后使用过rxjs及其引发的错误，只需在rxjs-compat上使用npm，这将安装所需的依赖项。

Voila，您的项目已升级。

Answer 4

您可以通过安装nvm来做到这一点，在终端中执行以下命令

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | 
bash  

然后下一个

export NVM_DIR="/root/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
nvm uninstall <version>    
nvm install [-s] <version>
nvm alias default <version>

或仅在package.json中更改角度版本并运行

npm install

在终端

Answer 5

升级到Angular v6

关于如何升级到新的Angular版本的详细信息的最佳资源是https://update.angular.io/。即使从v2升级到v6，它也会列出从v2到v6的所有重大更改！这是一种详细了解代码中需要更改的好方法。

1：安装最新的Angular CLI

第一步是确保您拥有最新的CLI：

npm install -g @angular/cli

随着Angular v6的发布，Angular CLI现在也被版本化为Angular，这意味着在Angular v5之前，我们将使用Angular CLI 1.x，并且现在Angular CLI也在6.x版本上。这使它变得容易得多！

2：ng更新

不用说，请创建一个分支来更新您的项目，因为您永远不会知道升级到Angular v6后所有依赖项是否仍然可以工作。

因此，首先，我们将从@angular/cli开始。为了使ng update命令在项目中起作用，我们首先需要将@angular/cli版本更新为6.x。

npm install --save-dev @angular/cli@latest

接下来，对ng update，@angular/cli然后对所需的其他软件包（@angular/core）运行rxjs, @angular/material命令：

ng update @angular/cli
ng update @angular/core
ng update @angular/material
ng update rxjs

某些项目结构文件已从v5更改为v6。不再有angular-cli.json，它已被angular.json取代。 angular.json的结构也进行了更改，以支持每个工作区多个项目。当我们运行ng update @angular/cli时，所有必需的文件都会被更新！

3：更新其他依赖项

我还喜欢在Angular升级期间更新项目使用的其他npm缺陷。 npm软件包npm-check-updates对于此任务确实很有帮助。

npm install -g npm-check-updates

使用命令ncu检查哪些软件包具有可用的更新。然后ncu -u更新您的package.json。

当更改package.json软件包的版本时，我个人也希望删除node_module并再次运行npm i，只是为了确保正确的版本在本地可用（并更新package-lock.json）。

4：更新RxJS

因此，下一步正在运行ng serve，以检查代码是否一切正常。不要忘记验证https://update.angular.io/的所有鸟嘴更改。

尽管自从Angular v5（带有RxJS v5）以来我们能够更新RxJS代码以使用管道运算符，但是在我升级到v6的项目中，我却忘记了更改一些地方。为了帮助我们完成此任务，我们可以安装rxjs-tslint来帮助我们删除所有不推荐使用的RxJS代码。

npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

有关进口的快速摘要：

import { Subject } from 'rxjs/Subject';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of;'

收件人：

import { BehaviorSubject, Subject, Observable, of } from 'rxjs';

或者，如果您尚未使用RxJS管道运算符：

import 'rxjs/add/observable/of';    
import 'rxjs/add/operator/catch';   
import 'rxjs/add/operator/do';  
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/mergeMap';    
import 'rxjs/add/operator/switchMap';

至

import { of } from 'rxjs';
import { map, switchMap, catchError, mergeMap } from 'rxjs/operators';

以下运算符也被重命名：

do -> tap
catch -> catchError
switch -> switchAll
finally -> finalize

在我们的代码中，我们可以开始使用pipeble运算符。

发件人：

this.http.get('url')
  .do(console.log)
  .map(results => results.data)
  .subscribe(results => {
    console.log('Results', results);
  });

收件人：

this.http.get('url')
  .pipe(
    tap(console.log), // old 'do' operator
    map(results => results.data)
  )
  .subscribe(results => {
    console.log('Results', results);
  });

更新RxJS代码后，您仍可能会从第三方依赖项中获取有关RxJS的错误。要解决此问题，请安装rxjs-compat，并且依赖项也已升级了它们的代码后，您可以从项目中删除此软件包。

npm install --save rxjs-compat

5：简化核心服务的依赖注入

Angular v6中引入的一项新功能称为“可树状提供程序”。这意味着我们不再需要使用属性providedIn在模块中声明服务，这将使服务可摇树，这意味着如果不使用它们，它们将不会成为产品的一部分。捆绑包。

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

@Injectable({
  providedIn: 'root'
})
export class MyCoreService { }

我在项目的所有核心服务（全局范围）中都应用了此功能，但是我仍在使用不可摇树的提供程序以及不具有全局范围的服务。

这允许从CoreModule清除提供程序部分。

6：更新Angular材质（可选）

如果您在项目中使用Angular Material，请不要忘记运行ng update @angular/material来更新材质依赖关系。

从v5到v6的重大变化是我们在项目中导入Material模块的方式：

发件人：

import {
  MdToolbarModule,
  MdIconModule,
  MdButtonModule,
  MdMenuModule,
  MdCardModule
} from '@angular/material';

收件人：

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatCardModule } from '@angular/material/card';

现在每个模块都有自己的软件包。这也是我喜欢为第三方导入创建单独的模块的原因之一，如本文中已解释的那样。这样可以更轻松地修复导入！

其他一些事情…… 我确实有一些项目是自Angular v2以来创建的，每次主要版本更新后，我通常只更新package.json并修复代码中的重大更改，这没关系。

由于Angular CLI v6中有一些项目结构更改，我还决定通过使用CLI 6创建一个全新项目并将src文件夹从旧项目复制到新项目来迁移项目。以下是一些受影响最大的更改。

对代码产生影响的主要区别是tsconfig.json中的baseUrl：“ ./”。对于使用CLI 1.x创建的项目（针对Angular v4和v5），默认情况下不存在此配置（但在src / tsconfig.ap.json内部）。将baseUrl移至tsconfig.json根目录会对tsconfig.json中声明的自定义路径以及延迟加载模块的路径产生影响。

之前-tsconfig.json中的自定义路径：

paths: {
  "@env/*": ["environments/*"]
}

之后（使用CLI v6创建的单个项目）：

paths: {
  "@env/*": ["src/environments/*"]
}

需要使用相对路径声明延迟加载模块：

之前：

{ path: 'home', loadChildren: 'app/home/home.module#HomeModule' }

之后：

{ path: 'home', loadChildren: './home/home.module#HomeModule' }

如果您有嵌套模块，则还需要更新它们以使用相对路径：

之前（module1-routing.module.ts）：

{ path: 'foo', loadChildren: 'app/module1/module2/module2.module#Module2Module' }

（module1-routing.module.ts）之后：

{ path: 'foo', loadChildren: './module2/module2.module#Module2Module' }

CLI v6命令也进行了一些更改。 由于我的大多数专业应用程序都在后端使用Java，因此ng build的输出文件夹（dist）配置为其他路径。在CLI 1.x之前，有一个标记（output-path -op）可以在ng build命令中使用（ng build -op ../other/path）。在CLI v6中，如果需要使用其他输出路径，则需要更新angular.json并从ng build中删除-op标志：

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "../other/path",
      ...
    }
  }
}