Upgrade to Angular 7 Beta within 10 minutes

Jeroen Ouwehand
08-10-2018

Upgrade to Angular 7 Beta within 10 minutes

This quick post will tell you how you can upgrade your Angular 6 project within 10 minutes to the new Angular 7 Beta (at the moment beta-7). Note: this is not an in-depth article, just the basics.

Everything you need to upgrade

Angular dependencies

Using @next instead of @latest we are having access to the new beta versions.

npm install @angular/animations@next @angular/common@next @angular/compiler@next @angular/core@next @angular/forms@next @angular/http@next @angular/platform-browser@next @angular/platform-browser-dynamic@next @angular/platform-server@next @angular/router@next --save

Angular dev dependencies

npm install @angular-devkit/build-angular@next @angular/compiler-cli@next @angular/cli@next @angular/language-service@next –save-dev

Core-js and Zone.js

npm install core-js@latest zone.js@latest --save

Dev dependencies; Types, codelyzer, karma tools, jasmine, protractor and tslint

npm install @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 --save-dev

The new version 3+ of TypeScript

npm install typescript@latest --save-dev

Latest version 6+ of RxJS

npm install rxjs@latest rxjs-compat@latest --save

And:

npm install rxjs-tslint@latest --save-dev

Latest version 4+ of Webpack

npm install webpack@latest --save-dev

Enable Ivy Renderer

In your tsconfig.json file add:

"angularCompilerOptions": {
"enableIvy": true
}

Issue angular/forms

“Support for using the ngModel input property event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7.”

A full explanation of this depreciation can be found here.

LEAVE A REPLY

you might also like