How to upgrade Angular CLI project

Question

I m attempting to upgrade my angular 2 project from 2 0 0 to 2 4 1   I understand that semantic versioning has been adopted since the 2 0 0 release and 2 x x releases should be drop-in replacements   My experience seems to indicate otherwise  Maybe I just don t know what I m doing but I have not found this to be straightforward     Attempt 1 - Manual Version Upgrade  My naive first approach was to manually update my  angular dependencies  You can reference my package json below  update 1    I made these changes  then did an npm install and I got several warnings then got the following error when I tried to do an ng serve      Cannot read property  AssetUrl  of undefined   And my warnings     npm WARN optional SKIPPING OPTIONAL DEPENDENCY  fsevents  1 0 0  node modules chokidar node modules fsevents   npm WARN notsup SKIPPING OPTIONAL DEPENDENCY  Unsupported platform for fsevents 1 0 15  wanted   os   darwin   arch   any    current    os   win32   arch   x64    npm WARN  angular core 2 4 1 requires a peer of rxjs  5 0 1 but none was installed  npm WARN  angular core 2 4 1 requires a peer of zone js  0 7 2 but none was installed  npm WARN  angular http 2 4 1 requires a peer of rxjs  5 0 1 but none was installed  npm WARN  angular compiler-cli 0 6 4 requires a peer of  angular compiler 2 0 2 but none was installed  npm WARN  angular compiler-cli 0 6 4 requires a peer of  angular platform-server 2 0 2 but none was installed  npm WARN  angular compiler-cli 0 6 4 requires a peer of  angular core 2 0 2 but none was installed  npm WARN  ngtools webpack 1 2 1 requires a peer of  angular compiler-cli  2 3 1 but none was installed  npm WARN  ngtools webpack 1 2 1 requires a peer of  angular tsc-wrapped  0 5 0 but none was installed  npm WARN  ngtools webpack 1 2 1 requires a peer of webpack  2 1 0-beta 25 but none was installed    So I went down the rabbit hole of trying to fix these warnings but I don t know how to fix all of them  e g   ngtools webpack  and some of them appear to be in conflict with each other   So I abandoned the manual approach of updating my angular 2 version     Original package json       name    frontend      version    0 0 0      license    MIT      angular-cli          scripts          start    ng serve        lint    tslint   src      ts          test    ng test        pree2e    webdriver-manager update        e2e    protractor        build    ng build        buildProd    ng build --env prod          private   true     dependencies           angular common    2 0 0         angular compiler    2 0 0         angular core    2 0 0         angular forms    2 0 0         angular http    2 0 0         angular material     2 0 0-alpha 9-experimental-pizza         angular platform-browser    2 0 0         angular platform-browser-dynamic    2 0 0         angular router    3 0 0         types google-libphonenumber     7 4 8        angular2-datatable     0 4 2        apollo-client     0 4 22        core-js     2 4 1        google-libphonenumber     2 0 4        graphql-tag     0 1 15        hammerjs     2 0 8        ng2-bootstrap     1 1 16        rxjs    5 0 0-beta 12        ts-helpers     1 1 2        zone js     0 6 26          devDependencies           types hammerjs     2 0 33         types jasmine     2 2 30         types lodash     4 14 39        angular-cli    1 0 0-beta 16        codelyzer     0 0 26        jasmine-core    2 4 1        jasmine-spec-reporter    2 5 0        karma    1 2 0        karma-chrome-launcher     2 0 0        karma-cli     1 0 1        karma-jasmine     1 0 2        karma-remap-istanbul     0 2 1        protractor    4 0 9        ts-node    1 2 1        tslint    3 13 0        typescript    2 0 2        typings    1 4 0          Update 1 of package json       name    frontend      version    0 0 0      license    MIT      angular-cli          scripts          start    ng serve        lint    tslint   src      ts          test    ng test        pree2e    webdriver-manager update        e2e    protractor        build    ng build        buildProd    ng build --env prod          private   true     dependencies           angular common    2 4 1         angular compiler    2 4 1         angular core    2 4 1         angular forms    2 4 1         angular http    2 4 1         angular material     2 0 0-alpha 9-experimental-pizza         angular platform-browser    2 4 1         angular platform-browser-dynamic    2 4 1         angular router    3 0 0         types google-libphonenumber     7 4 8        angular2-datatable     0 4 2        apollo-client     0 4 22        core-js     2 4 1        google-libphonenumber     2 0 4        graphql-tag     0 1 15        hammerjs     2 0 8        ng2-bootstrap     1 1 16        rxjs    5 0 1        ts-helpers     1 1 2        zone js     0 7 2          devDependencies           types hammerjs     2 0 33         types jasmine     2 2 30         types lodash     4 14 39        angular-cli    1 0 0-beta 16        codelyzer     0 0 26        jasmine-core    2 4 1        jasmine-spec-reporter    2 5 0        karma    1 2 0        karma-chrome-launcher     2 0 0        karma-cli     1 0 1        karma-jasmine     1 0 2        karma-remap-istanbul     0 2 1        protractor    4 0 9        ts-node    1 2 1        tslint    3 13 0        typescript    2 0 2        typings    1 4 0          Attempt 2 - Use npm-check-updates  Since when I tried to cherry-pick my angular dependencies for updates I ended up in a spiderweb of other dependencies that needed to be updated  I next tried to just update everything   Based on this answer I tried the following   npm i -g npm-check-updates npm-check-updates -u npm install   This went fine but when I tried ng serve I get the following error      ERROR in AppModule is not a NgModule   Using information gathered here  I downgraded my typescript version  that error went away  but a new error popped up      ERROR in Error encountered resolving symbol values statically    Reference to a non-exported function  position 29 10 in the original    ts file   resolving symbol restPaths in rest-paths ts  resolving symbol   AppModule in app module ts    resolving symbol AppModule in app module ts   I ve been fighting my way through these errors but the fact that I am having so much trouble is raising red flags   Can anybody help   Am I taking the wrong approach   Note that I have seen some suggestions about updating angular-cli projects that recommend uninstalling angular-cli and reinstalling it  then doing an ng init and overwriting your configuration files  This didn t work for me because I already had the latest version   Edit  The statement about having the latest angular-cli was incorrect  I had angular-cli version 1 0 0-beta 16 whereas the latest at the time of this edit is 1 0 0-beta 24   Nevertheless  I did try to update my angular-cli and run ng init on my existing project  I notice now that I didn t follow the steps outlined on the angular-cli github page precisely   I skipped the npm install --save-dev angular-cli latest  and I blew away all my node modules instead of using the rm command they outline

