When the Google Angular team releases a new version I like to move onto it. I do this by upgrading Angular, starting a new project, and then bringing in the source code from my existing project.
I’ve been doing my Angular development on an Amazon Web Services Ubuntu Linux server. The examples I show here are Linux operating system commands that overwrite files. Please be careful and do not expect that I will be accountable if you try this and anything goes wrong. Consider making a backup of your system before you begin.
[10-May-2018: I don’t have this working yet for Angular 6. I think the problem is that flex-layout is not yet published for Angular 6. Waiting for that.]
Record the old version numbers
As a reference, I issue the ng version command in my existing project and keep a copy of the results in an open text editing window. Here my old existing project is randomizer:
cd ~/randomizer/ ng version
Then I proceed with my upgrade process.
Upgrade Angular and create new project
To upgrade Angular I actually just install it again. Here my new project name is shufflizer:
npm install -g @angular/cli npm install --save @angular/material @angular/cdk npm install @angular/flex-layout --save ng new shufflizer
I do a build of the new project at this point to confirm. It’s the stock starter project. There should be no error messages:
cd ~/shufflizer/ ng build --target=production --base-href '/trashthis/'
Also at this point I can issue the ng version command in the new project and confirm that I am running a new version of Angular. I look to see that the version numbers are mostly higher than the ng version results from my old project. If they are then I figure I must be on the right track:
cd ~/shufflizer/ ng version
Example results:
Angular CLI: 1.7.4 Node: 9.0.0 OS: linux x64 Angular: 5.2.10 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router @angular/cdk: 5.2.5 @angular/cli: 1.7.4 @angular/flex-layout: 5.0.0-beta.14 @angular/material: 5.2.5 @angular-devkit/build-optimizer: 0.3.2 @angular-devkit/core: 0.3.2 @angular-devkit/schematics: 0.3.2 @ngtools/json-schema: 1.2.0 @ngtools/webpack: 1.10.2 @schematics/angular: 0.3.2 @schematics/package-update: 0.3.2 typescript: 2.5.3 webpack: 3.11.0
Bring in the source code from my existing project
Again, my old project is randomizer. The new project is shufflizer.
The cp ~- command syntax is the Unix/Linux way to copy a file from the previous directory into the current directory. The cp -r gets subdirectories and their contents too:
cd ~/randomizer/src/ cd ~/shufflizer/src/ cp ~-/index.html . cp ~-/styles.css . cd ~/shufflizer/src/app/ cp -r ~/randomizer/src/app/* .
Now I can build the new project. It’s a new version of the project that I have been working on. It builds totally clean, with the latest version of Angular.