AngularJS 1到Angular 2升級策略

Question

我決定準備將我的應用程序從angular1.x更新到angular2.x。 There is我找不到有用的東西。我研究了this文件約1至2個升級策略。我發現所有移植中的魔力都是你必須在應用程序的根目錄下一次性使用Angular 1和Angular 1，切斷Angular1不受支持的代碼（過濾器，裝飾器等）並適應（讀取包裝！ ）所有Angular1支持的代碼（指令，服務等）。

上面給出的文檔中，您可以看到包裝的僞代碼。我認爲如果我將所有當前的代碼都包裹起來 - 它並沒有明確地加快速度。誰真的有這方面的經驗，請寫下它是如何真實的？我能否擔心我的應用程序開始放慢速度，並且在新的Angular2之後可能會更容易重寫它？但它非常大，這將是一大塊工作，我必須先思考。這就是爲什麼我會問真正的經歷誰擁有生產現實生活中的大項目並已遷移。

此外，我想問我如何檢查庫兼容性。也許有一些服務檢查我的應用程序並輸出結果什麼庫很好，哪些失敗？

Answer 1

是的，您可以在同一個應用程序中同時使用Angular 1 & Angular 2。只要按照下面的步驟：

1. 首先你需要創建「的package.json」所有必需的角2依賴性+ @角/升級的
2. 創建「tsconfig.json」並在中設置「compilerOptions」對象。 （爲了避免需要js錯誤）
3. 創建「system.config.js」文件（您可以從angular 2 quick-start repo複製此文件）。不要忘記在地圖對象中添加'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js'包。
4. 在您的index.html中包含Reflect.js，zone.js和system.config.js的JS文件之前</body>標記（爲了避免反射 - 元數據&區域js錯誤）。

5. 添加該代碼僅低於導入您的應用程序：

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

6. 創建「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);

7. 創建「的應用程序。模塊.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");}}
8. 創建「app.component.ts」文件，並添加如下代碼「： import { Component } from '@angular/core'; @Component({selector: 'angular2',template: '<h1>Angular 2 Component</h1>'}) export class AppComponent { }
9. 現在添加下面的代碼在你的角1個視圖文件： <angular2-app>Loading Angular 2...</angular2-app>

   就是這樣。 :)