Angular Universal — это технология, которая позволяет разработчикам запускать приложения Angular на сервере, обеспечивая рендеринг на стороне сервера и улучшая производительность, SEO, безопасность и возможности на стороне сервера.

Что такое Angular Universal

Angular Universal — это инструмент, который позволяет разработчикам Angular отображать свои приложения на сервере, повышая производительность и обеспечивая лучший пользовательский опыт. Рендеринг на стороне сервера включает в себя рендеринг начального представления приложения на сервере, а не в браузере. Это может обеспечить несколько преимуществ, включая повышение производительности, лучшую поисковую оптимизацию и более плавный пользовательский интерфейс, особенно на медленных устройствах или в сетях с низким качеством.

Angular Universal позволяет разработчикам Angular легко добавлять рендеринг на стороне сервера в свои приложения. Он предоставляет набор API и модулей, которые можно использовать для рендеринга приложения Angular на сервере, и автоматически заботится о деталях рендеринга на стороне сервера, таких как обработка запросов, рендеринг представлений и передача состояния между сервером и сервером. клиент.

В целом, Angular Universal — полезный и мощный инструмент для разработчиков Angular, которые хотят улучшить производительность и удобство работы своих приложений. Добавляя рендеринг на стороне сервера с помощью Angular Universal, разработчики могут создавать более быстрые, эффективные и привлекательные приложения, которые обеспечивают лучший пользовательский интерфейс.

Какие преимущества предлагает Angular Universal?

Angular Universal предлагает несколько преимуществ, в том числе:

  1. Улучшенная производительность и взаимодействие с пользователем: рендеринг на стороне сервера позволяет вашему приложению отображать начальное представление на сервере, что может сократить время первоначальной загрузки и улучшить взаимодействие с пользователем.
  2. Улучшение SEO: рендеринг на стороне сервера позволяет поисковым системам индексировать содержимое вашего приложения, что может улучшить видимость вашего приложения в результатах поиска.
  3. Улучшенная безопасность: рендеринг на стороне сервера может помочь защитить от определенных типов атак, таких как межсайтовый скриптинг (XSS), путем рендеринга пользовательского контента на сервере перед его отправкой клиенту.
  4. Улучшенные возможности на стороне сервера: Angular Universal позволяет использовать приложение Angular на сервере, что открывает новые возможности для обработки и рендеринга на стороне сервера.
  5. Улучшенный обмен кодом и переносимость: Angular Universal позволяет вам делиться кодом вашего приложения между сервером и клиентом, что может улучшить удобство сопровождения и переносимость вашего кода.

Как я могу установить Angular Universal?

  1. Чтобы установить Angular Universal, в вашей системе должна быть установлена ​​последняя версия Angular и Angular CLI. Вы можете проверить текущую версию, выполнив следующую команду:
ng --version

2. Если у вас нет последней версии, вы можете обновить Angular и Angular CLI, выполнив следующие команды:

npm install -g @angular/cli@latest
npm install -g @angular/core@latest

3. После установки последней версии Angular и Angular CLI вы готовы установить Angular Universal. Для этого вам нужно будет использовать Angular CLI для создания нового серверного приложения. Это можно сделать, выполнив следующую команду:

ng generate universal <app-name>

4. Замените <app-name> именем вашего приложения Angular. Эта команда создаст новое приложение на стороне сервера, основанное на вашем существующем приложении Angular, и автоматически настроит и установит необходимые зависимости для Angular Universal.

5. После того, как приложение на стороне сервера будет создано, вам нужно будет обновить существующее приложение Angular, чтобы использовать рендеринг на стороне сервера, предоставляемый Angular Universal. Для этого вам нужно будет обновить AppModule вашего приложения Angular, чтобы импортировать ServerModule и ServerTransferStateModule из пакета @angular/platform-server.

Вот пример того, как должен выглядеть ваш AppModule после того, как вы добавили необходимые импорты для Angular Universal:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { ServerTransferStateModule } from '@angular/platform-server';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: '<app-id>' }),
    ServerModule,
    ServerTransferStateModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule

Как я могу проверить, отображает ли angular мое приложение на сервере, а не на клиенте?

Чтобы проверить, отображает ли Angular ваше приложение на сервере, а не на клиенте, вы можете использовать функцию isPlatformServer, предоставляемую пакетом @angular/common. Эта функция возвращает логическое значение, указывающее, работает ли ваше приложение на сервере или на клиенте.

