От автора: мы рады представить Angular 5.1.0. Это второстепенный релиз, в котором добавлено несколько небольших функций и исправлен ряд багов. Кроме этого, мы выпустили версию 1.6 Angular CLI и стабильную версию Angular Material.
Новый Angular вышел и теперь можно праздновать!
Что нового?
Стабильный релиз Angular Material и CDK
Поддержка Service в CLI
Улучшенная поддержка Universal и AppShell в CLI
Исправлены сообщения об ошибках декоратора
Поддержка TypeScript 2.5
Чтобы ознакомиться с полным списком новых функций и исправленных багов, пожалуйста, посетите страницы Angular, Material и CLI.
Стабильный релиз Angular Material и CDK
После 11 альфа-релизов, 12 бета-релизов и 3 предвыпускных версий, мы рады представить релиз Angular Material 5.0.0 и Angular CDK, а также выход CDK от Angular Labs. Основанный на визуальном языке Material Design от Google, Angular Material предлагает 30 компонентов пользовательского интерфейса для приложений Angular. Вместе с этим Angular CDK предоставляет набор стандартных блоков, помогающих создать собственные пользовательские компоненты, без необходимости решать все те же проблемы снова и снова. Эти компоненты уже используются в коде многими приложениями Google, включая Google Analytics Suite, Google Cloud Platform Developer Console и Google Shopping Express.
Начиная с этого релиза, Angular Material будет придерживаться той же философии SemVer, что и Angular, а основные версии Angular Material и Angular CDK будут выходить одновременно с главными версиями основной платформы. Корректирующие релизы будут выходить раз в неделю, а второстепенные мы увидим, когда функции будут готовы.
Ознакомиться с документацией, демоверсиями и руководством можно на станице material.angular.io. Вы также можете следить за нашими успехами на GitHub, сейчас мы работаем над дополнительными элементами к библиотеке. В следующие месяцы не пропустите новый mat-tree, виртуальную прокрутку, компонентную тестовую программу и вспомогательную функцию перетаскивания.
Поддержка Service Worker в CLI 1.6
Эффективность – вот к чему во все времена стремились веб-разработчики, особенно это важно сейчас, в эпоху бешеного роста популярности WiFi и мобильной связи. Современные браузеры содержат новый API для создания сайтов, которые быстро и надежно грузятся, он называется Service Worker API.
Angular 5.0.0 вышел вместе с новым внедренным Service Worker, адаптированным под приложения Angular, а Angular CLI 1.6 использует поддержку создания приложений, которые задействуют эту новую функцию.
Применяя @angular/service-worker , можно улучшить качество загрузки приложения в браузерах, которые поддерживают API, и добиться того, что приложение будет загружаться как встроенное. Узнайте, как начать применять Angular Service Worker на нашем сайте.
Улучшенная поддержка Universal и App Shell в CLI 1.6
Вместе с релизом Angular CLI 1.6 мы представили и лучшую поддержку в плане включения Universal в существующие проекты посредством Schematics, a также поддержку App Shell.
Angular Universal
Чтобы добавить Universal в текущее CLI приложение, можно использовать в проекте следующие команды:
|
1 |
ng generate universal <name> |
Замените <name> на имя, которое вы хотите задать своему приложению Universal. Так вы создадите модуль Universal и автоматически настроите файл angular-cli.json. Потом вы можете перейти к шагу 4 в нашем руководстве по использованию universal.
Чтобы создать приложение Universal, просто введите следующую команду:
|
1 |
ng build --app=<name> |
App Shell
Следующая новая функция – это поддержка App Shell, теперь вы можете сгенерировать и построить оболочку приложения, которая использует специальную универсальную конструкцию, чтобы создать статический начальный визуализатор вашего приложения в index.html. Это позволяет предоставить лучший опыт пользователя, пока приложение загружается.
Для начала убедитесь, что вы импортировали RouterModule в NgModule вашего приложения и компонентный образец приложения <router-outlet></router-outlet>. App Shell использует маршрутизатор для отображения приложения. Вслед за этим выполните следующую команду:
|
1 |
ng generate app-shell [ --universal-app <universal-app-name>] [ --route <route>] |
Это добавит поддержку в оболочку вашего основного приложения angular-cli.json , задействуя приложение Universal, которое передается в качестве параметра. Если приложение Universal не передано, оно будет создано. Параметр маршрутизатора задает маршрутизацию для генерации (маршрутизатор необходим для поддержки App Shell). По умолчанию это /shell.
После этого просто создайте приложение как обычно, используя ng build и файл index.html добавит отображенный маршрутизатор из приложения.
Исправлены сообщения об ошибках декоратора
Качество диагностики, проводимой компилятором, значительно улучшилось, особенно когда декораторы содержат неподдерживаемые или некорректные выражения.
Например, не поддерживается вызов функции для создания шаблона:
Раньше это бы вызвало ошибку:
|
1 |
Error encountered resolving symbol values statically. Calling function ‘genTemplate’, function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol MyComponent in components.ts, resolving symbol MyComponent in components.ts |
Это сообщение об ошибке было исправлено и теперь оно предоставляет информацию об источнике и сути проблемы:
|
1 2 |
component.ts(9,16): Error during template compile of 'MyComponent'. Function calls are not supported in decorators but 'genTemplate' was called. |
Поддержка TypeScript 2.5
Мы добавили поддержку для TypeScript 2.5, который рекомендуется всем разработчикам. Этот релиз TypeScript содержит несколько нужных продвинутых функций.
Вы можете улучшить TypeScript, применяя yarn add typescript@’~2.5.3’или npm install typescript@’~2.5.3′.
Это улучшение необязательно и TypeScript 2.4 по-прежнему поддерживается для 5.x.x. Но мы еще не поддерживаем TypeScript 2.6. В наши планы входит добавить поддержку в будущий второстепенный выпуск.
Важное примечание: если код использует Injector.get(Token), где Token имеет статические члены, у вас возникнет проблема с TypeScript – скорее выдается тип {} чем Token. Вместо этого вы можете использовать Injector.get<Token>(Token), чтобы выдавался правильный тип.
Автор: Stephen Fluin
Источник: //blog.angular.io/
Редакция: Команда webformyself.
