Want to upgrade project from Angular v5 to Angular v6

Question

As Angular 6 is here  I want to upgrade or move my angular 5 client application to angular 6  but I m not getting any tutorial or anything which can guide me through    According to me I just need to run a new Angular CLI and then have to move my older source to new project  I read the Angular 6 is using a new renderer called Ivy  Will I have to change my project according to Ivy

User · Answer

There are few steps to upgrade 2 4 5 to Angular 6   npm uninstall --save-dev angular-cli npm install --save-dev  angular cli latest npm install   To fix the issue related to  angular json   -  ng update  angular cli --migrate-only --from 1 7 4   Store MIGRATION https   github com ngrx platform blob master MIGRATION md ngrxstore  RXJS MIGRATION https   www academind com learn javascript rxjs-6-what-changed   Hoping this will help you

User · Answer

Upgrade from Angular v6 to Angular v7  Version 7 of Angular has been released Official Angular blog link  Visit official angular update guide https   update angular io for detailed information  These steps will work for basic angular 6 apps using Angular Material   ng update  angular cli  ng update  angular core ng update  angular material   Upgrade from Angular v5 to Angular v6  Version 6 of Angular has been released Official Angular blog link   I have mentioned general upgrade steps below  but before and after the update you need to make changes in your code to make it workable in v6  for that detailed information visit official website https   update angular io    Upgrade Steps  largely taken from the official Angular Update Guide for a basic Angular app using Angular Material     Make sure NodeJS version is 8 9  if not update it  Update Angular cli globally and locally  and migrate the old configuration  angular-cli json to the new angular json format by running the following   npm install -g  angular cli   npm install  angular cli   ng update  angular cli  Update all of your Angular framework packages to v6 and the correct version  of RxJS and TypeScript by running the following   ng update  angular core  Update Angular Material to the latest version by running the following   ng update  angular material  RxJS v6 has major changes from v5  v6 brings backwards compatibility package rxjs-compat that will keep your applications working  but you should refactor TypeScript code so that it doesn t depend on rxjs-compat  To refactor TypeScript code run following   npm install -g rxjs-tslint    rxjs-5-to-6-migrate -p src tsconfig app json   Note  Once all of your dependencies have updated to RxJS 6  remove rxjs-  compat as it increases bundle size  please see this RxJS Upgrade Guide for more info    npm uninstall rxjs-compat  Done run ng serve to check it  If you get errors in build refer https   update angular io for detailed info    Upgrade from Angular v5 to Angular 6 0 0-rc 5   Upgrade rxjs to 6 0 0-beta 0  please see this RxJS Upgrade Guide for more info  RxJS v6 has breaking change hence first make your code compatible to latest RxJS version  Update NodeJS version to 8 9   this is required by angular cli 6 version  Update Angular cli global package to next version   npm uninstall -g  angular cli npm cache verify   if npm version is  lt  5 then use npm cache clean  npm install -g  angular cli next  Change angular packages versions in package json file to  6 0 0-rc 5   dependencies         angular animations     6 0 0-rc 5       angular cdk     6 0 0-rc 12       angular common     6 0 0-rc 5       angular compiler     6 0 0-rc 5       angular core     6 0 0-rc 5       angular forms     6 0 0-rc 5       angular http     6 0 0-rc 5       angular material     6 0 0-rc 12       angular platform-browser     6 0 0-rc 5       angular platform-browser-dynamic     6 0 0-rc 5       angular router     6 0 0-rc 5      core-js     2 5 5      karma-jasmine     1 1 1      rxjs     6 0 0-uncanny-rc 7      rxjs-compat     6 0 0-uncanny-rc 7      zone js     0 8 26      devDependencies         angular-devkit build-angular     0 5 0       angular cli     6 0 0-rc 5       angular compiler-cli     6 0 0-rc 5       types jasmine    2 5 38       types node     8 9 4      codelyzer     4 1 0      jasmine-core     2 5 2      jasmine-spec-reporter     3 2 0      karma     1 4 1      karma-chrome-launcher     2 0 0      karma-cli     1 0 1      karma-coverage-istanbul-reporter     0 2 0      karma-jasmine     1 1 0      karma-jasmine-html-reporter     0 2 2      postcss-loader     2 1 4      protractor     5 1 0      ts-node     5 0 0      tslint     5 9 1      typescript     2 7 2     Next update Angular cli local package to next version and install above mentioned packages   rm -rf node modules dist   use rmdir  S Q node modules dist in Windows  Command Prompt  use rm -r -fo node modules dist in Windows PowerShell npm install --save-dev  angular cli next npm install   The Angular CLI configuration format has been changed from angular cli 6 0 0-rc 2 version  and your existing configuration can be updated automatically by running the following command  It will remove old config file  angular-cli json and will write new angular json file   ng update  angular cli --migrate-only --from 1 7 4   Note  - If you get following error  The Angular Compiler requires TypeScript   2 7 2 and  lt 2 8 0 but 2 8 3 was found instead   run following command    npm install typescript 2 7 2

User · Answer

As Vinay Kumar pointed out that it will not update global installed Angular CLI  To update it globally just use following commands   npm uninstall -g  angular cli npm cache clean npm install -g  angular cli latest   Note if you want to update existing project you have to modify existing project  you should change package json  inside your project   There are no breaking changes in Angular itself but they are in RxJS  so don t forget to use rxjs-compat library to work with legacy code     npm install --save rxjs-compat    I wrote a good article about installation updating Angular CLI http   bmnteam com angular-cli-installation

User · Answer