Вот пример того, как вы можете использовать функцию isPlatformServer, чтобы проверить, работает ли ваше приложение на сервере:

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformServer } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    if (isPlatformServer(this.platformId)) {
      console.log('App is running on the server');
    } else {
      console.log('App is running on the client');
    }
  }
}

В этом примере класс AppComponent внедряет токен PLATFORM_ID и использует его для проверки того, запущено ли приложение на сервере или на клиенте. Если приложение работает на сервере, на консоль записывается сообщение, указывающее на это. В противном случае регистрируется другое сообщение, указывающее, что приложение запущено на клиенте.

Используя функцию isPlatformServer, вы можете проверить, отображается ли ваше приложение Angular на сервере, а не на клиенте, и предпринять соответствующие действия на основе этой информации.

Какие распространенные ошибки при установке углового универсального?

Некоторые распространенные ошибки при установке Angular Universal включают следующее:

  1. Не использовать последнюю версию Angular и Angular CLI: для правильной работы Angular Universal требуется последняя версия Angular и Angular CLI. Если вы не используете последнюю версию, у вас могут возникнуть проблемы при установке или использовании Angular Universal.
  2. Неправильная настройка вашего приложения: Angular Universal использует серверное приложение, основанное на вашем существующем приложении Angular. Если это серверное приложение настроено неправильно, Angular Universal может работать не так, как ожидалось, или вообще не работать.
  3. Не обновлять AppModule вашего приложения Angular: чтобы использовать рендеринг на стороне сервера, предоставляемый Angular Universal, вам необходимо обновить AppModule вашего приложения Angular, чтобы импортировать необходимые модули и компоненты из пакета @angular/platform-server. Если вы забудете это сделать, Angular Universal может работать не так, как ожидалось.
  4. Не тестировать ваше приложение после установки Angular Universal: после установки Angular Universal важно протестировать ваше приложение, чтобы убедиться, что оно работает должным образом. Это может включать тестирование приложения на разных устройствах и в разных браузерах, а также проверку любых ошибок или проблем, которые могут возникнуть. Тщательно протестировав свое приложение, вы можете убедиться, что Angular Universal работает правильно и обеспечивает ожидаемые преимущества.

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

Некоторые другие распространенные ошибки и советы по работе с Angular Universal

  1. Избегайте ссылок на окна, документы и другие специфичные для DOM глобальные объекты, используя встроенные службы Angular, которые предоставляют абстракции для общих задач, например службу Renderer2 для работы с DOM. Вместо прямого доступа к окну или объектам документа вы можете внедрить сервис Renderer2 в свой компонент и использовать его методы для взаимодействия с DOM. В противном случае ваше приложение может неправильно отображаться на сервере.

Вот пример того, как вы можете использовать службу Renderer2 для добавления класса к элементу в DOM:

import { Component, OnInit, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  constructor(private renderer: Renderer2) { }

  ngOnInit() {
    // Get the element with the id 'my-element'
    const el = this.renderer.selectRootElement('#my-element');

    // Add the class 'my-class' to the element
    this.renderer.addClass(el, 'my-class');
  }

}

Используя службу Renderer2 и другие службы Angular, вы можете избежать ссылок на окна, документы и другие специфичные для DOM глобальные переменные и сделать свой код более модульным, переносимым и совместимым с SSR.

2. Проверьте, ссылаются ли некоторые из ваших пакетов на глобальные переменные DOM, такие как window или document.

В Angular вы можете использовать расширение Augury Chrome для проверки зависимостей ваших модулей и проверки, ссылаются ли они на окно, документ или другие глобальные переменные DOM.

Чтобы использовать Augury, сначала установите его из Интернет-магазина Chrome: https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhackkoklkejnhcd.

После установки Augury откройте приложение Angular в Google Chrome и щелкните значок Augury на панели инструментов, чтобы открыть панель Augury. На панели Augury щелкните вкладку Dependency Graph, чтобы просмотреть график зависимостей между модулями вашего приложения.

Чтобы проверить конкретный модуль, щелкните его узел на графике и найдите зависимости, которые ссылаются на окно, документ или другие глобальные переменные DOM. Если вы видите какие-либо такие зависимости, это означает, что модуль использует эти глобальные переменные, и вы можете вместо этого рассмотреть возможность использования сервисов Angular.