How to point Angular static assets to WWW URL

Question

How to point Angular static assets to WWW URL

221 Views Asked by Alexander Mills At 20 October 2024 at 08:50

When I run ng build I get this index.html file:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ApiApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>

<script type="text/javascript">
  const appData = JSON.parse('<%=json%>');
</script>

<app-root></app-root>
<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

Using a script after a build I will push the static assets to some CDN, so I actually want to generate an .html file that looks like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ApiApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>

<script type="text/javascript">
  const appData = JSON.parse('<%=json%>');
</script>

<app-root></app-root>
<script type="text/javascript" src="http://cdn.github.com/runtime.js"></script>
<script type="text/javascript" src="http://cdn.github.com/polyfills.js"></script>
<script type="text/javascript" src="http://cdn.github.com/styles.js"></script>
<script type="text/javascript" src="http://cdn.github.com/vendor.js"></script>
<script type="text/javascript" src="http://cdn.github.com/main.js"></script>
</body>
</html>

(I made up the domain cdn.github.com). So I could manually generate the urls for these files, but I am wondering if Angular allows us to configure it somehow?

Original Q&A

There are 1 best solutions below

**Saddam Pojee** · Accepted Answer

You can configure it in angular.json file in your angular project.

{
  "projects": {
    "<Your Angular Project Name>": {
        "architect": {
            "build": {
                "options": {
                    "baseHref": "/testapp/",
                    "deployUrl": "/testapp/",
                    ...
                }
            }
        }
    }
  }
}

deployUrl is basically what you are looking for.

For available build options and its description, you can refer to the below link: https://github.com/angular/angular-cli/wiki/build

How to point Angular static assets to WWW URL

There are 1 best solutions below

Related Questions in ANGULAR

Related Questions in ANGULAR-CLI

Related Questions in ANGULAR-CLI-V7

Trending Questions

Popular # Hahtags

Popular Questions