Статическая папка и папка браузера

При использовании Angular universal для создания проекта Angular в папке dist создаются 3 папки.

  • сервер
  • статический
  • браузер

Папка server используется для предварительного рендеринга на сервере. Однако папки static и browser используются для размещения сайта на статическом хостинге.

В чем разница между папками static и browser? И какой лучше развернуть?

РЕДАКТИРОВАТЬ 1: Я понял, что папки static и browser при развертывании имеют одинаковое содержимое, но по-разному структурированы.

  • В статической версии: index.html и несколько файлов (js, css, ...) в корневой папке, кроме того, у каждого компонента есть своя папка, содержащая index.html, соответствующий компоненту.
  • В браузерной версии: index.html и некоторые файлы (js, css, ...) в корневой папке без папок, соответствующих компонентам (их шаблоны встроены в файлы корневой папки).

Ниже приведено Angular.json содержимое файла:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myapp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "myapp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "myapp:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "myapp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": ["src/styles.css"],
            "scripts": [],
            "assets": ["src/favicon.ico", "src/assets"]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
            "exclude": ["**/node_modules/**"]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        }
      }
    },
    "myapp-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "myapp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "myapp:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    }
  },
  "defaultProject": "myapp"
}

Можете ли вы показать вам angular.json файл? Я не уверен, откуда взялась папка static. Если это не для активов, в этом случае вам нужно развернуть оба

David 12.06.2019 11:01

@David Я добавил файл angular.json и дополнительную информацию

EddyG 12.06.2019 14:14

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

David 12.06.2019 15:35

@ Дэвид Я сначала сделал ng add @ng-toolkit/universal, и я использую команду npm run build:prerender. Обратите внимание, что обе папки генерируют один и тот же контент, но, как я уже сказал, имеют разную структуру. Если хотите, создайте новое угловое приложение, добавьте пару компонентов, запустите ng add @ng-toolkit/universal и npm run build:prerender, чтобы вы видели, что я получаю.

EddyG 12.06.2019 17:10
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
4
79
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

TL;ДР;

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

Объяснение

При использовании angular universal вы должны различать динамический рендеринг и предварительный рендеринг.

Динамический рендеринг

Всякий раз, когда вы получаете доступ к странице, angular universal будет отображать страницу (с помощью nodejs, используя серверные пакеты из каталога server), отправлять сгенерированный контент обратно клиенту (с уже отображаемыми компонентами html, встроенным CSS). После загрузки страницы JS из клиентского углового приложения вступит во владение, используя файлы из папки browser (так что стили и файлы js)

Предварительный рендеринг

При предварительном рендеринге перед развертыванием скрипт будет анализировать все статические маршруты, которые вы определили в своей маршрутизации (/contact, /about,...), выполнять рендеринг этих маршрутов и сохранять полученный html в папке static, с одним файлом index.html для каждой папки (где папка соответствует маршруту). Таким образом, прежде чем вы даже зайдете на свой веб-сайт, у вас уже будет сгенерирован правильный html.

Например, при доступе к маршруту contact будет возвращен файл dist/static/contact/index.html. Но, как и в случае с динамическим рендерингом, после загрузки страницы у вас все еще будет угловое JS-приложение из папки browser, которое вступит во владение. Вам не нужны nodejs, если вы используете только пререндеринг.

Вероятно, вы можете развернуть все 3 папки. browser всегда будет нужен, и вы можете использовать папку static для статических маршрутов и nodejs использовать папку server для рендеринга страниц для динамических маршрутов.

Подробнее о предварительном рендеринге здесь см.

Другие вопросы по теме