AngularJS 1到Angular 2升级策略

Question

我决定准备将我的应用程序从angular1.x更新到angular2.x。 There is我找不到有用的东西。我研究过this文档，介绍了1到2个升级策略。我发现迁移中的所有魔法都是你必须在应用程序的根目录中使用Angular 1一次启动Angular 1和2，切断Angular1不支持的代码（过滤器，装饰器等）并进行调整（读取包装！ ）所有Angular1支持的代码（指令，服务等）。

我上面给出的文档，你可以看到包装器的伪代码。我想如果我把所有当前的代码都包装起来 - 它并没有明确地给它提速。谁真的有这方面的经验，请写一下它是如何真实的？我可以担心我的应用程序开始变慢，并且一旦新的Angular2可能更容易重写它吗？但它非常大，它将是一项重要的工作，我必须先思考。这就是为什么我要问真正的经验谁有生产现实生活的大项目并已经迁移。

另外，我想问一下如何检查库的兼容性。也许有一些服务检查我的应用程序并输出结果库哪些好，哪些失败？

Answer 1

是的，你可以同时使用Angular 1＆amp; Angular 2在同一个应用程序中。只需按照以下步骤操作：

1. 首先，您需要创建“package.json”，其中包含所有必需的角度2依赖关系+ @ angular / upgrade
2. 创建“tsconfig.json”并在“compilerOptions”对象中设置"module": "system"。 （为避免需要js错误）
3. 创建“system.config.js”文件（您可以从angular 2 quick-start repo中复制此文件）。不要忘记在地图对象中添加'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js'包。
4. 在</body>标记之前的index.html中包含Reflect.js，zone.js和system.config.js的JS文件（以避免反射元数据和区域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. 创建“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");}}
8. 创建“app.component.ts”文件并添加以下代码“： import { Component } from '@angular/core'; @Component({selector: 'angular2',template: '<h1>Angular 2 Component</h1>'}) export class AppComponent { }
9. 现在在Angular 1视图文件中添加以下代码： <angular2-app>Loading Angular 2...</angular2-app>

     

   就是这样。 ：）