При использовании Angular universal
для создания проекта Angular в папке dist
создаются 3 папки.
Папка server
используется для предварительного рендеринга на сервере. Однако папки static
и browser
используются для размещения сайта на статическом хостинге.
В чем разница между папками static
и browser
? И какой лучше развернуть?
РЕДАКТИРОВАТЬ 1:
Я понял, что папки static
и browser
при развертывании имеют одинаковое содержимое, но по-разному структурированы.
Ниже приведено 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"
}
@David Я добавил файл angular.json
и дополнительную информацию
Я предполагаю, что вы либо используете предварительный рендеринг (и поэтому у вас есть одна папка для каждого возможного маршрута), либо сохраняете сгенерированный html после рендеринга маршрута. Какую команду вы используете для компиляции и запуска ssr?
@ Дэвид Я сначала сделал ng add @ng-toolkit/universal
, и я использую команду npm run build:prerender
. Обратите внимание, что обе папки генерируют один и тот же контент, но, как я уже сказал, имеют разную структуру. Если хотите, создайте новое угловое приложение, добавьте пару компонентов, запустите ng add @ng-toolkit/universal
и npm run build:prerender
, чтобы вы видели, что я получаю.
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
для рендеринга страниц для динамических маршрутов.
Подробнее о предварительном рендеринге здесь см.
Можете ли вы показать вам
angular.json
файл? Я не уверен, откуда взялась папкаstatic
. Если это не для активов, в этом случае вам нужно развернуть оба