Стоит ли мигрировать с Angular 2 на Angular 4?

Сообщество Hello SO и Angularians!

Итак, я посередине развиваю огромную платформу в Angular 2. И я понял, что многие внешние библиотеки и зависимости для Angular 2 переносятся на новый Angular 4. Дайте мне много ошибок, очевидно.

Я мог бы разветкить эти библиотеки и использовать разветвленные версии и подписаться на главную библиотеку, или я мог бы просто обновить до Angular 4 моего проекта.

Вопросы, на которые нужно ответить, чтобы определить, стоит ли мне мигрировать:

  • Совместимость с Angular 2.4

Я нашел некоторые адаптации для обеспечения совместимости с наследием, например: https://github.com/angular/angular/commit/e99d721

  • Изменяет ширину приложения

Должен ли я пройти через все мое приложение и начать исправление?

Я имею в виду, что основные функции переработаны таким образом, что мне придется пересмотреть многие из них?

Или, есть много несовместимости build/core, которые будут держать меня занятыми на днях исправлением ошибок/предупреждений компиляции вместо разработки?

Я не прошу кого-то сделать для меня исследование. Я спрашиваю людей, что, возможно, уже прошел этот процесс или просто хорошо знаю обе версии, чтобы дать мне несколько советов по опыту, разъяснения, и т.д.

На данный момент я делаю свое исследование здесь:

UPDATE

Я просто перешел на Angular 4. Ссылка, которую @PierreDuc поставил в его ответе, - очень хороший инструмент, чтобы иметь достойный ориентир в процессе миграции.

Я бы порекомендовал:

Я бы также рекомендовал передать ваш текущий проект, создать новую ветку в вашем репозитории dev и продолжить миграцию в этой ветке.

Проблема, с которой я столкнулся:
Input, Output и ContentChild будут импортированы с неправильного пути.

Мой случай:

import { Component, OnInit, OnDestro } from '@angular/core';
import { Input, ContentChild } from "@angular/core/src/metadata/directives";

Решение:

import { Component, OnInit, OnDestroy, Input, ContentChild } from '@angular/core';

Ответы

Ответ 1

Если вы проверите журнал изменений, вам нужно запомнить пару вещей:

Перед обновлением

  • Убедитесь, что вы не используете extends OnInit или используете расширения с любым событием жизненного цикла. Вместо этого используйте implements <lifecycle event>.
  • Остановить использование DefaultIterableDiffer, KeyValueDiffers#factories или IterableDiffers#factories
  • Прекратите использовать глубокий импорт, эти символы теперь отмечены ɵ и являются а не частью нашего общедоступного API.
  • Остановить использование Renderer.invokeElementMethod, поскольку этот метод был удален. В настоящее время нет замены.

Во время обновления

  • Обновите все ваши зависимости до версии 4 и последней версии typescript.
  • Если вы используете Linux/Mac, вы можете использовать: npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@4.0.0 [email protected] --save
  • Если вы используете анимацию в своем приложении, вам следует импортировать BrowserAnimationsModule из @angular/platform-browser/animations в ваше приложение NgModule.
  • Замените RootRenderer на RendererFactory2.
  • Замените Renderer на Renderer2.

После обновления

  • Переименуйте теги template в ng-template.
  • Замените OpaqueTokens на InjectionTokens.
  • Если вы вызываете DifferFactory.create(...), удалите ChangeDetectorRef аргумент.
  • Замените ngOutletContext на ngTemplateOutletContext.
  • Замените CollectionChangeRecord на IterableChangeRecord

источник

Ответ 2

Angular команда объявила, не позвонив angular 2 или angular 4, позвоните по телефону angular, и на каждые 6 месяцев произойдет серьезное обновление. Я столкнулся с проблемой в angular v4. 0.0, поэтому измените конфигурацию в webpack

  new webpack.ContextReplacementPlugin(
                // The (\\|\/) piece accounts for path separators in *nix and Windows
                /angular(\\|\/)core(\\|\/)@angular/,
                helpers.root('./src'), // location of your src
                {} // a map of your routes
            ),

И установите пакет @angular/анимации и импортируйте файл app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    imports: [
        BrowserAnimationsModule
    ]
})

Я предпочту обновить до последней версии angular. angular V4.0.0 уменьшил вес пакетов и увеличил производительность.

Ответ 3

Вот приятное 12-минутное видео, в котором показано, как перейти с angular 2 на angular 4. Упомянутые и сделанные три основных шага: -

1) Удалите старую папку node_modules, чтобы избежать ссылок на 2.X

2) измените все @ angular на 4.0.0 в package.json и выполните установку NPM. Если возможно, очистите кеш.

3) Существует высокая вероятность того, что при установке NPM вы получите несоответствие версии со сверстниками. исправь это. В приведенном выше видео объясняется, как исправить несоответствие сверстников.

Как сказано в приведенных выше ответах, вам нужно реализовать интерфейсы для события и т.д. По какой-то причине я не получал никаких проблем, а события работали так, как это было ранее в angular 2.

введите описание изображения здесь