将angular 4项目升级为angular 6

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

我已经遵循了报告中提到的步骤

但这些步骤是在升级到angular 7而不是angular 6时实现的

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

---

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

首先，您可以尝试在安装的地方提供完整的版本号，即6.0.0。其次，第二个安装命令尝试向其添加--save dev标志，以便直接将其保存到dev依赖项中，然后再ng update@angular/cli ng更新然后ng更新@angular/core。确保在执行更新命令之前，使用ng--version检查ng版本。

---

希望这有帮助

要升级系统中全局安装的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

希望这会有所帮助

---

干杯

首先需要卸载节点模块文件夹和package-lock.json文件。 接下来，您需要使用

ng更新@angular/core

这将升级您的核心包

ng update@angular/cli--仅迁移--from=YOUR-CURRENT-angular-VERSION

这将升级angular命令行工具以支持最新版本

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

如果您在升级后使用了rxjs及其抛出错误，只需npm i rxjs compat，这将安装所需的依赖项

---

瞧，你的项目升级了。

你可以通过安装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>

---

在终端中升级到Angular v6

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

关于如何升级到新版本的详细信息，最好的资源是。即使您正在从v2升级到v6，它也会列出自v2到v6以来的所有重大更改！这是一个很好的方法，可以详细了解代码中需要更改的内容

1：安装最新的角度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

接下来，对

@angular/cli

运行

ng update

命令，然后对所需的其他软件包运行

@angular/core

，然后对所需的其他软件包运行

rxjs，@angular/material

）：

某些项目结构文件已从v5更改为v6。不再有

angular.json

，它已被

angular.json

取代。angular.json的结构也已更改，以支持每个工作区的多个项目。当我们运行ng update

@angular/cli

时，所有必需的文件都将更新

3:更新其他依赖项

我还喜欢在角度升级期间更新项目使用的其他npm依赖项。npm包npm check updates对于此任务非常有用

npm install -g npm-check-updates

使用命令ncu检查哪些软件包具有可用的更新。和

ncu-u

更新您的package.json

在更改package.json包的版本时，我个人也喜欢删除node_模块并再次运行npm I，以确保正确的版本在本地可用（并更新package lock.json）

4：更新RxJS

因此，下一步是运行

ng serve

，检查代码是否一切正常。别忘了确认所有的烧嘴变化

尽管我们能够在Angular v5（使用RxJS v5）之后更新RxJS代码以使用pipeble操作符，但在我升级到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';

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

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';

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

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

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

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

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

或者，如果您还没有使用RxJS pipeble操作符：

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操作符

发件人：

至：

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

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

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';

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

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

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

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

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

在更新RxJS代码之后，您可能仍然会从第三方依赖项中获得关于RxJS的错误。要解决这个问题，请安装rxjs compat，并且一旦依赖项也升级了它们的代码，就可以从项目中删除这个包

npm install --save rxjs-compat

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

Angular v6中引入的一个新特性称为“树可摇动提供程序”。这意味着我们不再需要使用在中提供的属性来声明模块中的服务，这将允许服务可树摇动，这意味着如果不使用这些服务，它们将不会成为产品包的一部分

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

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

我在我的项目的所有核心服务（全局范围）中都应用了这个特性，但我仍然在使用不具有全局范围的服务的非树可摇动提供者

这允许从CoreModule中清除providers部分

6：更新角度材质（可选）

如果在项目中使用角度材质，请不要忘记运行

ng update@Angular/Material

来更新材质