Оболочка приложения

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

Это дает пользователям осмысленную первую картину вашего приложения, которая появляется быстро, потому что браузер может просто визуализировать HTML и CSS без необходимости инициализации какого-либо JavaScript.

Шаг 1: подготовить заявку

Вы можете сделать это с помощью следующей команды CLI:

```ng new my-app ?routing```.

Для существующего приложения вы должны вручную добавить «RouterModule» и определить «<router-outlet>» в вашем приложении.

Шаг 2. Создайте оболочку приложения

Используйте CLI для автоматического создания оболочки приложения.

```ng generate app-shell --client-project my-app --universal-project server-app```

• my-app берет имя вашего клиентского приложения.
• server-app принимает имя универсального (или серверного) приложения.

После выполнения этой команды вы заметите, что файл конфигурации angular.json был обновлен, чтобы добавить две новые цели с некоторыми другими изменениями.

Код TypeScript:

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/my-app-server",
    "main": "src/main.server.ts",
    "tsConfig": "tsconfig.server.json"
  }
},
"app-shell": {
  "builder": "@angular-devkit/build-angular:app-shell",
  "options": {
    "browserTarget": "my-app:build",
    "serverTarget": "my-app:server",
    "route": "shell"
  }
}

Демонстрация в реальном времени:

См. Pen package.json от w3resource ( @ w3resource ) в CodePen .

Шаг 3. Убедитесь, что приложение создано с использованием содержимого оболочки

Используйте CLI для создания цели app-shell.

```ng run my-app:app-shell```

Чтобы проверить вывод сборки, откройте dist / my-app / index.html. Ищите текстовое приложение app-shell по умолчанию! чтобы показать, что маршрут оболочки приложения отображен как часть вывода.

Предыдущий: Начало работы с работниками сферы обслуживания
Далее: Служебный работник связи