Пожалуйста, следуйте нижеуказанным пунктам при обновлении угловых 5 до 7
Angular Update Guide | 5.2 -> 7.2 for Advanced Apps
Перед обновлением
1) Если вы импортируете какие-либо анимациисервисы или инструменты из @ angular / core, вы должны импортировать их из @ angular / animations
2) Заменить ngOutletContext на ngTemplateOutletContext.
3) Заменить CollectionChangeRecord на IterableChangeRecord
4) Везде, где вы используете Renderer, теперь используйте Renderer2
5) Если вы используете preserveQueryParams, вместо этого используйте queryParamsHandling
6) Если вы используете устаревшие HttpModule и Httpсервис, переключитесь на HttpClientModule и сервис HttpClient.HttpClient упрощает эргономику по умолчанию (вам больше не нужно отображать на json) и теперь поддерживает типизированные возвращаемые значения и перехватчики.Подробнее об angular.io
7) Если вы используете DOCUMENT из @ angular / platform-browser, вы должны начать импортировать его из @ angular / common
8) Везде, где вы используете ReflectiveInjector,теперь используйте StaticInjector
9) Выберите значение off для preserveWhitespaces в вашем tsconfig.json под ключом angularCompilerOptions, чтобы получить преимущества этого параметра, который по умолчанию был отключен в v6.
Во время обновления
1) Убедитесь, что вы используете Node 8 или более позднюю версию
2) Обновите Angular CLI глобально и локально и перенесите конфигурацию в новуюформат angular.json, выполнив следующее:
npm install -g @angular/cli
npm install @angular/cli
ng update @angular/cli
3) Обновите все скрипты, которые могут быть в вашем package.json, чтобы использовать последние команды Angular CLI.Все команды CLI теперь используют две черточки для флагов (например, ng build --prod --source-map) для совместимости с POSIX.
4) Обновите все ваши пакеты Angular Framework до v6 и верную версиюRxJS и TypeScript.
ng update @angular/core
После обновления TypeScript и RxJS будут более точно передавать типы через ваше приложение, что может приводить к существующим ошибкам при наборе вашего приложения
5) В Angular Forms AbstractControl # statusChanges теперь генерирует событие PENDING, когда вы вызываете AbstractControl # markAsPending.Убедитесь, что если вы фильтруете или проверяете события из statusChanges, которые вы учитываете для нового события при вызове markAsPending.
6) Если вы используете totalTime из AnimationEvent в отключенной зоне, он больше не будет сообщать время0. Чтобы определить, сообщает ли событие анимации об отключенной анимации, вместо этого можно использовать свойство event.disabled.
7) Теперь ngModelChange генерируется после обновления значения / действительности в его элементе управления, а не долучше соответствовать ожиданиям.Если вы полагаетесь на порядок этих событий, вам нужно будет начать отслеживать старое значение в вашем компоненте.
8) Обновить угловой материал до последней версии.
ng update @angular/material
Это также автоматически перенесет устаревшие API.
9) Используйте ng update или обычные инструменты диспетчера пакетов для выявления и обновления других зависимостей.
10) Если вы настроили TypeScript набыть строгим (если в файле tsconfig.json вы установили строгое значение true), обновите свой tsconfig.json, чтобы отключить strictPropertyInitialization, или переместите инициализацию свойства из ngOnInit в свой конструктор.Вы можете узнать больше об этом флаге в примечаниях к выпуску TypeScript 2.7.
11) Удалите устаревшие функции RxJS 6, используя правила автоматического обновления rxjs-tslint
Для большинства приложений это будет означать запуск следующих двухкоманды:
npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json
12) Angular теперь использует TypeScript 3.1, узнайте больше о любых возможных критических изменениях: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-1.html
13) Angular теперь добавил поддержку дляУзел 10: https://nodejs.org/en/blog/release/v10.0.0/
14) Обновите v7 базовой платформы и CLI, запустив ng update @ angular / cli @ angular / core в своем терминале
15) Обновите Angular Material доv7, запустив ng update @ angular / material в своем терминале.Вам следует протестировать приложение на предмет изменения размеров и макета.
16) Если вы используете тесты со скриншотами, вам нужно будет восстановить золотые файлы на скриншоте, так как появилось много мелких визуальных настроек
После обновления
1) После того как вы и все ваши зависимости обновитесь до RxJS 6, удалите rxjs-compat.
npm uninstall rxjs-compat
2) Если вы используете работника Angular Service, перенесите все файлы версииed в файлымассив файлов.Поведение такое же.
3) Прекратите использовать matRippleSpeedFactor и baseSpeedFactor для ряби, используя вместо этого конфигурацию анимации.