I had to re-run ng update  angular cli for angular-cli json to be changed to angular json

User · Answer

Complete guide  -----------------With angular-cli--------------------------  1  Update CLI globally and locally   Using NPM   make sure that you have node version 8     npm uninstall -g  angular cli npm cache clean npm install -g  angular cli latest npm i  angular cli --save Using Yarn  yarn remove  angular cli yarn global add  angular cli yarn add  angular cli   2 Update dependencies  ng update  angular cli ng update  angular core ng update  angular material ng update rxjs   Angular 6 now depends on TypeScript 2 7 and RxJS 6  Normally that would mean that you have to update your code everywhere RxJS imports and operators are used  but thankfully there   s a package that takes care of most of the heavy lifting   npm i -g rxjs-tslint     or using yarn  yarn global add rxjs-tslint   Then you can run rxjs-5-to-6-migrate  rxjs-5-to-6-migrate -p src tsconfig app json   finally remove rxjs-compat  npm uninstall rxjs-compat     or using Yarn  yarn remove rxjs-compat     Refer to this link https   alligator io angular angular-6     -------------------Without angular-cli-------------------------  So you have to manually update your package json file      Then run    npm update  npm install --save rxjs-compat  npm i -g rxjs-tslint  rxjs-5-to-6-migrate -p src tsconfig app json

User · Answer

This is how I make it work   My Environment   Angular CLI Global   6 0 0  Local  1 7 4  Angular  5 2  Typescript 2 5 3     Note   To enable ng Update you need to install Angular CLI 6 0 first    npm install -g  angular cli or npm install  angular cli    ng update    update Angular Package core common complier    to 6 0 0 ng update  angular cli      change angular-cli json to angular json   optional if you have angular-material 5 4 2  ngx-translate 9 1 1  ng-bootstrap ng-bootstrap 1 1 1    ng update  angular material    upgrade to 6 0 1 npm install  ngx-translate core 10 0 1 --save     upgrade ngX translate to 10 0 1 for Angular 6   5 npm install --save  ng-bootstrap ng-bootstrap 2 0 0    for ng-bootstrap  If you use Observable and get the error    ERROR in node modules rxjs Observable d ts 1 15   error TS2307  Cannot find module  rxjs-compat Observable   node modules rxjs observable of d ts 1 15   error TS2307  Cannot find module  rxjs-compat observable of    Change  import   Observable   from  rxjs Observable   import   of   from  rxjs observable of     To   import   Observable  of   from  rxjs    Angular CLI issue  https   github com angular angular-cli issues 10621

User · Answer

Just use the official upgrade guide which will tell you what you need to do for your own particular needs     https   update angular io

User · Answer

Please run the below comments to update to Angular 6 from Angular 5   ng update  angular cli ng update  angular core npm install rxjs-compat  In order to support older version rxjs 5 6   npm install -g rxjs-tslint  To change from rxjs 5 to rxjs 6 format in code  Install globally then only will work  rxjs-5-to-6-migrate -p src tsconfig app json  After installing we have to change it in our source code to rxjs6 format  npm uninstall rxjs-compat  Remove this finally

User · Answer

Angular 6 has just been released    https   blog angular io version-6-of-angular-now-available-cc56b0efa7a4  Here is what worked for one of my smaller projects   npm install -g  angular cli npm install  angular cli ng update  angular cli --migrate-only --from 1 7 0 ng update  angular core npm install rxjs-compat ng serve   You might need to update your run scripts in package json For eg  if you use flags like  app  and  environment  These have been updated to  project  and  configuration  respectively   Refer https   update angular io  for more detailed guide

User · Answer

Check the step by step upgrade details from Angular 5 to Angular 6  These provides details on issues you encounter during upgrade and how to resolve them    Update your node version to 8 or above and Install Angular cli latest globally by npm i -g  angular cli latest  Angular 6 uses angular json as configuration file instead of  anguar-cli json  Also tslint has been changed  Check https   github com angular angular-cli wiki angular-workspace for latest configuration details  You have to move any of your existing configuration to new configuration file   To do this create another dummy project with latest cli using ng new    your-project    and same defaults such as prefix  style etc you used earlier for your project  Create new project with cli https   github com angular angular-cli wiki new  Use https   update angular io  to check what has been changed from your current version of Angular   Angular 6  It provides usage of how to change fix them   Follow the steps above and copy update the angular json file created in step2  Do npm i in your project to get all dependencies and do npm update  Now comes the big part  RxJS upgrade and resolving conflicts  RxJS has standardised imports of operators and Observable creators with this release  Do npm i -g rxjs-tslint and add below lint configuration in tslint json           rulesDirectory          node modules rxjs-tslint          rules          rxjs-collapse-imports   true       rxjs-pipeable-operators-only   true       rxjs-no-static-observable-methods   true       rxjs-proper-imports   true          Now run ng lint --fix  This fixes few items but most of the remaining issues will be highlighted and you have to fix it manually    Operators Name change   do - gt  tap   catch - gt  catchError   switch - gt  switchAll   finally - gt  finalize   All operators moved to rxjs operators  import   map  filter  reduce   from  rxjs operators     Observable creation methods are moved to rxjs     import   Observable  Subject  of  from   from  rxjs      You are all set  Welcome to Angular 6    Check my blog post here on how to upgrade

User · Answer

simply run the following command   ng update  note  this will not update globally

[angular] Want to upgrade project from Angular v5 to Angular v6

Examples related to angular

Examples related to migration

Examples related to upgrade

Examples related to angular-ivy