User · Answer

According to the documentation on here http://angularjs.blogspot.co.uk/2017/03/angular-400-now-available.html you 'should' just be able to run...

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save

I tried it and got a couple of errors due to my zone.js and ngrx/store libraries being older versions.

Updating those to the latest versions npm install zone.js@latest --save and npm install @ngrx/store@latest -save, then running the angular install again worked for me.

User · Answer

JJB s answer got me on the right track  but the upgrade didn t go very smoothly   My process is detailed below   Hopefully the process becomes easier in the future and JJB s answer can be used or something even more straightforward   Solution Details  I have followed the steps captured in JJB s answer to update the angular-cli precisely   However  after running npm install angular-cli was broken   Even trying to do ng version would produce an error   So I couldn t do the ng init command  See error below     ng init core 1 Version is not a constructor TypeError  core 1 Version is not a constructor     at Object  lt anonymous gt   C   git my-project code src main frontend node modules  angular compiler-cli src version js 18 19      at Module  compile  module js 556 32      at Object Module  extensions  js  module js 565 10      at Module load  module js 473 32            To be able to use any angular-cli commands  I had to update my package json file by hand and bump the  angular dependencies to 2 4 1  then do another npm install   After this I was able to do ng init   I updated my configuration files  but none of my app   files   When this was done  I was still getting errors   The first one is detailed below  the second was the same type of error but in a different file      ERROR in Error encountered resolving symbol values statically    Function calls are not supported  Consider replacing the function or   lambda with a reference to an exported function  position 62 9 in the   original  ts file   resolving  symbol AppModule in   C   git my-project code src main frontend src app app module ts   This error is tied to the following factory provider in my AppModule    provide  Http  useFactory        backend  XHRBackend  options  RequestOptions  router  Router  navigationService  NavigationService  errorService  ErrorService    gt        return new HttpRerouteProvider backend  options  router  navigationService  errorService          deps   XHRBackend  RequestOptions  Router  NavigationService  ErrorService      To address this error  I had use an exported function and made the following change to the provider                provide  Http         useFactory  httpFactory         deps   XHRBackend  RequestOptions  Router  NavigationService  ErrorService                elsewhere in AppModule  export function httpFactory backend  XHRBackend                               options  RequestOptions                               router  Router                               navigationService  NavigationService                               errorService  ErrorService      return new HttpRerouteProvider backend  options  router  navigationService  errorService       Summary  To summarize what I understand to be the most important details  the following changes were required    Update angular-cli version using the steps detailed in JJB s answer  and on their github page   Updating  angular version by hand  2 0 0 did not seem to be supported by angular-cli version 1 0 0-beta 24 With the assistance of angular-cli and the ng init command  I updated my configuration files  I think the critical changes were to angular-cli json and package json   See configuration file changes at the bottom  Make code changes to export functions before I reference them  as captured in the solution details    Key Configuration Changes  angular-cli json changes       project          version    1 0 0-beta 16        name    frontend          apps                  root    src          outDir    dist          assets    assets         changed to          project          version    1 0 0-beta 24        name    frontend          apps                  root    src          outDir    dist          assets              assets            favicon ico                 My package json looks like this after a manual merge that considers the versions used by ng-init   Note my angular version is not 2 4 1  but the change I was after was component inheritance which was introduced in 2 3  so I was fine with these versions   The original package json is in the question        name    frontend      version    0 0 0      license    MIT      angular-cli          scripts          ng    ng        start    ng serve        lint    tslint   src      ts          test    ng test        pree2e    webdriver-manager update --standalone false --gecko false        e2e    protractor        build    ng build        buildProd    ng build --env prod          private   true     dependencies           angular common     2 3 1         angular compiler     2 3 1         angular core     2 3 1         angular forms     2 3 1         angular http     2 3 1         angular platform-browser     2 3 1         angular platform-browser-dynamic     2 3 1         angular router     3 3 1         angular material     2 0 0-beta 1         types google-libphonenumber     7 4 8        angular2-datatable     0 4 2        apollo-client     0 4 22        core-js     2 4 1        rxjs     5 0 1        ts-helpers     1 1 1        zone js     0 7 2        google-libphonenumber     2 0 4        graphql-tag     0 1 15        hammerjs     2 0 8        ng2-bootstrap     1 1 16          devDependencies           types hammerjs     2 0 33         angular compiler-cli     2 3 1         types jasmine    2 5 38         types lodash     4 14 39         types node     6 0 42        angular-cli    1 0 0-beta 24        codelyzer     2 0 0-beta 1        jasmine-core    2 5 2        jasmine-spec-reporter    2 5 0        karma    1 2 0        karma-chrome-launcher     2 0 0        karma-cli     1 0 1        karma-jasmine     1 0 2        karma-remap-istanbul     0 2 1        protractor     4 0 13        ts-node    1 2 1        tslint     4 0 2        typescript     2 0 3        typings    1 4 0

