AngularJS 1 to Angular 2 Upgrade Strategy

Question

I decided to prepare an update for my application from angular1.x to angular2.x. There is , I did not find something useful. I studied this document on the update strategy from 1 to 2. I realized that all the magic in migration is that you have to run Angular 1 and 2 at a time using Angular 1 in the application root, disable the unsupported Angular1 code (filters, decorators, etc.) And adapt (read wrap!) all supported Angular1 code (directives, services, etc.).

In the document I cited above, you can see the pseudo-code of the wrappers. I think that if I complete all my current code, it obviously will not give it speed. Who really has experience, please write, how is this real? Can I fear that my application will start to slow down and it might be easier to rewrite it after the new Angular2? But he is very big, it will be a lot of work, and I should think about it earlier. That is why I ask about real experience, which has large projects in real life and has already been transferred.

In addition, I want to ask how I check library compatibility. Maybe there is some service that checks my application and displays the results, which libraries are good and which fail?

Answer 1

Yes, you can use both Angular 1 and Angular 2 in one application. Just follow these steps:

• First of all you need to create "package.json" with all the necessary Angular 2 dependencies + @ angular / upgrade
• Create a "tsconfig.json" and set "module": "system"to "object compilerOptions . (To avoid errors js)
• Create a "system.config.js" file (you can copy this file from the Angular 2 quick launch repository.). Remember to add the package '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js'to the map object.
• JS Reflect.js, zone.js system.config.js index.html </body> ( js ).

• , :

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

• "main.ts" : 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);

• "app.module.ts" : 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");}}
• "app.component.ts" ": import { Component } from '@angular/core'; @Component({selector: 'angular2',template: '<h1>Angular 2 Component</h1>'}) export class AppComponent { }
• Angular 1 : <angular2-app>Loading Angular 2...</angular2-app>

  .:)