AngularJS 1 to Angular 2 Upgrade Strategy

Question

I decide to prepare updating my application from angular1.x to angular2.x. There is I have no find something useful. I have studied this document about 1 to 2 upgrade strategy. I figured out that all magic in migration is that you have to start Angular 1 and 2 in one time with Angular 1 in the root of the application, cut off the Angular1 unsupported code(filters, decorators and etc) and adapt(read wrap!) all Angular1 supported code(directives, services and etc).

The document that I have given above, you can see the pseudo code of the wrappers. I think if I wrap all of my current code - it doesn't explicitly give it speed. Who really have experience about it, write please how is it in real? Can I feared that my application starts to slow down, and may be easier to rewrite it once a new Angular2? But it`s very big, it will be a big piece of work and I have to think before. That why I ask about real experience who have production real life big projects and already migrated.

Also, I want to ask how I check libraries compatibilities. Maybe there is some service that checks my app and output results what libraries are good and what fails?

Answer 1

Yes, You can use both Angular 1 & Angular 2 in the same application. Just follow the below steps:

1. First of all you need to create "package.json" with all required angular 2 dependencies + @angular/upgrade
2. Create "tsconfig.json" and set "module": "system" in "compilerOptions" object. (To avoid require js errors)
3. Create "system.config.js" file (you can copy this file from angular 2 quick-start repo.). Don't forget to add '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js' bundle in a map object.
4. Include JS files for Reflect.js, zone.js, and system.config.js in your index.html just before the </body> tag (To avoid reflect-metadata & zone js errors).
5. Add this code just below that to import your app:

    <script type="text/javascript">
        System.import('app').catch(function(error){
        console.log(error);
        });
    </script>

6. Create "main.ts" file and add below code :

    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { UpgradeModule } from '@angular/upgrade/static';
    import { AppModule } from './app.module';
    import { AppComponent } from './app.component';
    import { downgradeComponent } from '@angular/upgrade/static';
    platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.body, ['<app-name>']);
    });
    angular.module('<app-name>', []).directive('angular2App',
downgradeComponent({component: AppComponent}) as angular.IDirectiveFactory);

7. Create "app.module.ts" file and add the below code:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { UpgradeModule } from '@angular/upgrade/static';
    import { AppComponent } from './app.component';
    @NgModule({imports: [BrowserModule,UpgradeModule],declarations: [AppComponent],entryComponents: [AppComponent]})
    export class AppModule {ngDoBootstrap() {console.log("Bootstrap Angular 2");}}

8. Create "app.component.ts" file and add below code":

    import { Component } from '@angular/core';
    @Component({selector: 'angular2',template: '<h1>Angular 2 Component</h1>'})
    export class AppComponent { }

9. Now add the below code in your Angular 1 view file :

<angular2-app>Loading Angular 2...</angular2-app>

That's it. :)