User · Answer

Just use the build-in feature of Angular CLI  ng update   to update to the latest version

User · Answer

Solution that worked for me    Delete node modules and dist folder  in cmd    ng update --all --force  in cmd    npm install typescript    3 4 0 and  lt 3 5 0  --save-dev --save-exact  in cmd    npm install --save core-js Commenting import  core-js es7 reflect   in polyfill ts  in cmd    ng serve

User · Answer

To update Angular CLI to a new version  you must update both the global package and your project s local package   Global package   npm uninstall -g  angular cli npm cache clean npm install -g  angular cli latest   Local project package   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 latest npm install   See the reference https   github com angular angular-cli

User · Answer

Remove    npm uninstall -g angular-cli   Reinstall  with yarn     npm install --global yarn yarn global add  angular cli latest ng set --global packageManager yarn    This will help ng-cli to use yarn   Reinstall  with npm   npm install --global  angular cli latest   Another way is to not use global install  and add  node modules  bin folder in the PATH  or use npm scripts  It will be softer to upgrade

User · Answer

USEFUL        Use the official Angular Update Guide select your current version and the version you wish to upgrade to for the relevant upgrade guide     https   update angular io       See GitHub repository Angular CLI diff for comparing Angular CLI changes    https   github com cexbrayat angular-cli-diff    UPDATED 26 12 2018   Use the official Angular Update Guide mentioned in the useful section above  It provides the most up to date information with links to other resources that may be useful during the upgrade   UPDATED 08 05 2018   Angular CLI 1 7 introduced ng update      ng update      A new Angular CLI command to help simplify keeping your projects up to date with the latest versions  Packages can define logic which will be applied to your projects to ensure usage of latest features as well as making changes to reduce or eliminate the impact related to breaking changes       Configuration information for ng update can be found here   1 7 to 6 update  CLI 1 7 does not support an automatic v6 update  Manually install  angular cli via your package manager  then run the update migration schematic to finish the process   npm install  angular cli  6 0 0 ng update  angular cli --migrate-only --from 1     UPDATED 30 04 2017   1 0 Update  You should now follow the Angular CLI migration guide    UPDATED 04 03 2017   RC Update  You should follow the Angular CLI RC migration guide    UPDATED 20 02 2017   Please be aware 1 0 0-beta 32 has breaking changes and has removed ng init and ng update   The pull request here states the following      BREAKING CHANGE  Removing the ng init  amp  ng update commands because their current implementation causes more problems than it solves    Update functionality will return to the CLI  until then manual updates   of applications will need done    The angular-cli CHANGELOG md states the following      BREAKING CHANGES    -  angular cli  Removing the ng init  amp  ng update commands because their current implementation causes more problems than it solves  Once   RC is released  we won t need to use those to update anymore as the   step will be as simple as installing the latest version of the CLI      UPDATED 17 02 2017   Angular-cli has now been added to the NPM  angular package  You should now replace the above command with the following -  Global package   npm uninstall -g angular-cli  angular cli npm cache clean npm install -g  angular cli latest   Local project package   rm -rf node modules dist   On Windows use rmdir  s  q node modules dist npm install --save-dev  angular cli latest npm install ng init     ORIGINAL ANSWER  You should follow the steps from the README md on GitHub for updating angular via the angular-cli   Here they are   Updating angular-cli  To update angular-cli to a new version  you must update both the global package and your project s local package   Global package   npm uninstall -g angular-cli npm cache clean npm install -g angular-cli latest   Local project package   rm -rf node modules dist tmp   On Windows use rmdir  s  q node modules dist tmp npm install --save-dev angular-cli latest npm install ng init   Running ng init will check for changes in all the auto-generated files created by ng new and allow you to update yours  You are offered four choices for each changed file  y  overwrite   n  don t overwrite   d  show diff between your file and the updated file  and h  help    Carefully read the diffs for each code file  and either accept the changes or incorporate them manually after ng init finishes

[angular] How to upgrade Angular CLI project?

Examples related to angular

Examples related to angular-cli