Angular. Отличие baseHref от deployUrl
deployUrl
- задаёт путь для статических (js, css) файлов вindex.html
.baseHref
- определяет base, используется в ссылках и маршрутизации (routing) Angular
angular.json
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/<app-name>",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"baseHref": "/base-href/", <===
"deployUrl": "/deploy/", <===
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Awesome App</title>
<base href="/base-href/" /> <!-- baseHref -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="/deploy/styles.css" /> <!-- deployUrl -->
</head>
<body>
<app-root></app-root>
<script src="/deploy/runtime.js" defer></script> <!-- deployUrl -->
<script src="/deploy/polyfills.js" defer></script> <!-- deployUrl -->
<script src="/deploy/vendor.js" defer></script> <!-- deployUrl -->
<script src="/deploy/main.js" defer></script> <!-- deployUrl -->
</body>
</html>
Относительные ссылки браузер склеит с baseHref
<img src="./assets/rocket.svg" /> <!-- относительная, будет запрашивать /base-href/assets/rocket.svg -->
<img src="/assets/rocket.svg" /> <!-- абсолютная, будет запрашивать /assets/rocket.svg -->
<img src="assets/rocket.svg" /> <!-- относительная, будет запрашивать /base-href/assets/rocket.svg -->