How To : Angular : 2.0.0-beta.15 => 2.4.1

Elrashid

Published in

Elrashid

4 min readDec 28, 2016

I opened an 7 weeks old project witch is working in production and want to update the Angular 2.0.0-beta.15 to 2.4.1

The only way is by reading the change log in the git-hub repository (you can find the links in the end)

Here what i need to change to make the app working withe new resale :

The reference #... now always means ref-.

Before:

Outside of ngFor, a #... meant a reference.
Inside of ngFor, it meant a local variable.

This pattern was confusing.

After:

<template #abc> now defines a reference to a TemplateRef, instead of an input variable used inside of the template.
Inside of structural directives that declare local variables, such as *ngFor, usage of #... is deprecated. Use let instead.
<div *ngFor="#item of items"> now becomes <div *ngFor="let item of items">
var-... is deprecated.
use # or a ref- outside of *ngFor
for ngFor, use the syntax: <template ngFor let-... [ngForOf]="...">

https://github.com/angular/angular/blob/master/CHANGELOG.md#200-rc0-2016-05-02

angular2/core -> @angular/core
angular2/compiler -> @angular/compiler
angular2/common -> @angular/common
angular2/platform/browser -> @angular/platform-browser (applications with precompiled templates) + @angular/platform-browser-dynamic (applications that compile templates on the fly)
angular2/platform/server -> @angular/platform-server
angular2/testing -> @angular/core/testing (it/describe/..) + @angular/compiler/testing (TestComponentBuilder) + @angular/platform-browser/testing
angular2/upgrade -> @angular/upgrade
angular2/http -> @angular/http
angular2/router -> @angular/router-deprecated (snapshot of the component router from beta.17 for backwards compatibility)
new package: @angular/router

npm install --save @angular/core @angular/compiler @angular/common @angular/platform-browser @angular/platform-browser-dynamic rxjs@5.0.0-beta.6 zone.js@0.6.12

https://github.com/angular/angular/blob/master/CHANGELOG.md#breaking-changes-2

forms:

We have removed the deprecated form directives from the built-in platform directive list, so apps are not required to package forms with their app. This also makes forms friendly to offline compilation.

Instead, we have exposed three modules:

OLD API:

DeprecatedFormsModule

NEW API:

FormsModule
ReactiveFormsModule

If you provide one of these modules, the default forms directives and providers from that module will be available to you app-wide. Note: You can provide both the FormsModule and the ReactiveFormsModule together if you like, but they are fully-functional separately.

Before:

import {disableDeprecatedForms, provideForms} from @angular/forms;bootstrap(App, [
  disableDeprecatedForms(),
  provideForms()
]);

After:

import {DeprecatedFormsModule} from @angular/common;@NgModule({
  declarations: [MyComponent],
  imports: [BrowserModule, DeprecatedFormsModule],
  bootstrap:  [MyComponent],
})
export class MyAppModule{}

core: (deprecations)

Instead of coreBootstrap, create an @NgModule and use bootstrapModule.
Instead of coreLoadAndBootstarp, create an @NgModule and use bootstrapModuleFactory.
Instead of bootstrapWorkerApp, create an @NgModule that includes the WorkerAppModule and use bootstrapModulewith the workerAppPlatform().
Instead of bootstrapWorkerUi, create an @AppModule that includes the WorkerUiModule and use bootstrapModulewith the workerUiPlatform() instead.
Instead of serverBootstrap, create an @AppModule and use bootstrapModule with the serverDynamicPlatform()instead.
Instead of PLATFORM_PIPES and PLATFORM_DIRECTIVES, provide platform directives/pipes via an ngmodules

core:

ApplicationRef.run is deprecated. Use NgZone.run directly
ApplicationRef.injector is deprecated. Inject an Injector or use NgModuleRef.injector instead
ApplicationRef.zone is deprecated. Inject NgZone instead.

core:

coreLoadAndBootstrap and coreBootstrap can't be used any more (without migration support). Use bootstrapModule / bootstrapModuleFactory instead.
All Components listed in routes have to be part of the declarations of an NgModule. Either directly on the bootstrap module / lazy loaded module, or in an NgModule imported by them.

core:

By default, Angular will error during parsing on unknown properties, even if they are on elements with a - in their name (aka custom elements). If you application is using custom elements, fill the new parameter @NgModule.schemaswith the value [CUSTOM_ELEMENTS_SCHEMA].

E.g. :

@NgModule({
    declarations: [MyComponentThatUsesAWebComponent],
    imports: [BrowserModule],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    bootstrap:  [MyComponentThatUsesAWebComponent],
  })
  export class MyAppModule{}core:

bootstrapModule and bootstrapModuleFactory have been moved to be members of PlaformRef. E.g. platformBrowserDynamic().bootstrapModule(MyModule).

core:

Bootstrap changes

import {NgModule} from '@angular/core';@NgModule({
  declarations: […], // directives, components, and pipes owned by this NgModule
  imports: [BrowserModule],
  providers: […], // additional providers
  bootstrap: [MainComponent],
})
class MyAppModule {}// Ahead of Time compile
import {platformBrowser} from ‘@angular/platform-browser’;platformBrowser().bootstrapModuleFactory(MyAppModuleNgFactory);// JIT compile long form
import {platformBrowserDynamic} from ‘@angular/platform-browser-dynamic’;platformBrowserDynamic().bootstrapModule(MyAppModule);https://github.com/angular/angular/blob/master/CHANGELOG.md#breaking-changes-2