Upgrade to Angular 7 — Within 10 Minutes

“smartphone on laptop computer on top of brown wooden desk” by Alexandru Acea on Unsplash

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

Edit: To upgrade to the new Angular 8, please follow this article:

Upgrade to Angular 8 — Within 10 Minutes

Everything you need to upgrade

Angular dependencies

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

Angular dev dependencies

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

Dependencies; 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
} 

Deprecation

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

The following will be deprecated:

<form [formGroup]="form">
  <input formControlName="first" [(ngModel)]="value">
</form>

A full explanation of this depreciation can be found here.

Thank you for reading! My Github. If you found this post useful, consider reading some of my other articles and check my Angular 7 project:

jeroenouw/AngularMaterialFirebase

When To Use ‘unknown’ and ‘never’ Types in TypeScript

How To Create Your Own TypeScript CLI — With Node.js

Angular 7 — Share Component Data with Other Components