通过5个简单步骤升级到Angular 7

Posted 2021-04-26 码农前端

现在Angular已经承诺每两年进行一次升级，因此了解将应用程序从一个版本带到下一个版本所涉及的步骤是必须的。

Angular有助于为Web，移动或桌面构建现代应用程序。目前，Angular 7是最新版本。及时了解最新版本非常重要。升级到Angular 7只需几个简单的步骤：

1.首先，通过终端添加最新版本全局升级Angular版本：

sudo npm install -g @angular/cli@latest

2.在项目中本地升级版本，并确保新版本的更改反映在package.json文件中

ng update @angular/cli

3.升级package.json中的所有依赖项和dev依赖项

依赖关系：

npm install --save-dev @ angular-devkit / build-angular @ latest @ angular / compiler-cli @ latest @ angular / language-service @ types / jasmine @ latest @ types / node @ latest codelyzer @ latest karma @ latest karma -chrome-launcher @ latest karma-cli @ latest karma-jasmine @ latest karma-jasmine-html-reporter @ latest jasmine-core @ latest jasmine-spec-reporter @ latest protractor @ latest tslint @ latest rxjs-tslint @ latest webpack @latest

Dev Dependencies：

npm install --save @ angular / animations @ latest @ angular / cdk @ latest @ angular / common @ latest @ angular / compiler @ latest @ angular / core @ latest @ angular / flex-layout @ latest @ angular / forms @ latest @ angular / http @ latest @ angular / material @ latest @ angular / platform-browser @ latest @ angular / platform-browser-dynamic @ latest @ angular / router @ latest core-js @ latest zone.js@latest rxjs @ latest rxjs- COMPAT @latest

Angular-devkit在Angular 6中引入，用于构建需要依赖于CLI项目的Angular应用程序。

此外，您还需要升级Typescript的版本

npm install typescript@2.9.2 --save-dev

4.现在，将angular-cli.json的配置迁移到angular.json 如果使用Angular材质，请使用以下命令：

ng update @angular/cli

ng update @angular/core

ng update @angular/material

5.删除已弃用的RxJS 6功能（请耐心等待执行完成）。

npm install -g rxjs-tslint

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

6.现在，卸载rxjs-compat，因为它是Angular 7的不必要的依赖项。

npm uninstall --save rxjs-compat

7.也import { Observable } from 'rxjs/Observable';

改为import { Observable } from 'rxjs';

最后，使用启动Angular 7应用程序 ng serve。

一些重点

• 在src目录中创建一个没有任何扩展名的文件浏览器列表，并在其中添加以下行。auto-prefixer目前使用此文件来调整CSS以支持以下指定的浏览器。有关格式和规则选项的其他信息，请参阅：https：//github.com/browserslist/browserslist

• 对于IE 9到11的支持，请从文件的最后一行删除“not”并根据需要进行调整。

• 如果需要来自zone.js的详细错误，请添加import 'zone.js/dist/zone-error';

• 到环境目录中的enviornment.ts 文件的顶部。

• 将karma.conf.js文件移动到src目录。

• 将protractor.conf.js文件移动到e2e目录。

• 切换自

• HttpModule -> HttpClientModule

• HttpService -> HttpClientService

我希望本文可以帮助您将Angular应用程序升级到Angular 7.对于任何其他查询，请单击此处访问angular官方文档以进行升级。