angularjs - AngularJS 1到Angular 2升级策略

我决定准备将我的应用程序从angular1.x更新到angular2.x。There is我找不到有用的东西。我研究了this文档中的1到2个升级策略。我发现迁移的所有魔力在于，你必须从应用程序根目录中的angular1开始，一次启动angular1和angular 2，切断angular1不支持的代码（过滤器、装饰器等）并调整（read wrap！）所有Angular1支持的代码（指令、服务等）。
我在上面给出的文档中，可以看到包装器的伪代码。我认为如果我包装我所有的当前代码-它并没有显式地给它速度。谁真的有这方面的经验，请写下它是如何在现实中？我是否可以担心我的应用程序开始变慢，一旦有了新的语言，可能会更容易重写它？但它非常大，它将是一个很大的工作，我必须考虑之前。这就是为什么我要问的是那些有生产实际生活中的大项目并已经迁移的实际经验。
另外，我想问一下如何检查库的兼容性。也许有一些服务可以检查我的应用程序并输出结果哪些库是好的哪些是失败的？

最佳答案

是的，可以在同一应用程序中同时使用角度1和角度2。只需遵循以下步骤：
首先，您需要创建“package.json”，其中包含所有必需的angular 2依赖项+@angular/upgrade
创建“tsconfig.json”并在“compileoptions”对象中设置"module": "system"。（以避免需要js错误）
创建“system.config.js”文件（您可以从Angular 2 Quick Start Repo复制此文件）。不要忘记在map对象中添加'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js'bundle。
在index.html中</body>标记之前包含reflect.js、zone.js和system.config.js的js文件（以避免reflect元数据和zone 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>
就是这样。：）