So Angular 6 is out! It comes with many many exciting things, new tooling and easier ways to manage updates of dependencies.
Here's the official blog update
Here's the latest news from ngConf on Angular 6
The Angular CLI (now also updated to version 6 to match Angular) will make it make much simpler to update projects to future versions of Angular, by using ng update.
I’ve been updating all my side projects from Angular 4 or 5.2 to 6 just to see how the process went and it hasn’t been smooth but so far it’s all worked out.
The first thing you should do is check out the checkout the Angular update checklist.
Upgrading is just a few easy steps, but you might run into a hiccups so I’ll just discuss some of the bumps I ran into.
First, I had to update Angular CLI globally with:
> npm install -g @angular/cli
Here you can run ng -v and you should see:
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 6.0.0
Node: 9.11.1
OS: darwin x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.6.0
@angular-devkit/core 0.6.0
@angular-devkit/schematics 0.6.0
@schematics/angular 0.6.0
@schematics/update 0.6.0
rxjs 6.1.0
typescript 2.7.2
Then go into the project root folder and update the CLI there:
> ng update @angular/cli
Then update the angular core package:
> ng update @angular/core
If you are using Angular Material, be sure to update it as well:
> ng update @angular/material
While you are still inside your project’s root directory checkout how things are:
> ng -v
should see:
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 6.0.0
Node: 9.11.1
OS: darwin x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.6.0
@angular-devkit/core 0.6.0
@angular-devkit/schematics 0.6.0
@schematics/angular 0.6.0
@schematics/update 0.6.0
rxjs 6.1.0
typescript 2.7.2
Here a few times in upgrading various projects, a few of the packages had <error> instead of a version, so I just re-ran the update scripts.
RxJS 6 Breaking Changes
The checklist provides an install script for RxJs 6, but it didn’t work for me no matter what I tried.
With Angular 6, we get the latest RxJs 6, which contains breaking changes to some import paths. So if you want to have the old imports to still work or can’t make this portion of the update to work, then to make it simpler to upgrade your application, you can install the following compatibility module:
> npm i rxjs-compat
All in all, updating was relatively painless but it’s interesting to see immediately the effect on my smaller projects. For example, None of them are showing the loading spinner because the projects are bootstrapped and served up so quickly.
Enjoy everyone…I know my weekend is ruined as I’m going to be up to my eyeballs in Angular!
Quick note: remember to push your most up to date local changes to a repo before starting the update process so that you can recover in case updating goes wrong.
Top comments (15)
A quick update: I just successfully updated an production Angular v4.0.0 web application to 6. Here are all the steps I took:
This application did not use Angular Material.
I used the following as a checklist:
After updating my CLI and ensuring I'm on Node v8 or higher globally, I started updating the local package.
git checkout -b ng6UpdateThe from within the project root directory:
npm install @angular/cling update @angular/cling update @angular/coreng updateRefresh the tree view in VS Code to make sure the angular_cli.json was converted to angular.json.
npm i rxjs-compatIf you used ngRedux...
Because this was an Angular 4 project, the ng-redux library being used (/store@v6) needed to be changed (/store@v7 or latest):
npm i @angular-redux/store@latestJust to be sure I ran:
ng updateagain and received an all good message.ng serveshowed me one minor error which was due to an unused import so I just removed it.I'm still doing testing on all the functionalities as it's a pretty big application, but so far so good!
Remember to periodically check the package.json during the update process to make sure the changes are shown or just run ng-v and try some of the solutions in the comments of this post. The other thing you can try is manually updating the version numbers in the package.json and ng update:
Have you gotten HMR to work successfully in your projects that have been upgraded to Angular 6? I have been unable to get it to work. Also, the wiki article that explains how to enable HMR in an Angular 6 application seems wrong to me. See here: github.com/angular/angular-cli/wik...
I haven't tried it yet, but if I do, I'll post up an article.
Some people may be having issues upgrading, thanks to Angular material. Make sure to run:
ng update @angular/cdk
Thanks! If anyone ran into issues and found fixes please do post them here for everyone.
A gotcha I encountered is that I had to rebuild my custom theme file, because Angular Material's core styles have changed and certain things like MatMenu will break without the new CDK overlay styles. So I had to run 'node-sass src/app-theme.scss src/assets/app-theme.css' to update my app styles with Angular Material's new v6 styles (which are imported in my app-theme.scss). Related Stack Overflow post describing issue: stackoverflow.com/questions/504283...
To be honest I'm a bit disappointed with this release. All these update helpers a surely nice, but I don't see them as something so major while new features which I would mark as major are still being worked on ( Angular elements and Ivy).
Nice post nonetheless :)
True, the biggest update I, personally, was looking forward to was not included (Ivy) but this release still has some major updates that have meaningful benefits to enterprise development.
For example, being able to create your own component library and associating schematics to them really benefits a team who need to quickly develop in a cohesive style and feeling on multiple projects.
On the other hand, having small personal projects where I am impatiently trying to get to MVP, being able to generate a dashboard with working code quickly really makes a difference to me too.
Hopefully Ive and it's tree-shaking awesomeness gets here in the next weeks.
I ran this:
npm install -g @angular/clibut then
ng -vshowed Angular CLI was still at version 1.6.x.To upgrade to 6 I had to run:
npm install @angular/cli@latestI can't believe we are on angular 6 already. I wonder if their upgrade and support model will work for organizations?
jaxenter.com/angular-6-feels-14415...
"In fact, you’re guaranteed 18 months of long term support. That’s about 6 months of active development followed by 12 months of critical bugfixes and security patches."
The steps are not complete, I think I need the command to upgrade angular-cli.json to angular.json
quran.com/25
The steps are complete as
ng update @angular/cliwill do that for you.You can always refer to the official documentation via the links in the article.
Try to migrate from 4.1 to 6, it works on development.
On production (with AOT) generates lots of errors like:
TS2554: Expected 3 arguments, but got 2.
Any clues?
Thank you.
Reinhard Sual
Hard to say without seeing your code, was it working in 4.1 with
ng serve --aot?