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

28.02.2022

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

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

Узнайте больше в The App Shell Model.

Шаг 1: Подготовьте приложение¶

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

1

ng new my-app --routing

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

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

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

1

ng generate app-shell

Более подробную информацию об этой команде смотрите в App shell command.

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "defaultConfiguration": "production",
  "options": {
    "outputPath": "dist/my-app/server",
    "main": "src/main.server.ts",
    "tsConfig": "tsconfig.server.json"
  },
  "configurations": {
    "development": {
      "outputHashing": "none",
    },
    "production": {
      "outputHashing": "media",
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "sourceMap": false,
      "optimization": true
    }
  }
},
"app-shell": {
  "builder": "@angular-devkit/build-angular:app-shell",
  "defaultConfiguration": "production",
  "options": {
    "route": "shell"
  },
  "configurations": {
    "development": {
      "browserTarget": "my-app:build:development",
      "serverTarget": "my-app:server:development",
    },
    "production": {
      "browserTarget": "my-app:build:production",
      "serverTarget": "my-app:server:production"
    }
  }
}

Шаг 3: Убедитесь, что приложение собрано с содержимым оболочки¶

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

1

ng run my-app:app-shell:development

Или использовать производственную конфигурацию.

1

ng run my-app:app-shell:production

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

Комментарии