AngularJS 1 to Angular 2 Стратегия обновления

Question

Я решаю подготовить обновление приложения от angular1.x до angular2.x. There is Я не нашел ничего полезного. Я изучил документ this о стратегии обновления от 1 до 2. Я понял, что вся магия в миграции состоит в том, что вы должны запускать Angular 1 и 2 за один раз с помощью Angular 1 в корне приложения, отключить неподдерживаемый код Angular1 (фильтры, декораторы и т. Д.) И адаптировать (прочитать обертку!) все поддерживаемые Angular1 коды (директивы, службы и т. д.).

Документ, который я привел выше, вы можете увидеть псевдокод оберток. Я думаю, что если я завершу весь мой текущий код, он явно не даст ему скорость. У кого действительно есть опыт, напишите, пожалуйста, как это реально? Могу ли я опасаться, что мое приложение начнет замедляться, и может быть проще переписать его после нового Angular2? Но он очень большой, это будет большая работа, и я должен думать об этом раньше. Вот почему я спрашиваю о реальном опыте, у которого есть крупные проекты в реальной жизни и уже перенесены.

Кроме того, я хочу спросить, как я проверяю совместимость библиотек. Может быть, есть какая-то услуга, которая проверяет мое приложение и выводит результаты, какие библиотеки хороши и что не удается?

Answer 1

Да, вы можете использовать как угловые 1 & Угловые 2 в одном приложении. Просто выполните следующие действия:

1. Прежде всего, вам нужно создать "package.json" со всеми необходимыми угловыми 2 зависимостей + @ угловой/обновить
2. Создать "tsconfig.json" и установить "module": "system" в "compilerOptions" объект. (Чтобы избежать ошибок js)
3. Создать "system.config.js" файл (вы можете скопировать файл из углового 2 быстрого перезапуска). Не забудьте добавить пакет '@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js' в объект карты.
4. Включите JS-файлы для Reflect.js, zone.js и system.config.js в свой index.html перед тегом </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. Создать «приложение. 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. Теперь добавьте ниже кода в файле Угловое 1 Вид: <angular2-app>Loading Angular 2...</angular2-app>

   Вот это. :)