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>

   就是这样。 :)