Я завершил обновление RC4 =› 2.1.2 для одного проприетарного приложения и одного приложения с открытым исходным кодом. Даже при наличии опыта этот процесс далеко не эффективен и не лишен проблем, поскольку различные библиотеки, модули и системы ломаются или иным образом влияют друг на друга.

Понятно, что версии-кандидаты Angular 2 на самом деле были альфа-версиями, а то, что мы сейчас используем в версии 2.1.1, — это бета-версии. Можно сказать, что Angular Core в настоящее время находится в состоянии Release Candidate, но экосистема полуобязательных модулей, составляющих платформу, в основном находится в той или иной форме Alpha или Beta.

Давайте начнем

Если вы сначала обновите свою версию CLI с beta.10 до beta.19, вы можете увидеть это сообщение об ошибке:

Обратите внимание, что здесь есть обновленное руководство: https://github.com/angular/angular-cli/wiki/Upgrading-from-Beta.10-to-Beta.14

Я также отправил PR, чтобы улучшить грамматику этого предупреждающего сообщения об обновлении.

Первый шаг этого полезного руководства — убедиться, что вы используете Angular RC6 или выше. Таким образом, вы обнаружите, что вам нужно обновить Angular RC4 до последней версии, которая включает в себя серьезное критическое изменение ngModules, объявленное в этой записи блога. Этот пост в блоге, анонсирующий Angular RC5, включает действительно полезную ссылку на руководство по миграции. К сожалению, это руководство по миграции (https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html) имеет номер 404 на сайте документации Angular.io.

Теперь задача найти руководство по миграции, которое работает для RC4 до финальной версии.

На Реддите обсуждалось это утерянное руководство по миграции, но оно не указывает на новое место.

Существует вопрос StackOverflow, который ставит именно этот вопрос, но первое предложенное решение кажется наиболее трудоемким вариантом… просмотрите журналы изменений для RC5, RC6, RC7 и окончательного варианта на наличие критических изменений, а затем внесите коррективы в свой проект. Второй вариант, который я рассматривал, — создать новый проект с последней версией angular-cli beta.19, а затем перенести эту конфигурацию в существующий проект.

После недолгих поисков я не нашел ничего, что меня бы устраивало. Несколько руководств охватывают около 25% того, что мне нужно, но я не смог найти ничего более полного.

Сначала освойте концепции

Я настоятельно рекомендую прочитать следующее перед тем, как начать:

Первый — это Пост в блоге команды Angular, в котором рассказывается о причинах существования ngModule и о том, как он вам помогает.

Затем официальные документы по ngModule охватывают некоторые ключевые шаблоны, такие как Основной модуль и Общий модуль. Он также охватывает ленивую загрузку модулей.

Начните с одного ngModule

Этот шаг включает в себя создание одного модуля и добавление к нему всего. Это имеет смысл для небольших и средних проектов. Если ваш проект уже большой, вам нужно перейти к следующему шагу.

По сути, этот шаг просто включает в себя использование ссылок на документы выше, чтобы создать ваш AppModule и соединить все вместе.

Прочь шаблон!

После того, как у вас есть ngModule, вам понадобится намного меньше шаблонов. К сожалению, вы (или angular-cli) уже написали его, поэтому вам придется пойти и удалить его сейчас. Это включает в себя изменение всех ваших компонентов путем удаления их директив, провайдеров, каналов и множества импортов, которые больше не нужны.

Создать общий модуль

Используйте документы для создания общего модуля и переместите свои сервисы для всего приложения и общие модули Angular (FormsModule, RouterModule и т. д.) в этот новый общий модуль.

Оцените свой проект на предмет модульности

Теперь вам нужно подумать о своем проекте и выяснить, имеет ли смысл разбивать определенные маршруты на лениво загружаемые модули. В идеале ваш модуль, загружаемый в корне вашего приложения, должен быть максимально компактным. После того, как вы определили эти модули, самое время их создать и приступить к настройке ленивой загрузки в роутере.

Перенос Angular-CLI

Хорошо, теперь, когда вы настроили ngModules и обновили свой package.json для использования @angular/xxx: 2.1.2, вы готовы приступить к руководству по миграции angular-cli. Внимательно следуйте инструкциям, и вы пройдете около 90 % пути.

Многие люди заметили, что их фавикон и страницы 404 не отображаются в dist/ после обновления. Были зарегистрированы многочисленные ошибки, но в beta.19 это было исправлено. Внесите изменения ниже, чтобы воспользоваться преимуществами этой новой функции, которая позволяет указать массив активов.

angular-cli.json
Старый

"assets": "assets",

Новый

"assets": [
  "assets",
  "elements.html",
  "404.html",
  "favicon.ico",
  "manifest.webapp",
  "icons"
],

Очевидно, что содержимое этого массива будет специфичным для вашего приложения.

Перенос Angular Material2

Их руководство по началу работы предоставляет минимальный уровень помощи, необходимый для того, чтобы все заработало. Это немного отличается от того, что было найдено в сообщении в блоге RC5. Теперь есть один MaterialModule, который вам нужно загрузить.

src/app/app.module.ts

import { MaterialModule } from '@angular/material';

