Angular Update Guide | 2.0 -> 6.

0
Before Update
1. Don’t use extends OnInit, or use extends with any lifecycle event. Instead use
implements <lifecycle event>.
2. Don’t use deep imports, these symbols are now marked with ɵ and are not part of
public API.
3. Stop using Renderer.invokeElementMethod as this method has been removed. There is
currently no replacement.
4. Stop using DefaultIterableDiffer, KeyValueDiffers#factories, or
IterableDiffers#factories.

During the Update

1. If animations are used in the application, should import BrowserAnimationsModule
from @angular/platform-browser/animations in your App NgModule.
2. Angular began adding a novalidate attribute to form elements when you include
FormsModule. To re-enable native forms behaviors, use ngNoForm or add
ngNativeValidate.
3. Replace RootRenderer with RendererFactoryV2 instead.
4. If Animations and tests are used, add mods[1].NoopAnimationsModule to your
TestBed.initTestEnvironment call.
5. Rename your template tags to ng-template.
6. Replace any OpaqueToken with InjectionToken.
7. If there is a call to DifferFactory.create(...) remove the ChangeDetectorRef argument.
8. Don’t pass any arguments to the constructor for ErrorHandler
9. Replace TrackByFn function with TrackByFunction
10. For applications using locales other than en-us, need to import it and optionally
locale_extended_fr from @angular/common/i18n_data/locale_fr and
registerLocaleData(local).
11. Use skipTemplateCodeGen, instead of gendir.
12. Replace any animations services or tools imported from @angular/core, import them
from @angular/animations.
13. Replace ngOutletContext with ngTemplateOutletContext.
14. Replace CollectionChangeRecord with IterableChangeRecord
15. Replace Renderer with Renderer2
16. Replace preserveQueryParams with queryParamsHandling
17. Replace import DOCUMENT from @angular/platform-browser with @angular/common
18. Replace ReflectiveInjector with StaticInjector
19. Choose a value of off for preserveWhitespaces in your tsconfig.json to gain the benefits
of this setting, which was set to off by default in v6.
 20. Use Node 8 version or later
21. Update your Angular CLI globally and locally, and migrate the configuration to the new
angular.json format by running the following:
a. npm install -g @angular/cli
b. npm install @angular/cli
c. ng update @angular/cli
22. Update any scripts in your package.json to use the latest Angular CLI commands. All CLI
commands now use two dashes for flags (eg ng build --prod --source-map) to be POSIX
compliant.
23. Update all of Angular framework packages to v6, and the correct version of RxJS and
TypeScript.
a. ng update @angular/core
24. After the update, TypeScript and RxJS will more accurately flow types across application,
which may expose existing errors in application's typings
25. In Angular Forms, AbstractControl#statusChanges now emits an event of PENDING
when call AbstractControl#markAsPending. Ensure to filtering or checking events from
statusChanges that account for the new event when calling markAsPending.
26. If using totalTime from an AnimationEvent within a disabled Zone, it will no longer
report a time of 0. To detect if an animation event is reporting a disabled animation
then the event.disabled property can be used instead.
27. ngModelChange is now emitted after the value/validity is updated on its control instead
of before to better match expectations. If these are used, need to begin tracking the old
value in component.
28. Use ng update or your normal package manager tools to identify and update other
dependencies.
29. If TypeScript configured to be as gendir (if set strict to true in your tsconfig.json file),
update your tsconfig.json to disable strictPropertyInitialization or move property
initialization from ngOnInit to your constructor.

After the Update

1. Switch from HttpModule and the Http service to HttpClientModule and the
HttpClient service. HttpClient simplifies the default ergonomics and now supports
typed return values and interceptors.
2. Remove deprecated RxJS 6 features using rxjs-tslint auto update rules
3. For most applications this will mean running the following two commands:
npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json
Once and all of dependencies have been updated to RxJS 6, remove rxjs-compat.