Angular v4 Final and Angular CLI v1 Final Released!
#Angular v4 upgrade in one Tweet. Only missing the updates to package.json versions. https://t.co/BlxP6VBu6B
— Michael Prentice (@Splaktar) March 24, 2017
Update app.module.ts:
— Michael Prentice (@Splaktar) March 24, 2017
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
imports: [BrowserAnimationsModule, ...]
For most projects not using Angular Universal, it’s just that easy to upgrade from Angular v2 to Angular v4!
The blog post announcing the release contains details on the new features, performance improvements, and the upgrade path.
To recap the major features
Animations pulled out of core for performance, separation of concerns
*ngIf supports and else syntax
*ngFor supports an as syntax to assign local variables
Angular Universal is now officially part of Angular core
TypeScript 2.1+ support
Improved template error messages
Angular CLI v1
Thankfully the Angular CLI update from 1.0.0 RCs to 1.0.0 final is also quite straightforward. The changelog for the updates is useful reading, but what you really need is their excellent migration guide!
Obviously if you are using the CLI, then the migration guide is where you should start. It will handle everything you need regarding upgrading both the CLI and Angular.
Troubleshooting
If you do run into issues with your upgrade, then this interactive Angular Upgrade Guide may help you. Note that this guide is just getting started and will improve over time.
If you see warnings about typing checking being required when linting via the CLI, just update your link command to the following:
"lint": "ng lint --type-check"
I also ran into issues with the CLI’s production builds due to template validation.
One issue was regarding static variables in my components. Using these in templates results in an error that the property does not exist. I converted those variables to nonstatic as a temporary work around.
The other was related to checking that a string variable in an object was defined inside of
*ngFor
. This threw a very confusing template error (with the wrong line number). I was able to work around this by moving the checks into the component and assigning the result to aboolean
which was then used in the template.
Type 'string' is not assignable to type 'boolean'
I’m waiting for some feedback before opening bugs for these last two issues.
If you run into issues not found in these guides, please post a question to StackOverflow.