@NgModule({
  imports: [MaterialModule.forRoot()],

Если вы используете какой-либо из их слайдеров, вам нужно будет импортировать Hammer.js с новым процессом angular-cli.

angular-cli.json

{
  "scripts":[
    "../node_modules/hammerjs/hammer.js"
  ]
}

Кроме того, в material2 теперь есть система тем, которую вам нужно будет настроить, чтобы стили ваших компонентов пользовательского интерфейса выглядели хорошо (то есть не были в основном серыми). Смотрите их руководство по темам здесь, чтобы настроить это.

Перенести Firebase

Если вы используете Firebase SDK (требуется для многих функций, таких как Firebase Storage, которые еще не поддерживаются в AngularFire2), то способ загрузки этой библиотеки изменился в файле angular-cli.

Убедитесь, что вы не включили определения @types/firebase в свой package.json.

angular-cli.json

{
  "scripts":[
    "../node_modules/firebase/firebase.js"
  ]
}

Обновите AngularFire2

Их документы весьма полезны, но они охватывали только около 95% того, что мне нужно было сделать. Последние 5% были довольно болезненными, так как то, что я заработал в бета-версии angular-cli beta.17, нуждалось в дополнительной настройке с помощью beta.19.

Чтобы просто использовать AngularFire2 без Firebase Auth, вы можете сделать это:

src/app/app.module.ts

import { AngularFireModule } from 'angularfire2';

const firebaseConfig = {
  apiKey: '<your-key>',
  authDomain: '<your-project-authdomain>',
  databaseURL: '<your-database-URL>',
  storageBucket: '<your-storage-bucket>'
};

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig)
  ],

Если вы используете Firebase Auth, вам понадобится немного больше. Они освещают это в своих Документах авторизации.

Я отправил PR, чтобы упростить эти документы.

src/app/app.module.ts

import { AngularFireModule, AuthProviders, AuthMethods } from 'angularfire2';

const myFirebaseConfig = {
  apiKey: '<your-key>',
  authDomain: '<your-project-authdomain>',
  databaseURL: '<your-database-URL>',
  storageBucket: '<your-storage-bucket>',
}

const myFirebaseAuthConfig = {
  provider: AuthProviders.Google,
  method: AuthMethods.Redirect
}

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(myFirebaseConfig, myFirebaseAuthConfig)
  ],

Устранение неполадок
Мне нужно было сделать немного больше, чтобы решить некоторые проблемы с TypeScript. Их существующие документы здесь, похоже, были разработаны для более старой версии angular-cli. Мне нужно было удалить @types/firebase из моего package.json и использовать typedefs из Firebase SDK.

src/tsconfig.json

"files": [
  "../node_modules/firebase/firebase.d.ts"
]

Если вы используете новую бета-версию 6 версии AngularFire2, этот шаг не требуется, так как эти определения типов включены в AngularFire2. Их повторное добавление приведет к множеству ошибок повторяющегося типа.

Обновите Angular2-Google-карты

Документы здесь довольно исчерпывающие, и как только я следовал им, все, казалось, просто работало. Основное изменение связано с ngModule.

Они также исправили несколько неприятных ошибок в последнем выпуске версии 0.15.0.

src/app/app.module.ts

import { AgmCoreModule } from 'angular2-google-maps/core';

@NgModule({
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: 'YOUR_KEY'
    })
  ],

Обновите Angular2-полимер

Команда Vaadin проделала большую тяжелую работу, чтобы упростить этот процесс. Их документацию можно найти здесь.

В рамках этого процесса я отправил им PR, чтобы исправить ссылку в README на эти документы.

Одним из ключевых изменений здесь является то, как выполняется начальная загрузка полифилла веб-компонентов из-за изменений в файле angular-cli. Это включает в себя создание файла main-polymer.ts, который запускает загрузку вашего приложения Angular после запуска события WebComponentsReady.

src/main-polymer.ts

document.addEventListener('WebComponentsReady', () => {
  // Load Angular app
  require('./main.ts');
});

Затем вам нужно обновить конфигурацию angular-cli, чтобы использовать этот новый main-polymer.ts в качестве точки входа вашего приложения.

angular-cli.json

"main": "main-polymer.ts",

Еще одним ключевым отличием от angular-cli является упрощение загрузки файла webcomponents-lite.min.js. Я также решил получить его от NPM вместо Bower.

angular-cli.json

{
  "scripts":[
    "../node_modules/webcomponents.js/webcomponents-lite.js"
  ]
}

Устранение проблем с основными веб-компонентами

Я обнаружил, что ключом здесь было требование скриптов Basic Web Component в файле main-polymer.ts, определенном как часть конфигурации Angular2-Polymer выше. Эти веб-компоненты не имеют определений типов для TypeScript, и импорт их модулей ES6 был кошмаром.

src/main-polymer.ts

document.addEventListener('WebComponentsReady', () => {
  // Load basic web components
  require('../node_modules/basic-arrow-selection');
  require('../node_modules/basic-carousel');
  require('../node_modules/basic-page-dots');

  // Load Angular app
  require('./main.ts');
});

Это отчасти работало, но все же приводило к ошибкам, так как angular-cli не имеет настроенного загрузчика ES6 (отдельно от загрузчика TypeScript) и не позволяет настраивать конфигурацию Webpack. Этот ES6 по-прежнему нормально работал в последних версиях Firefox, Chrome и Safari, но не работал в IE11. Из-за этого я удалил основные веб-компоненты из своего проекта и вместо этого использовал карусель ngBootstrap.