Angular 2 RC4 to RC5 migration

Question

With the final release of Angular 2.0, our application needs to undergo the migration. I am first migrating from RC4 to RC5 and then to final. I followed the migration steps from barbarianmeetscoding-updating-your-angular-2-app-from-rc4-to-rc5-a-practical-guide and also from angular.io - rc4-to-rc5.html.

Our application is a big application with 100 odd components. My question is , for the migration to be successful, should I make changes to all components at once or can I take them one component at a time?

I have made the necessary changes to main.ts, package.json , app.ts and introduced app.module.ts. To begin with I moved the component directives and providers from app.ts to app.module and made necessary changes in app.routes. But I get the following error

But there is no explicit use of toString() in the mentioned component.

app.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import * as ngCore from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule} from '@angular/http';
import {HTTP_PROVIDERS} from '@angular/http';
import {routing} from './app.routes';
import { App}  from './app';
import {LocationStrategy, HashLocationStrategy} from  '@angular/common';
import {HttpService}  from '../service/http/httpService';
import {Button} from '../components/button';
import {Checkbox} from '../components/checkbox';
import {PipeSafe} from "../pipe/pipe-safe";
import {OrderBy} from "../pipe/orderby";
import {Number} from '../pipe/number';
@NgModule({
    imports: [
       BrowserModule,
       FormsModule,
       HttpModule,
       routing
    ],
    declarations: [
       App,
       PipeSafe,
       OrderBy,
       Number
    ],
    providers: [
       ngCore.provide(LocationStrategy, {useClass: HashLocationStrategy}),
       ngCore.provide('TemplateComponents', { useValue: {
          'button': Button,
          'checkbox': Checkbox,

       }}),
    HttpService
    ],
    bootstrap:    [ App ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
  })
  export class AppModule { }

have you checked [this](https://github.com/angular/angular/issues/10612) out. looks similar to what you are dealing with — Bean0341, Sep 20 '16 at 21:27

score 0 · Answer 1 · answered Sep 20 '16 at 20:28

0

Been there. It was very painful but it's comforting that migrating from RC5 to the final release was much easier. Maybe you should also think about migrating straight to the final, not to the RC5? Regarding you question: it depends on the overall architecture of your app. Sometimes it's easier to go one component by one. On the other hand dependencies between components may be so crucial that you'll need to make all the changes at once.

I'm not 100% sure from where's the error you get but probably it's because you've got a mistake in imports and declarations in app.module. Something that should go to imports went to declarations or the other way around. toString() is framework's method that return string representation of this object.

answered Sep 20 '16 at 20:28

Mateusz Witkowski

1,646
10
24

So even if I dont move directives from all my components to the app.module, my application should still run because its mentioned that for now all the directives and pipes will get hoisted. Right? – user3344978 Sep 20 '16 at 21:42
That's right. But you should consider it since it would be required in releases starting from RC6. – Mateusz Witkowski Sep 20 '16 at 21:48
Releases starting from RC6 will require me to move ALL directives , pipes and services into app.module? In our app we have 100 odd components and about 15 services. So, should I move every single directive and service into app.module? Or should i move only the ones that most commonly shared ? – user3344978 Sep 26 '16 at 15:12

score 0 · Answer 2 · edited May 23 '17 at 10:31

In my upgrade to 2.0.0, I found it easiest to:

create a simple, somewhat representative, 2.0.0-rc.4 application using Angular CLI; and then,
upgrade the application to 2.0.0.

I used different versions of Angular CLI to get the dependencies and configuration files (including webpack) correct for the two stages of the migration. You'll need to experiment with Angular CLI to find the version which produces an Angular 2.0.0-rc.4 application); you can use the latest version to produce the final application.

Then I applied the set of changes needed for the 2.0.0 upgrade of my simple application to my entire actual application; and, tested each component, making minor corrections as necessary.

Here's are some the issues, I encoutered, as I went through the upgrade process. Some of these, you'll (hopefully) skip right over if you do as I suggest above.

Module not found: Error: Can't resolve 'hammerjs'

Cannot find module './models/config'

"The package rxjs@5.0.0-beta.11 does not satisfy its siblings' peerDependencies requirements!"

TypeError: Cannot read property 'directoryExists' of undefined

@angular/forms Generic type 'Type<T>' requires 1 type argument(s)

Angular 2 RC4 to RC5 migration

2 Answers2